build69 / Components / Selection & Choice / RadioGroup

RadioGroup

v1.0.4Updated 4 Oct 2026

Mutually-exclusive option group (Radix). Use when exactly one of a small set must be chosen. Adds inline / stacked / cards layouts, description + recommended-pill slots, per-item disabled state, and an optional icon slot

View source ← Back to catalog

Preview

Live · 15 stories

DefaultOpen ↗

▸Why this is recommendedformradiochoicegroup+2

The default, out-of-the-box RadioGroup.

Recommended for+14

✓Small choice sets (3-7 options)
✓Plan selectors
✓Yes/no with reasons
✓Variant selectors

Tags+6

formradiochoicegroupcardsdefault

Features+4

Arrow-key navigation
Arrow keys move focus AND check the radio they land on (selection follows focus), whether the key is tapped or held
Single selection only
Disabled items supported
Inline / stacked / cards layouts
Per-item description
Per-item recommended pill
Optional icon slot per item
Labelled by FormField: the div role=radiogroup (not labelable) points at the field label with aria-labelledby; id, aria-describedby, aria-invalid and aria-required reach it

Not recommended for−2

✕Large lists (use Select)
✕Multi-select (use Checkbox group)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "RadioGroup" })

Usage

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired

value

Selected value

string—

onValueChange

Value change callback

function—

layout

Visual layout

'inline' | 'stacked' | 'cards'—

items

Declarative radio items (alternative to children)

RadioItem[]—

aria-labelledby

Id(s) of the element(s) that label the radiogroup; wins over a FormField label