# Select

Pick one value from a short list (under ~10). The trigger looks like a field; the list drops 4px on the menu surface. Statuses show their dot.

- **Group:** Form controls · **family:** `form-controls` · **shadcn:** Select
- **Build:** shadcn `Select` (Radix Select). Phone: the same options in a `Drawer`.
- **In apps/admin today:** Not in apps/admin.
- **Client component:** yes. 

## Content rules

- Placeholder is a verb phrase: "Choose garment type".

## Do

- Use Combobox past ~10 options.

## Don't

- A native `<select>` styled to look custom on desktop (fine on the phone sheet).

## Motion

- List in: opacity + `translateY(-4px)` + scale .985 on `--motion-pop-in` (160ms); out on `--motion-pop-out` (110ms).

## Accessibility

- **Keyboard:** Enter / Space / ↓ opens; ↑ ↓ move; Enter picks; Escape closes and returns focus; type-ahead jumps.
- **ARIA:** Radix Select gives `role="combobox"` + `listbox` / `option` with `aria-selected`.
- **Focus:** Focus returns to the trigger after a pick.

## Tokens

`--pop-shift` `--motion-pop-out` `--motion-handoff` `--motion-pop-in` `--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

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