Components › Actions
Segmented control
One choice from a short set. A raised pill slides to the chosen option.
Installation
npx plankui@latest add segmentedUsage
import { Segmented } from "@/components/ui/segmented";
<Segmented options={[{ value: "monthly", label: "Monthly" }, { value: "yearly", label: "Yearly" }]} />API reference
| Prop | Type | Default | Description |
|---|---|---|---|
| options | { value: string; label: ReactNode; disabled?: boolean }[] | required | The choices. |
| value / defaultValue | string | first option | Controlled or initial value. |
| onValueChange | (value: string) => void | Called when the choice changes. | |
| size | "sm" | "md" | "md" | Key height. |