# Filter bar

The toolbar above a table: search (300px), status filter chips with counts, a Filters popover for the rest, and view options on the right. Counts always add up to the total.

- **Group:** Data table · **family:** `data-table` · **shadcn:** Input, Popover, ToggleGroup
- **Build:** `Input` + `ToggleGroup` + `Popover`; phone `Drawer`.
- **In apps/admin today:** Input exists; others new.
- **Client component:** yes. 

## Content rules

- Search placeholder names what is searched: "Search handle, cloth or code".

## Do

- Keep filters in the URL.

## Don't

- Hide the active filters.

## Accessibility

- **Keyboard:** Search first in tab order; / focuses search.
- **ARIA:** Result count in `aria-live="polite"` ("41 orders").
- **Focus:** After Apply, focus returns to the Filters button.

## Tokens

`--font-voice` `--font-stretch-title` `--s-2` `--muted-foreground` `--s-3` `--secondary-border` `--r-control` `--background` `--text-btn-sm` `--w-medium` `--foreground` `--motion-hover` `--w-regular` `--text-micro` `--font-ui` `--muted` `--ring` `--accent` `--primary` `--accent-foreground` `--s-1` `--w-semibold` `--r-pill` `--primary-foreground` `--text-10-5` `--s-4` `--text-small` `--text-body` `--border`

## Files

`filter-bar.html` live specimen · `filter-bar.css` kit rules · `filter-bar.d.ts` props · full page: `docs/components/filter-bar/` (phone: `m/`).