Search Filter List

ProNew

A list with a platform search bar that filters as you type, highlights nothing it cannot read, announces the result count and shows a helpful empty state with a clear button. Use this when a phone screen lists items the person usually finds by typing, such as settings, contacts or help topics.

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 a phone screen lists items the person usually finds by typing, such as settings, contacts or help topics.

Do not use it for server-side search with suggestions (use a combobox) or lists short enough to scan.

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
`items`	`{ id: string; title: string; subtitle?: string }[]`	`required`	Rows.
`platform`	`"ios"`	`"android"`	"ios"
`onSelect`	`(id: string) => void`	`-`	Called when a row is chosen.

Accessibility

The result count is a polite status ("3 results for “map”") that updates as you type; typing is not interrupted.
The empty state offers a "Show all topics" button and keeps focus in the field.
Rows are links or buttons from List Row; the search bar is a search landmark.

Testing

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

Guide and examples

When to use it

Use it when a phone screen lists items the person usually finds by typing, such as settings, contacts or help topics.

Do not use it for server-side search with suggestions (use a combobox) or lists short enough to scan.

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
`items`	`{ id: string; title: string; subtitle?: string }[]`	`required`	Rows.
`platform`	`"ios"`	`"android"`	"ios"
`onSelect`	`(id: string) => void`	`-`	Called when a row is chosen.

Accessibility

The result count is a polite status ("3 results for “map”") that updates as you type; typing is not interrupted.
The empty state offers a "Show all topics" button and keeps focus in the field.
Rows are links or buttons from List Row; the search bar is a search landmark.

Testing

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