Segmented Control
One choice out of a few, always one selected (a click on the selected segment does nothing).
const ranges = [
{ value: "1h", label: "1h" },
{ value: "24h", label: "24h" },
{ value: "7d", label: "7d" },
{ value: "30d", label: "30d" },
];
const [value, setValue] = useState("24h");
<SegmentedControl aria-label="Range" options={ranges} value={value} onValueChange={setValue} />Installation
npx shadcn@latest add https://sproutboat.com/ikada/r/segmented-control.jsonThe CLI writes components/ikada/segmented-control.tsx and merges the ikada theme into your CSS. Or take it from the package: import { SegmentedControl } from "@sproutboat/ikada";
Usage
import { SegmentedControl } from "@/components/ikada/segmented-control";
const ranges = [
{ value: "1h", label: "1h" },
{ value: "24h", label: "24h" },
{ value: "7d", label: "7d" },
{ value: "30d", label: "30d" },
];
const [value, setValue] = useState("24h");
<SegmentedControl aria-label="Range" options={ranges} value={value} onValueChange={setValue} />Examples
const ranges = [
{ value: "1h", label: "1h" },
{ value: "24h", label: "24h" },
{ value: "7d", label: "7d" },
{ value: "30d", label: "30d" },
];
const [value, setValue] = useState("24h");
<SegmentedControl aria-label="Range" options={ranges} value={value} onValueChange={setValue} />const [value, setValue] = useState("24h");
<SegmentedControl aria-label="Range" size="sm" options={ranges} value={value} onValueChange={setValue} />Props
| Prop | Type | Description |
|---|---|---|
| optionsrequired | readonly SegmentedOption<T>[] | The segments, in order: value and label. |
| valuerequired | string | The chosen segment's value (controlled). |
| onValueChangerequired | (value: T) => void | Called with the newly chosen value. |
| aria-labelrequired | string | Names the group, e.g. "Theme". Required. |
| size | "sm" | "md" | Control height: sm or md (the default). |
| className | string | Classes merged onto the root element, after ikada's own. |
Also takes every prop of <T extends string = string>.