Segmented Control
An iOS-style selector with a sliding pill that springs between options.
Sizes
Installation
pnpm dlx shadcn@latest add "https://godui.design/r/segmented-control.json"Usage
tsx
import { SegmentedControl } from "@godui/components";
const [view, setView] = useState("week");
<SegmentedControl
options={[
{ label: "Day", value: "day" },
{ label: "Week", value: "week" },
]}
value={view}
onChange={setView}
/>;Props
| Prop | Type | Default | Description |
|---|---|---|---|
options | SegmentedOption[] | — | { label, value, icon?, disabled? }. |
value | string | — | Controlled value. |
defaultValue | string | first option | Uncontrolled value. |
size | "sm" | "md" | "lg" | "md" | Control size. |
onChange | (value: string) => void | — | Fires on selection. |