Segment
A segmented control for toggling between a small set of mutually exclusive options.
Usage
Without Separators
Controlled
Disabled
Disabled Item
Sizes
Theme Switcher
Two Items
With Icons
CSS Classes
Base & Size Classes
.segment- Base container with inline-flex layout and rounded corners.segment--sm- Small size (28px height, smaller padding).segment--md- Medium size (32px height, default).segment--lg- Large size (40px height, larger padding)
Element Classes
.segment__item- Individual toggle button.segment__item--sm/.segment__item--md/.segment__item--lg- Item size variants.segment__indicator- Animated selection indicator (positioned behind the selected item).segment__separator- Decorative divider between items (auto-hidden when adjacent to selected item)
Interactive States
- Selected:
[data-selected="true"]on.segment__item(foreground color change) - Hover:
:hoveror[data-hovered="true"]on unselected.segment__item(opacity reduction) - Focus visible:
:focus-visibleor[data-focus-visible="true"]on.segment__item(focus ring) - Disabled:
:disabledor[data-disabled="true"]or[aria-disabled="true"]on.segment__item(reduced opacity)
API Reference
Segment
The root component. Wraps RAC ToggleButtonGroup with a single-selection API.
| Prop | Type | Default | Description |
|---|---|---|---|
size | 'sm' | 'md' | 'lg' | 'md' | Size variant |
selectedKey | Key | null | - | The key of the currently selected item (controlled) |
defaultSelectedKey | Key | - | The key of the initially selected item (uncontrolled) |
onSelectionChange | (key: Key) => void | - | Handler called when the selected item changes |
isDisabled | boolean | - | Whether all items are disabled |
children | ReactNode | - | Segment items |
Also supports all RAC ToggleButtonGroup props except selectionMode, selectedKeys, defaultSelectedKeys, and onSelectionChange.
Segment.Item
An individual option wrapping RAC ToggleButton. Automatically renders a SelectionIndicator inside.
| Prop | Type | Default | Description |
|---|---|---|---|
id | Key | - | Unique key for this item |
children | ReactNode | ((renderProps) => ReactNode) | - | Item label or render function |
Also supports all RAC ToggleButton props.
Segment.Separator
Decorative divider between items. Automatically hidden adjacent to the selected item.
Also supports all native span HTML attributes.