## Segmented Control (S—073)

A segmented control with a pill that slides and stretches between options, keyboard-first.

- URL: https://sundaeui.dev/components/segmented-control
- Category: Navigation & menus · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/segmented-control.json`
- Tags: tabs, view, radio, toggle, segmented, switcher

The selected pill measures its target and travels there, stretching slightly mid-flight so the movement reads as physical rather than a fade.
It is a radiogroup: arrow keys move and select, Home and End jump. Use it for two to five mutually exclusive views.

### Usage

```tsx
import { SegmentedControl } from '@/components/sundae/segmented-control'

<SegmentedControl />
```

### Props

- `options` (`{ value: string; label: string }[]`, required): Segments.
- `value / defaultValue` (`string`): Selected value.
- `onValueChange` (`(v: string) => void`): Called on change.
- `label` (`string`): Group name for screen readers.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Switching views of the same data: Day / Week / Month.
- Compact filters with 2–5 options.

### When not to use

- More than five options: use a select.
- Navigation between pages: use tabs or links.

### Accessibility

- role="radiogroup" with role="radio" segments and roving tabindex.
- Arrow keys move and select; Home/End jump.
- Reduced motion removes the movement and keeps every state change.

### Keyboard

- ← / →: Previous / next option
- Home / End: First / last option