SegmentedControl
A pill-style segmented control rendered as a group of <input type="radio"> + <label> pairs. Used for toggling between a small number of mutually exclusive options, such as view modes or filter settings.
Basic
<SegmentedControl
data={['React', 'Angular', 'Vue', 'Svelte']}
value="React"
/>With option objects
<SegmentedControl
value="week"
data={[
{ value: 'day', label: 'Day' },
{ value: 'week', label: 'Week' },
{ value: 'month', label: 'Month' },
{ value: 'year', label: 'Year', disabled: true },
]}
/>Full width
<SegmentedControl
data={['Overview', 'Analytics', 'Settings']}
value="Analytics"
fullWidth
/>Sizes and colors
<SegmentedControl data={['A', 'B', 'C']} size="xs" value="A" color="primary" />
<SegmentedControl data={['A', 'B', 'C']} size="sm" value="B" color="teal" />
<SegmentedControl data={['A', 'B', 'C']} size="lg" value="C" color="green" />Vertical orientation
<SegmentedControl
data={['Top', 'Middle', 'Bottom']}
value="Middle"
orientation="vertical"
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
data | (string|SegmentedControlItem)[] | — | Segments to render (required) |
value | string | — | Value of the selected segment (SSR snapshot) |
name | string | auto | Name for the radio group |
size | 'xs'|'sm'|'md'|'lg'|'xl' | — | Font size of segment labels |
radius | 'xs'|'sm'|'md'|'lg'|'xl'|string | — | Border-radius of the control and segments |
color | string | — | Background color of the active segment indicator |
fullWidth | boolean | — | Stretches the control to fill its container |
orientation | 'horizontal'|'vertical' | 'horizontal' | Arranges segments horizontally or vertically |
disabled | boolean | — | Disables all segments |
readOnly | boolean | — | Prevents changing the selected segment |
class | string | — | Additional CSS class names |
style | object | — | Inline styles |