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.
Props
SegmentedControl (Root)
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.
strong
false
Paints the selected segment on the transient surface (--color-bg-transient, label --color-fg-transient-default) with no border. The focus ring on it is --focus-ring-color-transient, the same in light and dark mode. A disabled selected segment keeps the regular disabled paint.
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.
SegmentedControlItem
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 Icon; 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.
Basic SegmentedControl
Use for simple selection between related options.
Controlled SegmentedControl
Control selection state programmatically.
Tab Navigation
Use segmented controls for switching between views or tabs.
View Toggle
Toggle between different display modes or filters.
Display Mode Toggle
Switch between different data display formats.
Short Labels
Use concise labels for compact displays.
Long Labels
Segmented controls adapt to longer label text.
Mixed Label Lengths
Segments automatically adjust to accommodate different label lengths.
With Icons
Use icons to enhance visual communication.
Icon with Text
Combine icons and text for richer labels.
Disabled SegmentedControl
Disable the entire control when appropriate.
Disabled Segment
Disable individual segments while keeping others active.
Two Options
Use for simple binary choices.
Multiple Options
Support three or more options when grouping related choices.