Segmented Control
Free
A compact single-choice control whose thumb slides to the selected option.
Revenue
$8,910
+9.6% vs last period
Customize
3
Size
Tone
Installation
npx shadcn@latest add https://ui.mekaigames.com/r/segmented-control.jsonWorks in any project set up with the shadcn CLI.
Install the dependency.
npm install motion- Copy the code from the Code tab into
components/ui/segmented-control.tsx.
Usage
import { SegmentedControl } from "@/components/ui/segmented-control";
<SegmentedControl
label="Date range"
options={["Day", "Week", "Month"]}
value={range}
onChange={setRange}
/>Props
8 properties| Property | Type | Default | Description |
|---|---|---|---|
| options | (string | { value, label, disabled? })[] | — | Choices in order. Plain strings are both value and label. |
| value | string | — | Selected value, for controlled use. |
| defaultValue | string | — | Selected value when uncontrolled. Defaults to the first option. |
| onChange | (value: string) => void | — | Called with the newly selected value. |
| size | "sm" | "md" | "lg" | "md" | Height and text size. |
| tone | "ink" | "accent" | "ink" | A raised neutral thumb, or one filled with the accent color. |
| label | string | "Options" | Accessible name of the radio group. |
| className | string | — | Extra classes for the group. |
Dependencies: motion