Radio buttons are a common way to allow users to make a single selection from a list of options. Since only one radio button can be selected at a time (within the same group), each available choice must be its own item and label. In contrast, checkboxes may show a single label, with the checked/unchecked status of the item meaning opposite things. For example, a checkbox could have a single input/label and legend that says “I have read the terms and conditions.” Radio buttons would need two inputs/labels for the same legend, “No” and “Yes”.
Once a user selects one of the radio buttons in a group, the group can’t be easily reset to displaying no radio buttons selected. One possible solution would be to add a “none of the above” option to a radio button group, which would allow users to effectively unselect the other radio buttons in that group.
When to use
- To display a single selection. When users need to select only one option from a set of mutually exclusive choices.
When to consider something else
- Multiple selections. If users need to select more than one option or if there’s only one item to select, use checkboxes instead.
- Limited space. Consider a select component if you don’t have enough space to list out all available options.
- Selecting none. If users should be able to select zero of the options or change their mind and unselect an option, consider using checkboxes. You can also choose to add a “none of the above” option to the radio button group instead.
Usability guidance
- Use the label as a target. Users should be able to select either the text label or the radio button to select or deselect an option.
- List items vertically. Vertically-listed options are easier to read than those that are listed horizontally. A horizontal layout can make it difficult to tell which label belongs to which radio button.
- Use adequate spacing. Make sure selections are adequately spaced for touch screens. Consider using the tile variant for larger touch targets.
- Set default values with caution. Setting a default value can bias a decision, seem pushy, or alienate users who don’t fit your assumptions. Only use a default selection if you have data to back it up.
- Use a logical order. Make sure the selection options are organized in a meaningful way, like alphabetical or most-frequent to least-frequent. This helps users easily find the option they’re looking for.
Accessibility guidance - NEEDS CHECK
- Customize form controls accessibly.
- Use fieldset and legend. Group related radio buttons together with <fieldset> and describe the group with <legend>.
- Use proper labels and attributes. Each radio button should have a <label>. Associate the two by matching the <label>’s for attribute to the <input>’s id attribute.