Forms
RadioGroup
A set of mutually exclusive choices.
Examples
default
Notes
A set of mutually exclusive choices.
Radix owns the roving tabindex, so the whole group is ONE tab stop and the arrow keys move between options — which is what the ARIA radiogroup pattern requires and what a stack of hand-rolled <input type="radio"> wrappers usually gets wrong.
Props
Also accepts everything in ComponentProps<typeof RadioGroupPrimitive.Root>. Those are forwarded to the underlying element and are not listed row by row.
Parts
Composed at the call site rather than configured through props, so a layout this component did not anticipate is still expressible.
RadioGroupItem
One option, and its label, as a single click target.
The <label> wraps both, so the whole row is clickable — a bare 18px circle is below every pointer-target guideline and is miserable on a phone.
| Prop | Type | Default | Description |
|---|---|---|---|
| childrenrequired | ReactNode | The visible label. Rendered inside the `<label>` that wraps the control. |
Also accepts everything in Omit<ComponentProps<typeof RadioGroupPrimitive.Item>, 'children'>. Those are forwarded to the underlying element and are not listed row by row.
Accessibility
- One tab stop for the whole group; the arrow keys move between options, per the ARIA radiogroup pattern.
- The label is inside the <label>, so the whole row is the click target.