ComponentCraft conventionFoundational
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 page
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.
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 EffectCognitive bias
- Hick's LawLaw
- ConstraintsPrinciple
Alternative approach
A different answer to the same problem, with a different cost.
- SelectComponent
Under about five options, radios show everything without a second interaction.