Loading navigation…
User
API and Development
SegmentedControl displays a set of mutually exclusive options in a connected horizontal group, allowing users to switch between related views or settings with a single selection. It provides a compact selection interface where related options are presented as connected segments. Built on Radix UI's SegmentedControl component, it ensures consistent segmented control patterns across the interface with full keyboard and screen reader accessibility. Ideal for toggling between views, filters, or related options.
| Name | Default | Description |
|---|---|---|
children | required | SegmentedControlItem components to display. |
value | Currently selected value (controlled component). | |
defaultValue | Default selected value (uncontrolled component). | |
onValueChange | Callback function called when selection changes: (value: string) => void. | |
disabled | false | Whether the segmented control is disabled. |
size | SegmentedControlSize.Large | Controls the segment height and padding. |
fullSpan | false | Expands segments evenly across the parent width. Without it, the control keeps its intrinsic width in flex layouts. |
collapseUnselectedLabels | false | Animates unselected items down to their icons (200ms ease-out). The selection indicator follows measured item layout (no independent slide). Every collapsible item must provide icon and aria-label. |
| Name | Default | Description |
|---|---|---|
children | required | Content to display in the segment (text, icons, etc.). |
value | required | The value of the segment. |
disabled | false | Whether the individual segment is disabled. |
icon | Leading SVGAsset; required for items that collapse under collapseUnselectedLabels. | |
iconOnly | false | Renders a compact square segment for icon-only content. |
counter | Displays a subtle count beside the item label when greater than zero. |
Use for simple selection between related options.
Control selection state programmatically.
Use segmented controls for switching between views or tabs.
Toggle between different display modes or filters.
Switch between different data display formats.
Use concise labels for compact displays.
Segmented controls adapt to longer label text.
Segments automatically adjust to accommodate different label lengths.
Use icons to enhance visual communication.
Combine icons and text for richer labels.
Disable the entire control when appropriate.
Disable individual segments while keeping others active.
Use for simple binary choices.
Support three or more options when grouping related choices.