# SegmentedControl

> One of a few values, all in view; the thumb slides to the choice.

- **Level**: molecule · **Status**: stable · **Role**: input
- **Import**: `import { SegmentedControl } from "@rrios-forge/ui/molecules/segmented-control";`
- **Source**: `packages/ui/src/molecules/segmented-control`

Pick one of two to five values, all in view (ADR-037). A radio group on Radix: arrow keys move and select, Tab leaves. One thumb travels to the chosen option on a pointer choice and jumps on a keyboard one. Use Tabs when the choice swaps a panel; a Select past five options.

## Use it for

- One of a few values, all in view (range, view mode) → `SegmentedControl` (two to five options; more → `Select`)

## Axes

| Axis | Part | Values | Default | Meaning |
|---|---|---|---|---|
| `size` | — | `sm` `md` | `md` | Ergonomic scale, in three families (control, text, container). |
| `fill` | — | `true` `false` | `false` | Card grows to its row's tallest sibling (ADR-012). |

## Stories

- [Playground](/?path=/story/components-molecules-segmentedcontrol--playground) · frame: `/iframe.html?id=components-molecules-segmentedcontrol--playground&viewMode=story`
- [Sizes](/?path=/story/components-molecules-segmentedcontrol--sizes) · frame: `/iframe.html?id=components-molecules-segmentedcontrol--sizes&viewMode=story`
- [Fill](/?path=/story/components-molecules-segmentedcontrol--fill) · frame: `/iframe.html?id=components-molecules-segmentedcontrol--fill&viewMode=story`
- [On a pane](/?path=/story/components-molecules-segmentedcontrol--on-a-pane) · frame: `/iframe.html?id=components-molecules-segmentedcontrol--on-a-pane&viewMode=story`
- [Disabled](/?path=/story/components-molecules-segmentedcontrol--disabled) · frame: `/iframe.html?id=components-molecules-segmentedcontrol--disabled&viewMode=story`
- [Keyboard](/?path=/story/components-molecules-segmentedcontrol--keyboard) — interaction test · frame: `/iframe.html?id=components-molecules-segmentedcontrol--keyboard&viewMode=story`

## Decisions that name it

- ADR-037 — Continuity motion: a decelerating curve, a travelling indicator, view transitions and the SegmentedControl

## Always

- Tokens only (R04); variants are semantic axes, never appearance (R02).
- Typography and actions are Poesía atoms, never raw HTML with utilities.
- Vibrant panes need a ground and never nest (ADR-027).