Segmented control
A single choice from 2–4 visible options on a track. It is a form control with radiogroup semantics and arrow-key focus, not a tab switcher — reach for Tabs when there are panels. The selected segment reads as a calm raised pill rather than an accent fill.
Example
LowMediumHigh
<SegmentedControl aria-label="Priority" value={value} onValueChange={setValue} items={[ { value: 'low', label: 'Low' }, { value: 'medium', label: 'Medium' }, { value: 'high', label: 'High' }, ]}/>Props
| Prop | Type | Default | Notes |
|---|---|---|---|
items | { value, label, icon?, disabled? }[] | — | The segments. |
value / defaultValue | string | — | Controlled or uncontrolled selection. |
onValueChange | (value: string) => void | — | Called on change. |
aria-label | string | — | Required — it is a radiogroup. |