Recent Searches List

ProNew

A search field that shows recent searches when focused and empty, each with a remove button, a Clear all action and keyboard selection that fills and runs the search. Use this when people repeat searches on a phone and you can store the last few on the device.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

When to use it

Use it when people repeat searches on a phone and you can store the last few on the device.

Do not use it for suggestions that come from a server (use a combobox) or when searches are sensitive and should not be kept.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`recent`	`string[]`	`required`	Recent queries, newest first.
`onSearch`	`(query: string) => void`	`required`	Called when a query is run.
`onRemove`	`(query: string) => void`	`required`	Remove one.
`onClear`	`() => void`	`required`	Remove all.

Accessibility

The field is a combobox-free search input with a named list of recents below it, not a hidden popup, so it works with any screen reader.
Each recent is a button ("Search for map") with a separate Remove button ("Remove map from recent searches").
Clear all is a visible button; removing announces what was removed.

Testing

The pattern ships with a Testing Library test (recent-searches-list.test.tsx) that drives it through roles and the keyboard.

Guide and examples

When to use it

Use it when people repeat searches on a phone and you can store the last few on the device.

Do not use it for suggestions that come from a server (use a combobox) or when searches are sensitive and should not be kept.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`recent`	`string[]`	`required`	Recent queries, newest first.
`onSearch`	`(query: string) => void`	`required`	Called when a query is run.
`onRemove`	`(query: string) => void`	`required`	Remove one.
`onClear`	`() => void`	`required`	Remove all.

Accessibility

The field is a combobox-free search input with a named list of recents below it, not a hidden popup, so it works with any screen reader.
Each recent is a button ("Search for map") with a separate Remove button ("Remove map from recent searches").
Clear all is a visible button; removing announces what was removed.

Testing

The pattern ships with a Testing Library test (recent-searches-list.test.tsx) that drives it through roles and the keyboard.