# SegmentedControl

> One choice out of two to five, all in view: expense or income, 3M, 6M or 12M. Picking one clears the other, unlike a FilterPill. It is made of native radio inputs, so the arrow keys move between them and it takes one Tab stop. The indicator slides in CSS alone and stays still with reduced motion.

Section: Forms. Docs: https://entrepta.vercel.app/docs/components/segmented-control

## Install

```bash
npx @entrepta/cli@latest add segmented-control
```

Files: `primitives/segmented-control.tsx`, `lib/icon.tsx`.
npm packages: `@phosphor-icons/react`.
Comes with: `icon-lib`.

## Usage

```tsx
import { SegmentedControl } from "@/components/entrepta/segmented-control"

<SegmentedControl
  aria-label="kind"
  options={[
    { value: "expense", label: "expense" },
    { value: "income", label: "income" },
  ]}
  value={kind}
  onValueChange={setKind}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `options` | `{ value; label; icon?; disabled? }[]` | - | Two to five. More than that wants a Select |
| `value / onValueChange` | `string / (value: string) => void` | - | Controlled. defaultValue for uncontrolled |
| `size` | `"sm" \| "md"` | "md" | 28 or 36px tall |
| `aria-label` | `string` | - | The group's name. Or aria-labelledby |