# Radio
> Generated from radio.contract.json — do not edit by hand.

Pick exactly one option from a small mutually-exclusive set, all shown at once.

Tier: **leaf-lit**. Frameworks: HTML (paste-and-run, no build step) · React · Vue 3.

Surfaces: editor, dashboard, settings, audience.

## Props
| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `checked` | boolean | `false` | Controlled selection |
| `value` | string | `""` | The value this option contributes to the group |
| `name` | string | `—` | Groups radios; one `name` = one mutually-exclusive set |
| `variant` | 'dot' | 'button' | 'card' | `dot` | dot = ring + brand dot; button = segmented connected pill (Radio-Button-Group); card = the whole bordered card is the target (dot + title + optional description), selected card gets a brand border + bg-accent fill |
| `description` | string | `—` | Card variant only — a secondary line rendered under the title |
| `size` | 'default' | 'small' | `default` | default = 16px ring / 32px button; small = 14px ring / 24px button |
| `direction` | 'horizontal' | 'vertical' | `horizontal` | How a group flows; in button variant also picks which edges the connected pills round + share |
| `disabled` | boolean | `false` | Disables the control |
| `change` | CustomEvent<{value, checked}> | `—` | Composed event; read e.detail.value |

## Visual standard (measured)
- Ring: 16×16 circle · 1px #D4D4D4 border (small: 14×14)
- Hover border: #D3B4FF (purple-30)
- Checked: #6A1EBB ring + 8px brand dot (scales in)
- Disabled: #F1F1F1 fill · #EBEBEB border
- Label: Plus Jakarta 14/21 (small: 13/20)
- Button variant: segmented pill · 32px (small 24) · checked = bg-accent + brand border, shared edge collapsed
- Card variant: bordered card · dot + title + optional description · checked = brand border + bg-accent fill (16px pad, small 12px)

## When to use
- **Radio** — exactly one from a small (2–5) mutually-exclusive set, all worth showing at once
- **Select** — one value from a known set of more than ~5 options — don't crowd the surface
- **Checkbox** — one or more independent options that don't exclude each other

Pre-select a sensible default rather than leaving the group empty. Labels are sentence case and state the choice — 'Show results after each question', not 'Show Results'. Keep product nouns: Q&A, Word cloud. Reach for variant='button' when the options are short, mutually-exclusive views (Grid/List, Day/Week/Month) that read better as a segmented control. Reach for variant='card' when each option carries a title plus a line of explanation and the whole tile should be the click target (plan pickers, mode choosers).