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
- value / defaultValue / onValueChange
- string / string / (value) => void
- default —
- Controlled or uncontrolled selection.
- name / label
- string / ReactNode
- default —
- Hidden native radios for form posts; a visible group label (or pass aria-label).
- size
- "sm" | "md"
- default "md"
- Control height and type scale.
- Item.value / Item.disabled
- string / boolean
- default —
- Segment identity and per-segment disabling.
| 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. |