Search With Filters Sheet

ProNew

A search bar with a Filters button showing the number of active filters, a sheet to change them, removable active-filter chips under the bar and a result count that updates in a status message. Use this when a phone search needs both a text query and a few filters, and people must see what is applied.

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 search needs both a text query and a few filters, and people must see what is applied.

Do not use it for searches with no filters, or filters that change the whole layout.

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; tags: string[] }[]`	`required`	Searchable items.
`filters`	`string[]`	`required`	The tags that can be filtered.

Accessibility

The Filters button's name includes the count ("Filters, 2 active"); the sheet's options are checkboxes inside a labelled group.
Active filters are removable chips whose buttons say "Remove filter Vegan"; removing keeps focus on the next chip or the Filters button.
The result count is a polite status and the empty state offers Clear filters.

Testing

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

Guide and examples

When to use it

Use it when a phone search needs both a text query and a few filters, and people must see what is applied.

Do not use it for searches with no filters, or filters that change the whole layout.

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; tags: string[] }[]`	`required`	Searchable items.
`filters`	`string[]`	`required`	The tags that can be filtered.

Accessibility

The Filters button's name includes the count ("Filters, 2 active"); the sheet's options are checkboxes inside a labelled group.
Active filters are removable chips whose buttons say "Remove filter Vegan"; removing keeps focus on the next chip or the Filters button.
The result count is a polite status and the empty state offers Clear filters.

Testing

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