Radio Group
One choice from a small visible set, where seeing all the options is the point.
Definition
A radio group presents mutually exclusive options, all visible simultaneously. It trades vertical space for the removal of an interaction and for immediate comparison.
Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.
On this plate
Reach for this when
- Two to five mutually exclusive options.
- Comparison between options matters.
Common mistakes
- Radio groups with no way to express 'none'.
- Missing fieldset and legend.
- Used for more than about seven options.
Requirements
- Wrap the group in a fieldset with a legend describing the choice.
- Arrow keys move between options within the group; Tab enters and leaves it. Native inputs do this for you.
- Provide a default only where one genuinely is the common case. Otherwise leave unselected and validate on submit.
- Include an explicit 'none' or 'prefer not to say' option where that is a legitimate answer, since a radio group cannot be deselected.
- Labels are part of the target.
Getting a radio group right
Do
- Wrap the group in a fieldset with a legend, so the question is announced with each option.
- Make the whole label clickable, not just the circle.
- Preselect the safest or most common option when there is one.
- Keep the options in a stable order that does not change between visits.
Do not
- Use radios when the reader must be able to choose nothing.
- Preselect an option that costs money or shares data.
- Put more than about seven options in a group. That is a select.
- Style the group so tightly that the labels merge into one block.
In practice
- i.
The group with no way back
When nothing is a valid answerA radio group cannot be unset once touched. Where declining is legitimate, the group needs an explicit None or Prefer not to say, because there is no other way for the reader to express it.
- ii.
Radios beat a select at five options
Choosing the controlFive shipping options as radios are visible, comparable and cost one interaction. The same five in a select cost two interactions and hide the comparison the reader needed to make.
Commonly confused with
Close neighbours that get substituted for each other. The difference is stated first, then the condition that picks one over the other.
Select
ComponentA collapsed control that reveals its options only when opened.
Key difference
Radios show every option at once and cost one interaction. A select hides them behind a second interaction and buys back vertical space, which only pays once the list is long.
Use Radio Group when
- There are roughly seven options or fewer.
- The options need comparing before one is chosen.
- One option should be recommended or preselected visibly.
Use Select when
- The list is long or familiar, such as countries or dates.
- The choice is routine and needs no comparison.
- Space is genuinely constrained, not merely tidy.
Local chart
CMP·006 · Region III · Grid E2
This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.
Continue from here
Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.
Principles behind this
The reasoning this solution is an application of.
- Default EffectBIAS·004 · Cognitive bias
- Hick's LawLAW·001 · Law
- ConstraintsPRIN·009 · Principle
Often used with
These usually appear in the same screen or the same decision.
- CheckboxCMP·005 · Component
Check your work
Review passes that test whether this was done properly.
- Form UX ChecklistCHK·001 · Checklist