## Radio
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.
Default to the HTML snippet — <aha-radio> is a standard custom element that renders on open — React/Vue are thin adapters over the same element.
Surfaces: editor, dashboard, settings, audience.
Props:
- checked: boolean, default false. Controlled selection
- value: string, default "". The value this option contributes to the group
- name: string, default —. Groups radios; one `name` = one mutually-exclusive set
- variant: 'dot' | 'button' | 'card', default 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, default —. Card variant only — a secondary line rendered under the title
- size: 'default' | 'small', default default. default = 16px ring / 32px button; small = 14px ring / 24px button
- direction: 'horizontal' | 'vertical', default horizontal. How a group flows; in button variant also picks which edges the connected pills round + share
- disabled: boolean, default false. Disables the control
- change: CustomEvent<{value, checked}>, default —. Composed event; read e.detail.value
Tokens: color-primary, border-strong, border-hover, bg-container, bg-container-disabled, border-disabled, bg-accent, text-default, text-secondary, text-disabled, font-product, radius-default.
Use when: 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).