Skip to primary navigation Skip to main content
US flag signifying that this is a United States Federal Government website An official website of the United States Government USDA United State Department of Agriculture Farm Production and Conservation
FPAC Design System fsa-style@2.7.3
Get Started

Radio

Overview

Choose a single option from a set of available values.

Preview

View Kitchen Sink

Its most common usage is as a nested component of the Form Fields component.

<ul class="fsa-form-list" aria-label="Example display of 4 radio states">
  <li>
    <span>
      <input class="fsa-radio" id="lorem-checked" type="radio" name="asdfasdfqewr" value="lorem-checked" checked="">
      <label for="lorem-checked">Checked</label>
    </span>
  </li>
  <li>
    <span>
      <input class="fsa-radio" id="lorem-unchecked" type="radio" name="asdfasdfqewr" value="lorem-unchecked">
      <label for="lorem-unchecked">Unchecked</label>
    </span>
  </li>
  <li>
    <span>
      <input class="fsa-radio" id="lorem-disabled" type="radio" name="asdfasdfqewr" value="lorem-disabled" disabled="">
      <label for="lorem-disabled">Disabled</label>
    </span>
  </li>
  <li>
    <span>
      <input class="fsa-radio" id="lorem-checked-and-disabled" type="radio" name="qweraewr" value="lorem-checked-and-disabled" disabled="" checked="">
      <label for="lorem-checked-and-disabled">Checked and Disabled</label>
    </span>
  </li>
</ul>

Variants

class="fsa-radio fsa-radio--[VARIANT]"

Default

<span>
  <input class="fsa-radio" id="lorem-ipsum-9" type="radio" name="lorem-ipsum-9" value="lorem-ipsum-9">
  <label for="lorem-ipsum-9">Label</label>
</span>

Solo

<span>
  <input class="fsa-radio fsa-radio--solo" id="solo-radio-example__01" type="radio" name="solo-radio-example" value="solo-radio-example__01">
  <label for="solo-radio-example__01"><span class="fsa-sr-only">Label</span></label>
</span>
<span>
  <input class="fsa-radio fsa-radio--solo" id="solo-radio-example__02" type="radio" name="solo-radio-example" value="solo-radio-example__02" checked="">
  <label for="solo-radio-example__02"><span class="fsa-sr-only">Label</span></label>
</span>
<span>
  <input class="fsa-radio fsa-radio--solo" id="solo-radio-example__03" type="radio" name="solo-radio-example" value="solo-radio-example__03" disabled="">
  <label for="solo-radio-example__03"><span class="fsa-sr-only">Label</span></label>
</span>
<span>
  <input class="fsa-radio fsa-radio--solo" id="solo-radio-example__04" type="radio" name="solo-radio-example__asdf" value="solo-radio-example__04" disabled="" checked>
  <label for="solo-radio-example__04"><span class="fsa-sr-only">Label</span></label>
</span>

States

Radio states are styled not by a class, but depending on their state (primarily through the presense of an attribute) and may be combinable, e.g. disabled and checked.

Checked

<span>
  <input class="fsa-radio" checked="checked" id="lorem-ipsum-6" type="radio" name="lorem-ipsum-6" value="lorem-ipsum-6">
  <label for="lorem-ipsum-6">Label</label>
</span>

Disabled

<span>
  <input class="fsa-radio" disabled="disabled" id="lorem-ipsum-8" type="radio" name="lorem-ipsum-8" value="lorem-ipsum-8">
  <label for="lorem-ipsum-8">Label</label>
</span>

Disabled and Checked

<span>
  <input class="fsa-radio" checked="checked" disabled="disabled" id="lorem-ipsum-3" type="radio" name="lorem-ipsum-3" value="lorem-ipsum-3">
  <label for="lorem-ipsum-3">Label</label>
</span>

Within a Field

Choose that one special pie 
<div class="fsa-field">
  <label class="fsa-field__label" id="lorem-radio-field-1">Your Favorite Pie</label>
  <ul class="fsa-form-list" aria-labelledby="lorem-radio-field-1">
    <li>
      <span>
        <input class="fsa-radio" id="apple-radio" type="radio" name="fav-pie">
        <label for="apple-radio">Apple</label>
      </span>
    </li>
    <li>
      <span>
        <input class="fsa-radio" id="key-lime-radio" type="radio" name="fav-pie">
        <label for="key-lime-radio">Key Lime</label>
      </span>
    </li>
    <li>
      <span>
        <input class="fsa-radio" id="pumpkin-radio" type="radio" name="fav-pie">
        <label for="pumpkin-radio">Pumpkin</label>
      </span>
    </li>
    <li>
      <span>
        <input class="fsa-radio" id="none-radio" type="radio" name="fav-pie" checked>
        <label for="none-radio">None of the above</label>
      </span>
    </li>
  </ul>
  <span class="fsa-field__help" id="lorem-yyss8cytr2x2x2-help-9">Choose that one special pie</span>
</div>

Within a Field, horizontal list

