Filter Bottom Sheet

ProNew

A bottom sheet of toggle chips grouped by filter, with a live result count, Reset and an Apply button that reports the choice. Use this when a list or search needs several filters on a phone without leaving the page.

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 list or search needs several filters on a phone without leaving the page.

Do not use it for a single yes or no filter (use a switch in the toolbar) or when there are more than about 30 values (use a searchable picker).

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
`groups`	`FilterGroup[]`	`required`	`{ id, label, options: { value, label }[] }`.
`value`	`Record<string, string[]>`	`-`	Controlled selection per group.
`onApply`	`(value) => void`	`-`	Called with the selection when Apply is pressed.
`count`	`(value) => number`	`-`	Result count shown on the Apply button.

Accessibility

Each chip is a toggle button with aria-pressed; each group is a labelled group.
The Apply button says how many results there are, and the count is a polite status message, so changes are announced.
Reset is disabled when nothing is chosen. The sheet is the Bottom Sheet: modal, focus trapped, Escape closes without applying.

Testing

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

Guide and examples

When to use it

Use it when a list or search needs several filters on a phone without leaving the page.

Do not use it for a single yes or no filter (use a switch in the toolbar) or when there are more than about 30 values (use a searchable picker).

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
`groups`	`FilterGroup[]`	`required`	`{ id, label, options: { value, label }[] }`.
`value`	`Record<string, string[]>`	`-`	Controlled selection per group.
`onApply`	`(value) => void`	`-`	Called with the selection when Apply is pressed.
`count`	`(value) => number`	`-`	Result count shown on the Apply button.

Accessibility

Each chip is a toggle button with aria-pressed; each group is a labelled group.
The Apply button says how many results there are, and the count is a polite status message, so changes are announced.
Reset is disabled when nothing is chosen. The sheet is the Bottom Sheet: modal, focus trapped, Escape closes without applying.

Testing

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