Segmented control
A compact, visible single choice for 2–4 options. It is a radiogroup with arrow-key roving focus and form-value support, not a tab switcher; use Tabs when each option reveals a corresponding panel.
View choice
ListBoardTimeline
<SegmentedControl aria-label="View" defaultValue="list"> <SegmentedControlItem value="list">List</SegmentedControlItem> <SegmentedControlItem value="board">Board</SegmentedControlItem> <SegmentedControlItem value="timeline">Timeline</SegmentedControlItem></SegmentedControl>Unavailable choice
MonthlyYearlyCustom
<SegmentedControl aria-label="Billing interval" defaultValue="monthly"> <SegmentedControlItem value="monthly">Monthly</SegmentedControlItem> <SegmentedControlItem value="yearly">Yearly</SegmentedControlItem> <SegmentedControlItem value="custom" disabled>Custom</SegmentedControlItem></SegmentedControl>Props
| Prop | Type | Default | Notes |
|---|---|---|---|
SegmentedControl.value / defaultValue | string | — | Controlled or initial selection. |
SegmentedControl.onValueChange | (value) => void | — | Called when the selected item changes. |
SegmentedControl.aria-label | string | — | Required accessible name for the radiogroup. |
SegmentedControl.disabled | boolean | — | Disables the whole group. |
SegmentedControlItem.value | string | — | Identifies the item. Required. |
SegmentedControlItem.disabled | boolean | — | Disables one item. |