Filter Bar

ProNew

A list and table toolbar with search, faceted filter popovers with counts, and active filters as animated, removable chips.

Customize

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


pnpm dlx shadcn@latest add @tealmac-pro/filter-bar

The bar only holds filter state. Apply filters (selected values keyed by facet id) and search to your own rows, table or query.

Prop	Type	Default	Description
`facets`	`FilterFacet[]`	-	Filterable fields, each with options (`value`, `label`, `icon`, `count`).
`filters`	`Record<string, string[]>`	-	Selected values when controlled.
`defaultFilters`	`Record<string, string[]>`	`{}`	Selected values on first render when uncontrolled.
`onFiltersChange`	`(filters) => void`	-	Called with the next selection.
`search`	`string`	-	Search text when controlled. Omit with `defaultSearch` to hide the field.
`defaultSearch`	`string`	-	Search text on first render when uncontrolled.
`onSearchChange`	`(search: string) => void`	-	Called as the user types.
`searchPlaceholder`	`string`	`"Search…"`	Placeholder and accessible name of the search field.
`resultCount`	`number`	-	Announced politely after each change.
`resultLabel`	`string`	`"results"`	Noun in the announcement.
`actions`	`ReactNode`	-	Content at the end of the toolbar, such as view options.

Also accepts all div props.

Each facet is a button that opens a cmdk listbox: type to narrow the options, use the arrow keys to move and Enter to toggle. Checked options carry a hidden ", selected" so screen readers hear the state.
The facet button's name includes the number of selected values, for example "Status, 2 selected".
Active filters form a list named "Active filters"; every chip has a remove button such as "Remove Status filter".
Pass resultCount so the new number of results is announced in a polite live region.
Chips scale in and out with a spring; with reduced motion they only fade.

Guide and examples


pnpm dlx shadcn@latest add @tealmac-pro/filter-bar

The bar only holds filter state. Apply filters (selected values keyed by facet id) and search to your own rows, table or query.

Prop	Type	Default	Description
`facets`	`FilterFacet[]`	-	Filterable fields, each with options (`value`, `label`, `icon`, `count`).
`filters`	`Record<string, string[]>`	-	Selected values when controlled.
`defaultFilters`	`Record<string, string[]>`	`{}`	Selected values on first render when uncontrolled.
`onFiltersChange`	`(filters) => void`	-	Called with the next selection.
`search`	`string`	-	Search text when controlled. Omit with `defaultSearch` to hide the field.
`defaultSearch`	`string`	-	Search text on first render when uncontrolled.
`onSearchChange`	`(search: string) => void`	-	Called as the user types.
`searchPlaceholder`	`string`	`"Search…"`	Placeholder and accessible name of the search field.
`resultCount`	`number`	-	Announced politely after each change.
`resultLabel`	`string`	`"results"`	Noun in the announcement.
`actions`	`ReactNode`	-	Content at the end of the toolbar, such as view options.

Also accepts all div props.

Each facet is a button that opens a cmdk listbox: type to narrow the options, use the arrow keys to move and Enter to toggle. Checked options carry a hidden ", selected" so screen readers hear the state.
The facet button's name includes the number of selected values, for example "Status, 2 selected".
Active filters form a list named "Active filters"; every chip has a remove button such as "Remove Status filter".
Pass resultCount so the new number of results is announced in a polite live region.
Chips scale in and out with a spring; with reduced motion they only fade.