Single-choice filter chips with anchored editors, removable values and a controlled filtering workflow.
2 of 4 tasks
pnpm dlx shadcn@latest add @latheui/filter-barPart of Lathe Pro. Set up your project once with your license key: npx latheui init --key <key>. See Lathe Pro.
Filter Bar is part of Lathe Pro
The preview is live and free to try. The source, the install and every assembly come with Pro: $79 once, with lifetime updates.
Depends on
| Prop | Type | Default | Description |
|---|---|---|---|
| label* (required) | string | — | Accessible name for the group. |
| filters* (required) | FilterDefinition[] | — | Unique field keys, visible labels and single-choice options. Each option has value, label and optional disabled. |
| value / defaultValue | FilterValue[] | [] (defaultValue) | Controlled or initial selections: one { key, value } per field. Use unique keys and option values from filters. |
| onValueChange | (value: FilterValue[]) => void | — | Called when adding, changing, removing or clearing a filter. Apply these values to data in your app. |
| disabled | boolean | false | Disable all editing actions and close editors. |
| className | string | — | Style the wrapping group; chips wrap as space narrows. |
Own value and onValueChange to filter locally or translate selections into a server query. The bar never fetches or mutates your data.
const [filters, setFilters] = React.useState<FilterValue[]>([])
const visible = tasks.filter((task) =>
filters.every(({ key, value }) => task[key] === value)
)
<FilterBar label="Task filters" filters={definitions} value={filters} onValueChange={setFilters} />