# Combobox

A searchable picker for long lists: brands, staff, products, cloth collections. Typing filters and highlights the match; results group under small headings.

- **Group:** Form controls · **family:** `form-controls` · **shadcn:** Command, Popover
- **Build:** shadcn Combobox recipe: `Popover` + `Command` (cmdk).
- **In apps/admin today:** cmdk and @radix-ui/react-popover are installed (used by shell/brand-picker); no ui/ wrappers.
- **Client component:** yes. 

## Content rules

- Highlight the matched substring only.

## Do

- Group options ("Brands", "HQ").

## Don't

- Auto-pick the first result on blur.

## Motion

- As Select (pop in 160ms, out 110ms).

## Accessibility

- **Keyboard:** Typing filters; ↑ ↓ move; Enter picks; Escape clears the query then closes.
- **ARIA:** cmdk gives `role="combobox"`, `aria-activedescendant` and a `listbox`.
- **Focus:** Focus stays in the search input while the list is open.

## Tokens

`--muted-foreground` `--s-1` `--z-pop` `--s-2` `--s-3` `--border` `--text-body` `--foreground` `--w-semibold` `--text-micro` `--font-voice` `--r-chip` `--popover-foreground` `--motion-hover` `--muted` `--accent` `--accent-foreground` `--w-medium` `--text-small` `--primary` `--warning` `--s-4` `--draft` `--available` `--retired`

## Files

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