# Segmented control

Two to five mutually exclusive views or modes in one pill row: Gallery / Table, date ranges on a chart, density. A control, not navigation (that is Tabs).

- **Group:** Form controls · **family:** `form-controls` · **shadcn:** ToggleGroup
- **Build:** shadcn `ToggleGroup` (Radix) `type="single"`.
- **In apps/admin today:** Not in apps/admin.
- **Client component:** yes. 

## Content rules

- One or two words per segment.

## Do

- Keep the selection in the URL when it changes the view.

## Don't

- Use for page navigation: use Tabs.

## Motion

- Background, colour and shadow on `--motion-hover`.

## Accessibility

- **Keyboard:** Tab focuses the selected segment; ← → move and select.
- **ARIA:** `ToggleGroup type="single"` (`role="radiogroup"` / `radio`) with an `aria-label`.
- **Focus:** 2px `--ring` outline on the segment.

## Tokens

`--font-voice` `--font-stretch-title` `--muted` `--r-card` `--border` `--s-3` `--r-control` `--text-body` `--w-medium` `--muted-foreground` `--motion-hover` `--foreground` `--background` `--e-btn-2` `--ring` `--text-small` `--s-2` `--destructive`

## Files

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