KQ-037 · SEGMENTED/CONTROL
Segmented Control
A compact value picker whose raised thumb glides between segments on snap — radio-group semantics, so it selects a value rather than switching panels.
KQ-037 · SEGMENTED/CONTROL
View
Range
View grid · Range week
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/segmented-control
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value / defaultValue / onValueChange | string / string / (value) => void | — | Controlled or uncontrolled selection. |
| name / label | string / ReactNode | — | Hidden native radios for form posts; a visible group label (or pass aria-label). |
| size | "sm" | "md" | "md" | Control height and type scale. |
| Item.value / Item.disabled | string / boolean | — | Segment identity and per-segment disabling. |