Radio group
Pick exactly one option that stays visible, with arrow keys between them and a label row as the hit area.
Installation
npx shadcn@latest add @quireui/radio-groupUsage
<RadioGroup aria-label="Invoice due date" defaultValue="30">
<RadioLabel value="14">Net 14</RadioLabel>
<RadioLabel value="30">Net 30</RadioLabel>
</RadioGroup>RadioLabel puts the circle, its label and an optional description in one row, and the whole row selects it. It takes every Radio prop. Use Radio on its own where the label lives elsewhere.
Inline
The group is a column by default. Make it a row with className="flex-row" for two or three short options, like a format picker.
In a form
Inside a Field with a name, the chosen value is submitted with the form, and required blocks it until something is picked. Render the field as a fieldset with its label as the legend, so screen readers announce the question with every option.
<Field name="billing" render={<fieldset />}>
<FieldLabel render={<legend />} nativeLabel={false}>Billing cycle</FieldLabel>
<RadioGroup required>
<RadioLabel value="monthly">Monthly</RadioLabel>
<RadioLabel value="yearly">Yearly</RadioLabel>
</RadioGroup>
<FieldError />
</Field>Accessibility
The group is read as a radio group, named by its label or aria-label, and each option with its place in the set, like "2 of 3".
| Key | Action |
|---|---|
| Tab | Moves into the group on the chosen option (or the first one), and out again with the next Tab. |
| ↓ / → | Picks the next option, skipping disabled ones and wrapping from the last to the first. |
| ↑ / ← | Picks the previous option, wrapping from the first to the last. |
| Space | Picks the focused option when none is chosen yet. |
Radio group or something else?
- More than about five options, or they don't all need to be visible: Select.
- An on/off choice: Switch or Checkbox.
API reference
RadioGroup
Holds the options; arrow keys move the choice between them, Tab leaves the group.
Also takes every prop of Base UI's RadioGroup. Style it with [data-slot="radio-group"].
Radio
Also takes every prop of Base UI's Radio.Root. Style it with [data-slot="radio"].
RadioLabel
A radio with its label and an optional description; the whole row selects it.
Prop
Type
Style it with [data-slot="radio-label"].