# Cloth picker

The large picker for choosing a cloth from the library: search, supplier and collection filters, an in-stock switch, a table of cloths and a detail side panel with the swatch.

- **Group:** Form controls · **family:** `form-controls` · **shadcn:** Dialog, Command, Table
- **Build:** `Dialog` (or a large `Sheet`) holding `Command` search + `Table`.
- **In apps/admin today:** Dialog exists; Command and Table are new.
- **Client component:** yes. 

## Content rules

- Codes in Plex Mono (HS 81045, VBC 218.1003); collection names in italics in prose only.

## Do

- Keep filters visible while scrolling.

## Don't

- Hide out-of-stock cloths; mark them.

## Accessibility

- **Keyboard:** ↑ ↓ move rows; Enter selects; Tab reaches the side panel action.
- **ARIA:** Grid with `aria-selected` rows, or a `listbox`.
- **Focus:** Focus returns to the trigger field after Use this cloth.

## Tokens

`--border` `--r-card` `--background` `--s-3` `--s-4` `--w-semibold` `--text-card` `--font-voice` `--s-2` `--muted` `--control-h-sm` `--text-body` `--row-th` `--text-micro` `--muted-foreground` `--motion-hover` `--accent` `--e-rail` `--primary` `--text-small` `--text-section` `--tr-section` `--s-10` `--s-6` `--foreground`

## Files

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