SegmentedControl
A compact single-choice control for filters, view modes, and persistent preference choices.
import {
SegmentedControl,
SegmentedControlCount,
SegmentedControlItem,
SegmentedControlLabel,
} from "raft-ui";
<SegmentedControl defaultValue="all" aria-label="Filter">
<SegmentedControlItem value="all">
<SegmentedControlLabel />
<SegmentedControlCount />
</SegmentedControlItem>
</SegmentedControl>Segment items own icon sizing, label truncation, and count line-height. Compose plain icons, SegmentedControlLabel, and SegmentedControlCount unless a specific custom size is intentional.
valueT
The controlled selected item value.
defaultValueT
The initial selected value for uncontrolled use.
onValueChange(value: T) => void
Called when a segment is selected.
aria-labelstring
Native ARIA attribute naming the group for assistive tech. Set it when the group has no visible label.
disableddefault: falseboolean
Disables and dims the whole control.
namestring
Native form field name passed to Base UI RadioGroup.
classNamestring
Additional classes on the group.
| Prop | Type | Default | Description |
|---|---|---|---|
value | T | — | The controlled selected item value. |
defaultValue | T | — | The initial selected value for uncontrolled use. |
onValueChange | (value: T) => void | — | Called when a segment is selected. |
aria-label | string | — | Native ARIA attribute naming the group for assistive tech. Set it when the group has no visible label. |
disabled | boolean | false | Disables and dims the whole control. |
name | string | — | Native form field name passed to Base UI RadioGroup. |
className | string | — | Additional classes on the group. |
valueT
The value this segment selects.
disableddefault: falseboolean
Disables this segment only.
...propsBase UI Radio.Root.Props<T>
Native radio attributes plus Base UI radio behavior.
| Prop | Type | Default | Description |
|---|---|---|---|
value | T | — | The value this segment selects. |
disabled | boolean | false | Disables this segment only. |
...props | Base UI Radio.Root.Props<T> | — | Native radio attributes plus Base UI radio behavior. |
...propsComponentPropsWithRef<"span">
Segment label text.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | ComponentPropsWithRef<"span"> | — | Segment label text. |
...propsComponentPropsWithRef<"span">
Optional numeric badge or count shown after the label.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | ComponentPropsWithRef<"span"> | — | Optional numeric badge or count shown after the label. |