# Segmented Control

One choice out of a few, always one selected (a click on the selected segment does nothing).

Source page: https://sproutboat.com/ikada/components/segmented-control

## Installation
```sh
npx shadcn@latest add https://sproutboat.com/ikada/r/segmented-control.json
```
Or from the package: `import { SegmentedControl } from "@sproutboat/ikada";`
## Usage
```tsx
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
### Range
One raised pebble on a recessed tray slides to the choice on the snappy spring.
```tsx
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} />
```
### Small

```tsx
const [value, setValue] = useState("24h");

<SegmentedControl aria-label="Range" size="sm" options={ranges} value={value} onValueChange={setValue} />
```
## Props
### SegmentedControlProps
Also takes every prop of `<T extends string = string>`.
| Prop | Type | Description |
| --- | --- | --- |
| options | `readonly SegmentedOption<T>[]` | The segments, in order: value and label. |
| value | `string` | The chosen segment's value (controlled). |
| onValueChange | `(value: T) => void` | Called with the newly chosen value. |
| aria-label | `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. |
Source: https://github.com/baronunread/ikada/blob/main/src/components/segmented-control.tsx