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.
API#WIP
| 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. |
| 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. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | ComponentPropsWithRef<"span"> | — | Segment label text. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | ComponentPropsWithRef<"span"> | — | Optional numeric badge or count shown after the label. |