Segment

Segments is a horizontal set of mutually exclusive options, all visible so the user can weigh them without opening anything. Use it for two to five short, stable choices — a view or a filter — and switch to a Select once the list grows or changes.

Examples

Text only

AllActiveInactive

<Segments aria-label="View" defaultValue="all">
<Segment value="all">All</Segment>
<Segment value="active">Active</Segment>
<Segment value="inactive">Inactive</Segment>
</Segments>

defaultValue selects a segment for uncontrolled use; pass value with onChange when the parent owns the selection. The animated indicator slides between segments as the value changes.

With icons

Bars

Line

<Segments aria-label="Chart" defaultValue="bars">
<Segment value="bars" startIcon={<BarChartIcon />}>
  Bars
</Segment>
<Segment value="line" startIcon={<ChartUpIcon />}>
  Line
</Segment>
</Segments>

startIcon sits before the label and tightens the leading padding; the segment sizes it and dims it until selected. Keep the text alongside it — an icon-only segment leaves the choice ambiguous.

When to use

Use Segments for two to five short, stable, mutually exclusive options that should all stay visible — a view or a filter.

Use something else when:

The list is longer, changes at runtime, or can be empty. Use Select.
Each option switches a whole panel of content. Use Tabs.
It is a single on/off setting. Use Switch.

Usage

Keep labels to one word and give one segment a defaultValue so the control always shows a current choice.

Don't

Use Segments when a choice can be empty or the options change at runtime. That is a Select, which allows no selection and a scrolling list.

Props

Segments

Prop	Type	Default
`children` The children of the component. A function may be provided to alter the children based on	Type`ChildrenOrFunction<RadioGroupRenderProps>`	Default—
`className` The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the	Type`ClassNameOrFunction<RadioGroupRenderProps>`	Default—
`defaultValue` The default value (uncontrolled).	Type`string \| null`	Default—
`isDisabled` Whether the input is disabled.	Type`boolean`	Default—
`isInvalid` Whether the input value is invalid.	Type`boolean`	Default—
`isReadOnly` Whether the input can be selected but not changed by the user.	Type`boolean`	Default—
`isRequired` Whether user input is required on the input before form submission.	Type`boolean`	Default—
`orientation` The axis the Radio Button(s) should align with.	Type`"horizontal" \| "vertical"`	Default`horizontal`
`validate` A function that returns an error message if a given value is invalid.	Type`((value: string) => true \| ValidationError \| null)`	Default—
`validationBehavior` Whether to use native HTML form validation to prevent form submission	Type`"native" \| "aria"`	Default`'native'`
`value` The current value (controlled).	Type`string \| null`	Default—

Prop	Type	Default
`value`required The value of the radio button, used when submitting an HTML form.	Type`string`	Default—
`borderRadius`	Type`number`	Default—
`children` The children of the component. A function may be provided to alter the children based on	Type`ChildrenOrFunction<RadioGroupRenderProps>`	Default—
`className` The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the	Type`ClassNameOrFunction<RadioGroupRenderProps>`	Default—
`inputRef` A ref for the HTML input element.	Type`Ref<HTMLInputElement \| null>`	Default—
`isDisabled` Whether the radio button is disabled or not.	Type`boolean`	Default—
`startIcon`	Type`ChildrenOrFunction<RadioRenderProps>`	Default—

Accessibility

Segments wraps React Aria's RadioGroup and each Segment is a Radio, so the group is one tab stop and the arrow keys move between options. Name the group with a visible label or aria-label, and give every Segment a value.

Unselected labels use fg-muted, which meets 4.5:1 contrast against the track in light and dark themes, so every option stays readable before it is chosen.

When the reader prefers reduced motion, the indicator jumps to the new segment instead of sliding, and the label colour changes at once.