Filter bar
A filter bar puts the search, filters, date range and result count above a list in one place, with one way to clear them all.
Search, select, chip and clear
Try a search or a chip: the count updates and Clear filters appears.
Show code
<KbFilterBar label="Filter requests" search={...} selects={...} chips={...} resultCount={24} activeCount={0} />When to use
- Use it above any list that can be narrowed.
- Chips are quick filters that toggle; selects pick one value; a date range has From and To labels.
- Show the count of what is on screen, and Clear filters only when something is on.
- Do not use chips as tabs. Use a segmented control for views.
24 requests · Clear filters
Showing results
Import
import { KbFilterBar } from "@/components/ui/KbFilterBar";
<KbFilterBar label="Filter requests" search={{ label: "Search requests", value, onChange }} chips={chips} onChipToggle={toggle}
resultCount={rows.length} resultNoun={{ one: "request", other: "requests" }} activeCount={n} onClear={clear} />Props
| Prop | Type | Default | What it does |
|---|---|---|---|
label | string | None | Names the search landmark. |
search, selects, chips, dateRange | objects | None | Each is optional; every control has an accessible name. |
resultCount, resultNoun | number, { one, other } | None | Polite live count. |
activeCount, onClear | number, () => void | None | Shows Clear filters when above zero. |
Keyboard and screen readers
- A search landmark with a name; every control is named.
- The result count is a polite live region.
- Date fields keep visible From and To labels.