Data display
Filter bar
The faceted toolbar above a list, table or board. Each active filter is a chip — field, operator and values — and you stack as many as you need, combined with All or Any. Add fields from a picker, edit a chip in place, and watch the result count update live.
npx shadcn@latest add @orbit/filter-barOverview
Click a chip to edit its values, + Add filter for a new field, toggle is / is not, switch All / Any, or Clear. Filtering is direct — no apply button. A chip closed with no values selected is removed automatically.
Anatomy
A chip carries a field icon and name, an operator that adapts to the selection (is → is any of, is not → is none of), the first value with a “+N” overflow, and a divider-set remove button. The bar lines chips up after a funnel mark, ends with a dashed add button, and keeps match mode, the count and Clear on the right — the Match toggle only appears once two or more filters have values.
Tweaks
Three props trim the bar: hide the count, drop the match toggle for single-filter views, or go compact for dense toolbars.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| fields | FilterField[] | — | Filterable fields: { id, label, icon?, options }. Options carry a color dot or an initials avatar. |
| filters | ActiveFilter[] | — | Controlled active filters: { id, fieldId, op, values }. Leave undefined for uncontrolled use. |
| defaultFilters | ActiveFilter[] | [] | Starting filters for uncontrolled use. |
| onFiltersChange | (filters: ActiveFilter[]) => void | — | Fires on every add, value toggle, operator flip, remove, and clear. |
| match | "all" | "any" | — | Controlled match mode — All narrows (AND), Any widens (OR). |
| defaultMatch | "all" | "any" | "all" | Starting match mode for uncontrolled use. |
| onMatchChange | (match) => void | — | Match toggle changed. |
| count | number | — | Result count rendered as “N results”. Hidden while undefined. |
| showCount | boolean | true | Show the result count. |
| matchToggle | boolean | true | Show the Match All/Any toggle once 2+ filters have values. |
| density | "comfortable" | "compact" | "comfortable" | Chip height 28px / 24px and tightened paddings. |
| …rest | HTMLAttributes<HTMLDivElement> | — | Everything else is forwarded to the root element, including ref. |
Usage
Keep filters and the view in sync
The bar and the list it controls are one unit. The count and the rows below should always agree.
Mix sorting into the filter bar
Sort belongs in the Top bar or on column headers. Filtering is about which rows show — not their order.
Show what an empty filter means
A chip with no values selected is ambiguous — the bar auto-removes it when its popover closes.
Stack a dozen narrow facets
Past a handful of chips the bar wraps and reading intent gets hard. Offer saved views for complex, recurring filters.
Keyboard & accessibility
Chip bodies, the add button, and Clear are focusable controls with the 3px themed ring. Both pickers build on the registry Menu: Arrow keys move through options, Enter picks a field, Space toggles a value (the popover stays open for multi-select), and Escape closes. The is / is-not and All / Any segments expose aria-pressed.