FilterBar

A compact toolbar that combines filter chips, a search input, and an optional sort dropdown. When the user focuses search with a non-"all" filter active, the chip row collapses and the active filter appears as a dismissible token inside the search field.

Demo

Filter chips on the left slide an animated underline to the active chip. When search is focused or query is non-empty and a non-"all" filter is selected, the chips are replaced by a token pill inside the search field. The token has an accessible × button and no dropdown. Backspace at the start of the input removes the token without changing the query. Filter chips can carry a state color via accent — see the FilterOption.accent prop below.

all²⁴running³failed²queued⁵done¹⁴

Search only

Omit filters and sortOptions to render just the search input.

Props

FilterBarProps

Prop	Type	Default	Description
`query`	`string`	—	Current search query (controlled).
`onQueryChange`	`(q: string) => void`	—	Called when the user types or clears the input.
`filters`	`FilterOption[]`	—	Filter chips rendered on the left. First option is treated as "all". Omit to hide chips.
`filterValue`	`string`	—	Active filter value (controlled).
`onFilterChange`	`(value: string) => void`	—	Called when a chip is clicked or the token is dismissed.
`placeholder`	`string`	`'search'`	Placeholder text for the search input.
`searchRef`	`RefObject<HTMLInputElement>`	—	Forward ref to the underlying input element.
`sortOptions`	`{ value: string; label: string }[]`	—	Options for the sort dropdown. Omit to hide the dropdown.
`sortValue`	`string`	—	Active sort value (controlled).
`onSortChange`	`(value: string) => void`	—	Called when the sort selection changes.
`className`	`string`	—	Extra classes on the root wrapper.

FilterOption

Field	Type	Description
`value`	`string`	Unique identifier for this filter.
`label`	`string`	Display text shown in the chip and as the token label.
`count`	`number`	Item count shown as a superscript next to the label.
`accent`	`string`	Tint color applied when `count > 0`. Prefer palette tones — `var(--tone-green)` (running/ok), `var(--tone-red)` (failed/error).