Choose that one special pie 
<div class="fsa-field fsa-field--fill">
  <label class="fsa-field__label" id="lorem-radio-field-1--3380">Your Favorite Pie</label>
  <div class="fsa-level" aria-labelledby="lorem-radio-field-1--3380" aria-describedby="lorem-radio-field-1-help--3380">
    <span>
      <input class="fsa-radio" id="apple-radio--3380" type="radio" name="fav-pie">
      <label for="apple-radio--3380">Apple</label>
    </span>
    <span>
      <input class="fsa-radio" id="key-lime-radio--3380" type="radio" name="fav-pie">
      <label for="key-lime-radio--3380">Key Lime</label>
    </span>
    <span>
      <input class="fsa-radio" id="pumpkin-radio--3380" type="radio" name="fav-pie">
      <label for="pumpkin-radio--3380">Pumpkin</label>
    </span>
    <span>
      <input class="fsa-radio" id="none-radio--3380" type="radio" name="fav-pie" checked>
      <label for="none-radio--3380">None of the above</label>
    </span>
  </div>
  <span class="fsa-field__help" id="lorem-radio-field-1-help--3380">Choose that one special pie</span>
</div>

Solo Example within a Table

Caption that is hidden visually, but read by screenreader
Commodity Loan Rate 30-Day Period PCP Alternative PCP Effective LDP Rate
Barley $/Bushel 1.75 3.30 2.60 0.00
Canola $/Cwt. 8.94 15.99 15.89 0.00 
<table class="fsa-table">
  <caption class="sr-only">Caption that is hidden visually, but read by screenreader</caption>
  <thead>
    <tr>
      <th class="fsa-table__th--sticky fsa-table__th--select">
        <span>
          <input class="fsa-radio fsa-radio--solo" data-behavior="select-one-table-row" id="commodities__select-row--00" type="radio" name="commodities__select-row" value="01" disabled>
          <label for="commodities__select-row--00"><span class="sr-only">Select this row</span></label>
        </span>
      </th>
      <th scope="col">Commodity</th>
      <th scope="col" class="fsa-text-align--right">Loan Rate</th>
      <th scope="col" class="fsa-text-align--right">30-Day Period PCP</th>
      <th scope="col" class="fsa-text-align--right">Alternative PCP</th>
      <th scope="col" class="fsa-text-align--right">Effective LDP Rate</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td aria-label="Select">
        <span>
          <input class="fsa-radio fsa-radio--solo" data-behavior="select-one-table-row" id="commodities__select-row--01" type="radio" name="commodities__select-row" value="01">
          <label for="commodities__select-row--01"><span class="sr-only">Select this row</span></label>
        </span>
      </td>
      <td>Barley $/Bushel</td>
      <td class="fsa-text-align--right">1.75</td>
      <td class="fsa-text-align--right">3.30</td>
      <td class="fsa-text-align--right">2.60</td>
      <td class="fsa-text-align--right">0.00</td>
    </tr>
    <tr class="fsa-table__row--selected">
      <td aria-label="Select">
        <span>
          <input class="fsa-radio fsa-radio--solo" data-behavior="select-one-table-row" id="commodities__select-row--02" type="radio" name="commodities__select-row" value="02" checked>
          <label for="commodities__select-row--02"><span class="sr-only">Select this row</span></label>
        </span>
      </td>
      <td>Canola $/Cwt.</td>
      <td class="fsa-text-align--right">8.94</td>
      <td class="fsa-text-align--right">15.99</td>
      <td class="fsa-text-align--right">15.89</td>
      <td class="fsa-text-align--right">0.00</td>
    </tr>
  </tbody>
</table>

Usage

Use

  • When users may only choose a single option out of a set of mutually exclusive choices.
  • If the number of available options can fit onto a mobile screen.
  • In place of select element if there are few enough options (e.g. <=7) and the design can support it.

Don’t Use

  • Consider checkbox if users may have the option to select more than one.
  • Consider a select if you don’t have enough space to list out all available options.
  • If users should be able to select zero of the options; radio elements are not “uncheckable.” A checkbox may be warranted.
  • If there are too many options to display on a single view; consider a Select instead.
UX Pattern
Action Bar with Table
Complement a data table with actions and pagination.
UI Component
Form Fields
Data entry from a variety of structured form controls.
UI Component
Select Multi
Make one or more selections from structured scrollable list of otpions.

Accessibility

Always refer to the Accessibility Forms Guide for overall guidance.

If you customize a radio button, ensure they continue to meet the the accessibility requirements that apply to all form controls.

  • Group related radio buttons together with <fieldset> and describe the group with <legend>.
  • Each radio button should have a <label>. Associate the two by matching the <label>’s for attribute to the <input>’s id attribute.

General guidance

  • Users should be able to tap on or click on either the text <label> or the radio element itself to selectan option.
  • Options that are listed vertically are easier to read than those listed horizontally. Horizontal listings can make it difficult to tell which label pertains to which radio button.
  • Make sure selections are adequately spaced for touch screens.
  • Use caution if you decide to set a default value as they cannot be unchecked. 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.
Return to top