Radio buttons

Radio buttons allow users to see all available choices and select exactly one.

Select one historical figure
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<form class="usa-form">
  <fieldset class="usa-fieldset">
    <legend class="usa-legend usa-legend">Select one historical figure</legend>
    <div class="usa-radio">
      <input class="usa-radio__input" id="historical-truth" type="radio" name="historical-figures" value="sojourner-truth">
      <label class="usa-radio__label" for="historical-truth">Sojourner Truth</label>
    </div>
    <div class="usa-radio">
      <input class="usa-radio__input" id="historical-douglass" type="radio" name="historical-figures" value="frederick-douglass">
      <label class="usa-radio__label" for="historical-douglass">Frederick Douglass</label>
    </div>
    <div class="usa-radio">
      <input class="usa-radio__input" id="historical-washington" type="radio" name="historical-figures" value="booker-t-washington">
      <label class="usa-radio__label" for="historical-washington">Booker T. Washington</label>
    </div>
    <div class="usa-radio">
      <input class="usa-radio__input" id="historical-carver" type="radio" name="historical-figures" value="george-washington-carver" disabled>
      <label class="usa-radio__label" for="historical-carver">George Washington Carver</label>
    </div>
  </fieldset>
</form>

When to use the radio button component

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

When to consider something else

  • Multiple selections. Consider checkboxes if users need to select more than one option or if there is only one item to select.
  • Limited space. Consider a dropdown 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.

Usability guidance

  • Use the label as a target. Users should be able to tap on or click on either the text “label” or the radio button to select or deselect an option.
  • List items vertically. 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 adequate spacing. If you customize, make sure selections are adequately spaced for touch screens.
  • Set default values with caution. 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.

Accessibility

  • Customize accessibly. If you customize the radio buttons, ensure they continue to meet the the accessibility requirements that apply to all form controls.
  • 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.
  • The title attribute can replace <label>.

Implementation

Radio buttons settings

This component has no settings.

Radio buttons variants

This component has no variants.

Package information

  • Package usage: @import form-controls
  • Requires: required, global