Segmented Control
A group of mutually exclusive toggle buttons. Use for switching between views, time ranges, or modes — where the options are few and always visible. Built on Radix Tabs.
Examples
With icons
Icon only
Full width
Sizes
Disabled option
Props
SegmentedControl
options*
SegmentedControlOption[]
Array of segments. Each has value, label, optional icon, and optional disabled.
value
string
Controlled selected value.
defaultValue
string
Initial selected value (uncontrolled).
onValueChange
(value: string) => void
Called when the selection changes.
size= 'md'
'sm' | 'md' | 'lg'
Height and padding scale.
fullWidth= false
boolean
Stretches segments to fill the container width equally.
disabled= false
boolean
Disables all segments.
className
string
Additional classes on the track.
| Prop | Type | Default | Description |
|---|---|---|---|
| options* | SegmentedControlOption[] | — | Array of segments. Each has value, label, optional icon, and optional disabled. |
| value | string | — | Controlled selected value. |
| defaultValue | string | — | Initial selected value (uncontrolled). |
| onValueChange | (value: string) => void | — | Called when the selection changes. |
| size | 'sm' | 'md' | 'lg' | 'md' | Height and padding scale. |
| fullWidth | boolean | false | Stretches segments to fill the container width equally. |
| disabled | boolean | false | Disables all segments. |
| className | string | — | Additional classes on the track. |
SegmentedControlOption
value*
string
Unique value for this segment.
label*
ReactNode
Segment label or icon-only element.
icon
ReactNode
Icon rendered before the label.
disabled
boolean
Disables this segment individually.
| Prop | Type | Default | Description |
|---|---|---|---|
| value* | string | — | Unique value for this segment. |
| label* | ReactNode | — | Segment label or icon-only element. |
| icon | ReactNode | — | Icon rendered before the label. |
| disabled | boolean | — | Disables this segment individually. |