A mutually-exclusive set of Radio options, sharing one native name.
Doesn't reuse the same label pattern Input does: a group's label isn't "for" any one radio — it
names the whole group, so it's connected via aria-labelledby on the radiogroup role instead of
a real <label htmlFor>.
tsx
Plan
<RadioGroup label="Plan" defaultValue="free">
<Radio value="free" label="Free" />
<Radio value="pro" label="Pro" />
</RadioGroup>tsx
Plan
<RadioGroup defaultValue="free" label="Plan">
...
</RadioGroup>defaultValue
label
Examples
description/error/success describe the group as a whole, same as any other field — put
per-option context on the individual Radio's own label instead:
tsx
ShippingChoose how fast you need it.
<RadioGroup label="Shipping" description="Choose how fast you need it." defaultValue="standard">
<Radio value="standard" label="Standard — 5-7 days" />
<Radio value="express" label="Express — 2 days" />
</RadioGroup>Controlled, for when the selection needs to drive something else on the page:
tsx
Plan
const [plan, setPlan] = useState("free");
<RadioGroup label="Plan" value={plan} onChange={setPlan}>
<Radio value="free" label="Free" />
<Radio value="pro" label="Pro" />
</RadioGroup>;Props
| Prop | Type | Default | Description |
|---|---|---|---|
| defaultValue | text | — | — |
| description | text | — | — |
| disabled | boolean | — | |
| error | text | — | — |
| label | text | — | — |
| name | text | — | — |
| onChange | readonly | — | — |
| success | text | — | — |
| value | text | — | — |