Radio buttons | FEC Pattern Library

Radio buttons allow users to select exactly one option from a visible list.

When to use

When users need to select only one option out of a set of mutually exclusive choices.
When the number of available options can fit onto a mobile screen.

When to consider something else

Consider checkboxes if users need to select more than one option or if there is only one item to select.
Consider a dropdown if you don’t have enough space to list out all available options.
Consider toggles buttons which are styled radio buttons used when the interaction indicates whether a setting is on or off for an entire view.
If users should be able to select zero of the options.

Guidance from the U.S. Web Design System

Users should be able to tap on or click on either the text “label” or the radio button to select or deselect an option.

Options that are listed vertically are easier to read than those that are listed horizontally. Horizontal listings can make it difficult to tell which label pertains to which radio button.

Use caution if you decide to set a default value. Setting a default value can discourage users from making conscious decisions, seem pushy, or alienate users who don’t fit into your assumptions. If you are unsure, leave nothing selected by default.

GitHub issues

#314: Improve usability and visual design of check box and radio button elements

<div id="filters" class="filters is-open" style="border: none; padding: 20px;"> <legend class="label" for="citations">Citations</legend> <label>If more than one citation is entered:</label> <input type="radio" id="citation_require_all_false" name="ao_citation_require_all" value="false" checked> <label for="citation_require_all_false">Show cases citing any of them</label> <input type="radio" id="citation_require_all_true" name="ao_citation_require_all" value="true"> <label for="citation_require_all_true">Show cases citing all of them</label> </div>