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 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. |