Radio Button
Radio buttons allow users to select a single option from a predefined set of mutually exclusive choices. Unlike checkboxes, only one option can be selected at a time.
Anatomy
- Label: Indicates the purpose of the radio buttons. It should clearly communicate what kind of decision has to be made
- Description: Provides additional context/instructions
- Radio button: The radio button selection control.
- Radio button label: Describes the purpose of the radio buttons. It should clearly communicate what kind of choice is expected.
Usage Guidelines
Use for Small Sets
Radio buttons are best suited for small sets of options (typically 2 to 5). For larger sets of options, consider using a dropdown menu instead to reduce visual clutter.
Use for Mutually Exclusive Choices
Only use radio buttons when the options are mutually exclusive. If multiple selections are possible, consider using checkboxes instead.
✅ Use checkboxes for multiple choices
❌ Don’t Use radio buttons when the choices are not mutually exclusive
Preselected Option
If one of the options is the most common or recommended, pre-select it as the default option. However, ensure it’s easy for the user to change their selection.