Radio buttons

Radio buttons allow users to select exactly one choice from a group.

Radio buttons are a common way to let users know to make a single selection from a list of options. Only one radio button can be selected at a time within the same group. They also spell out each possible choice as its own item, with its own label (whereas checkboxes show a single label and the checking/unchecking of that item means opposite things). For example, if the question was, “Do you prefer blue or red?” the radio button options would be “blue” or “red.”

Users can’t “unselect” a radio button after they’ve selected it. One way to remedy this is to add a “none of the above” option to a radio button group, which essentially allows users to “unselect” a radio button they’ve already clicked on.

Default
Select one historical figure
Tile
Select one historical figure
<h6>Default</h6>
<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>

<h6 class="margin-top-7">Tile</h6>
<form class="usa-form">
  <fieldset class="usa-fieldset">
    <legend class="usa-legend">Select one historical figure</legend>
    <div class="usa-radio">
      <input class="usa-radio__input usa-radio__input--tile" id="historical-truth-2" type="radio" name="historical-figures-2" value="sojourner-truth">
      <label class="usa-radio__label" for="historical-truth-2">Sojourner Truth</label>
    </div>
    <div class="usa-radio">
      <input class="usa-radio__input usa-radio__input--tile" id="historical-douglass-2" type="radio" name="historical-figures-2" value="frederick-douglass">
      <label class="usa-radio__label" for="historical-douglass-2">Frederick Douglass <span class="usa-checkbox__label-description">This is optional text that can be used to describe the label in more detail.</span></label>
    </div>
    <div class="usa-radio">
      <input class="usa-radio__input usa-radio__input--tile" id="historical-washington-2" type="radio" name="historical-figures-2" value="booker-t-washington">
      <label class="usa-radio__label" for="historical-washington-2">Booker T. Washington</label>
    </div>
    <div class="usa-radio">
      <input class="usa-radio__input usa-radio__input--tile" id="historical-carver-2" type="radio" name="historical-figures-2" value="george-washington-carver" disabled>
      <label class="usa-radio__label" for="historical-carver-2">George Washington Carver</label>
    </div>
  </fieldset>
</form>

When to use the radio button component

  • 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 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 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.
  • Don’t mix default and tile variants. Pick one implementation and stick with it. When mixed, tiles can appear to indicate a bias or preference toward that option.
  • 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

  • Customize accessibly. If you customize the radio buttons, ensure they continue to meet 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.

Implementation

Radio buttons settings
Variable Description
$theme-input-tile-background-color-selected

Tile background color when selected

$theme-input-tile-border-radius

Tile border radius for rounded corners

$theme-input-tile-border-width

Tile border thickness

$theme-input-tile-border-color

Tile border color

$theme-input-tile-border-color-selected

Tile border color when selected

Radio buttons variants
Variant Description
usa-checkbox__input--tile Input tiles provide a larger interaction area and neatly group the label with the form control for readability. They’re useful in application forms and questionnaires, but may not be recommended when they create clutter on the page.

Package information

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