Radio Group
Also called radio buttons, option buttons, single-select group
A set of mutually exclusive options sharing one name, of which exactly one can be selected.
Example
Radio group
One tab stop for all three. Arrow keys move and select at the same time, and picking a second option releases the first — the browser does it, not your code.
Checkbox group
Three tab stops, and nothing stops someone answering twice. The invalid state is reachable, so it has to be caught later and explained.
Chosen: nothing yet · No option is pre-selected, so a skipped question stays visibly unanswered instead of submitting a default nobody chose.
When to use it
- Exactly one option must be chosen and the options are few enough to show at once — roughly two to seven.
- The options need comparing before deciding: shipping speeds with prices, plans with limits.
- Choosing one must visibly un-choose the others. That relationship is the point.
When not to
- More than one answer can be true. That is a checkbox group, and using radios means throwing away answers.
- The list is long. Fifteen radios is a wall; that is a select, or a combobox if longer still.
- There are two options and one is plainly the default state of a setting that applies immediately — that reads better as a switch.
Trade-offs
- Exclusivity is structural. There is no state in which two are selected, so there is no validation rule to write or forget.
- Every option and its consequences are visible at once, which a select cannot do.
- One tab stop for the whole group, so a keyboard user passes a five-option question in a single Tab.
- Once selected, a radio cannot be cleared by clicking it again. If “no answer” is valid, you must provide it as an option.
- Takes vertical space proportional to the number of options.
- A group of one is meaningless, and a group where the options are not mutually exclusive is a bug wearing the wrong control.
Accessibility
What this pattern needs in order to work for everyone.
- Keyboard
- The group is one tab stop. Tab enters it, arrows move between options, Tab leaves — this is roving tabindex, and the browser does it for free with native inputs.
- Arrowing onto an option selects it. That is correct behaviour, not a bug: browsing and choosing are the same action here.
- If nothing is selected yet, Tab lands on the first option without selecting it.
- Roles and state
- Native `<input type="radio">` elements sharing one `name` are already a group. A custom one needs `role="radiogroup"` and `role="radio"` with `aria-checked`.
- Wrap the group in a `<fieldset>` with the question as its `<legend>`, so the question is announced before the first option instead of leaving “Standard” with no context.
- Give each option a real `<label>`; the label doubles as the hit target, which matters on touch.
- Focus
- Focus and selection travel together inside the group. Do not move focus out of the group when a value is chosen, even if choosing reveals more fields below.
In the wild
- GOV.UK — Radios for anything up to about seven options, always in a fieldset, with no option pre-selected.
- Stripe Checkout — Shipping methods as radios so the price of each is visible while deciding.
Compared with
Side-by-side breakdowns of patterns that solve a similar problem.