Segmented Toggle
Bordered bar of joined segments with a selected fill that glides or cross-fades between them, built on Radix ToggleGroup and Motion.
Preview
Studio bookings · Priya’s wheel class
86
+12% vs last week
Align
View
Notify Ines and Malik by
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| type | "single" | "multiple" | "single" | One selected segment, or any number. |
| value | string | string[] | - | Controlled value (string for single, array for multiple). |
| defaultValue | string | string[] | - | Initial value when uncontrolled. |
| onValueChange | (value) => void | - | Called when the selection changes. |
| allowEmpty | boolean | false | Single mode: clicking the selected segment clears the selection. |
| variant | "raised" | "key" | "raised" | Raised pebble lifted out of the well, or the lit key as the selected fill. |
| indicator | "slide" | "fade" | "slide" | How the selected fill moves in single mode. Multiple mode always fades. |
| size | "sm" | "md" | "lg" | "md" | Segment height; icon-only segments stay square. |
| orientation | "horizontal" | "vertical" | "horizontal" | Layout direction and arrow-key axis. |
| dividers | boolean | true | Thin lines between unselected neighbours. |
| items | SegmentedToggleOption[] | - | Segments as data: { value, label?, icon?, disabled?, aria-label? }. Ignored when children are given. |
| disabled | boolean | false | Disables every segment. |
| loop | boolean | true | Arrow-key focus wraps at the ends. |
| className | string | - | Merged on the root bar. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.