Radio Button
Edit this pageRadio buttons allow users to select one option from a set of mutually exclusive choices. They work in groups where only one option can be selected at a time. When a user selects a new option, the previous selection is automatically deselected.
Single SelectMutually ExclusiveForm ControlAccessibleWCAG Compliant
Primary Purpose of Radio Buttons
Understanding when and why to use radio buttons in your interface design.
Core Purpose
- • Single Selection: Choose one option from multiple choices
- • Mutually Exclusive: Selecting one deselects others
- • Visible Options: All choices are visible at once
- • Default Selection: Can have a pre-selected default option
Radio vs Checkbox vs Select
Use Radio When:
- • 2-6 mutually exclusive options
- • All options should be visible
- • Need to compare options easily
Use Checkbox When:
- • Multiple selections allowed
- • Independent options
- • Binary choices (on/off)
Use Select When:
- • 7+ options available
- • Space is limited
- • Options are familiar
Interactive Radio Button Examples
Payment Method Selection
Selected: credit-card
How should we contact you?
References & Resources
External resources and design system references for radio button components.