Beta
Segmented Control
A hairline pill whose thumb glides between options with a shared-layout spring. Tabular labels, no chrome.
Segmented Control
A hairline pill whose thumb glides between options with a shared-layout spring. Tabular labels, no chrome.
When to use it
The plain version of the same idea, for when the surrounding UI is already dense and the control should recede. Tabular labels keep the thumb from resizing as the selection moves.
Install
Adds Segmented Control and its dependencies to your project through the shadcn CLI.
$ npx shadcn@latest add https://www.ssicevs.com/r/segmented-control.jsonProps · SegmentedControl
| Prop | Type | Default |
|---|---|---|
| options | string[] | — |
| value? | string | — |
| onChange? | (v: string) => void className?: string | — |
Generated from the component source. Run npm run props:extract after changing a signature.