# Radio

> One choice out of a few, shown together in a group.

- **Level**: atom · **Status**: stable · **Role**: input
- **Import**: `import { Radio, RadioGroup } from "@rrios-forge/ui/atoms/radio";`
- **Source**: `packages/ui/src/atoms/radio`

Single-choice selector inside a RadioGroup. Composes `@radix-ui/react-radio-group`: the group owns the roving tabindex (arrow keys move between items) and the group `aria-labelledby`. Pair every Radio with a Label via `htmlFor` → `id`.

## Use it for

- Binary toggle / checkbox / radio group → `Switch` (in `SettingsField` with label) / `Checkbox` / `ChoiceGroup` with `Radio`

## Axes

| Axis | Part | Values | Default | Meaning |
|---|---|---|---|---|
| `size` | — | `sm` `md` `lg` | `md` | Ergonomic scale, in three families (control, text, container). |
| `invalid` | — | `true` `false` | `false` | Fails validation: a danger edge, announced as invalid; pair it with an error message. |

## Stories

- [Playground](/?path=/story/components-atoms-radio--playground) · frame: `/iframe.html?id=components-atoms-radio--playground&viewMode=story`
- [Sizes](/?path=/story/components-atoms-radio--sizes) · frame: `/iframe.html?id=components-atoms-radio--sizes&viewMode=story`
- [States](/?path=/story/components-atoms-radio--states) · frame: `/iframe.html?id=components-atoms-radio--states&viewMode=story`
- [Group](/?path=/story/components-atoms-radio--group) · frame: `/iframe.html?id=components-atoms-radio--group&viewMode=story`

## 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).