Radio buttons provides a selection with two or more options. Only one option can be selected.
Do's
- use labels as click targets (clicking the label will select that option)
- group related fields
- order logically (e.g. ages 18-25, ages 25-35, ages, 35-50, over 65)
- indicate whether the input group is optional - if it's mandatory, have a neutral option (e.g. other, n/a) selected by default
- make use of helper text if there are further directions or hints the users may need in completing their goal
- write specific and clear error messages, so users understand how to address the error
Don'ts
- don't add them without grouping first
- don't nest elements under radio buttons - keep all the options on the same level
When to use
- when you have under 10 items
- when users need to select options or toggle settings
- in forms with multiple non-exclusive options (e.g. search filters)
- only one selection can be made
When not to use
- avoid when more than one option can be selected - use checkboxes or multi-select instead