components
Segmented control
A single-select control built on Radix Toggle Group, in the iOS style. Segments sit in a muted track and the active one lifts into a raised pill. It always keeps one option selected, so a click on the active segment is ignored rather than clearing the choice. Great for switching list and grid views or compact filter modes on mobile.
Basic
With icons
Full width
Stretches to fill its container, with equal-width segments.
Sizes
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| options | { value, label, icon? }[] | none | Segments to render. |
| value | string | none | Controlled selected value. |
| defaultValue | string | none | Uncontrolled initial value. Falls back to the first option. |
| onValueChange | (v: string) => void | none | Fires on selection. Never fires with an empty value. |
| size | "sm" | "md" | "lg" | "md" | Touch-first size. Every size keeps a 44px tap target. |
| fullWidth | boolean | false | Stretch to fill the container width. |