Segmented control (e.g. Following / Everyone). Fill is the state — no underline.
Anatomy
┌ surface-container, r-2, p-3, border outline-variant ┐ │ ┌──────────┐ ┌──────────┐ │ │ │Following │ │ Everyone │ ← active: bg-brand + │ │ └──────────┘ └──────────┘ on-brand + mint glow; │ │ active inactive inactive: fg-muted │ └──────────────────────────────────────────────────────┘
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
options | LaneOption<T>[] | — | { value, label }. Generic T extends string keeps value/onChange type-safe. |
value | T | — | Controlled selected value. |
onChange | (value: T) => void | — | Fired on segment tap. |
className | string | — | Merged via cn. |
Motion
--motion-fast (150ms) on background-color / color / box-shadow as selection moves. Reduced-motion: neutralized by the global reset.
A11y
- ·
role="tablist"+role="tab"+aria-selectedper segment. - · Keyboard (roving tabindex — only the active segment is tabbable):
←/→ move selection and focus (wrapping) · Home/End jump to
first/last.
- · Segment height 36px; the 6px padded track gives a ~42px tap target.
- · State is conveyed by fill + text color together, not color alone.