Selection Controls

Selection Controls allow users to complete tasks that involve making choices, or switching settings on or off.

Selection controls are found on screens that ask users to make decisions or declare preferences such as settings or dialogs.

Two types of selection controls are covered in this section:

Radio Buttons allow the selection of a single option from a set.
Checkboxes allow the selection of multiple options from a set.

Radio Buttons

Radio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a drop-down menu because it uses less space.

Radio buttons should have the most commonly used option selected by default.

<form class="u-grid-container u-grid-justify--center">
  <div class="u-grid-item u-xs-auto">
    <div class="u-form-control u-form-control--inline">
      <span class="u-radio">
        <input id="standard-radio1" name="standard-radios" type="radio" class="u-radio__input" />
        <span class="u-radio__control">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
            <circle cx="50" cy="50" r="50"/>
          </svg>
        </span>
      </span>
      <label class="u-form-label" for="standard-radio1">Female</label>
    </div>
    <div class="u-form-control u-form-control--inline">
      <span class="u-radio">
        <input id="standard-radio2" name="standard-radios" type="radio" class="u-radio__input" />
        <span class="u-radio__control">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
            <circle cx="50" cy="50" r="50"/>
          </svg>
        </span>
      </span>
      <label class="u-form-label" for="standard-radio2">Male</label>
    </div>
    <div class="u-form-control u-form-control--inline">
      <span class="u-radio">
        <input id="standard-radio3" name="standard-radios" type="radio" class="u-radio__input" />
        <span class="u-radio__control">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
            <circle cx="50" cy="50" r="50"/>
          </svg>
        </span>
      </span>
      <label class="u-form-label" for="standard-radio3">Other</label>
    </div>
    <div class="u-form-control u-form-control--inline">
      <span class="u-radio">
        <input
          id="standard-radio4"
          name="standard-radios"
          type="radio"
          class="u-radio__input"
          disabled
        />
        <span class="u-radio__control">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
            <circle cx="50" cy="50" r="50"/>
          </svg>
        </span>
      </span>
      <label class="u-form-label u-form-label--disabled" for="standard-radio4"
        >(Disabled Option)</label
      >
    </div>
  </div>
</form>

<form class="u-grid-container u-grid-justify--center">
  <div class="u-grid-item u-xs-auto">
    <div class="u-form-control u-form-control--inline">
      <span class="u-radio">
        <input id="standard-radio1" name="standard-radios" type="radio" class="u-radio__input" />
        <span class="u-radio__control">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
            <circle cx="50" cy="50" r="50"/>
          </svg>
        </span>
      </span>
      <label class="u-form-label" for="standard-radio1">Female</label>
    </div>
    <div class="u-form-control u-form-control--inline">
      <span class="u-radio">
        <input id="standard-radio2" name="standard-radios" type="radio" class="u-radio__input" />
        <span class="u-radio__control">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
            <circle cx="50" cy="50" r="50"/>
          </svg>
        </span>
      </span>
      <label class="u-form-label" for="standard-radio2">Male</label>
    </div>
    <div class="u-form-control u-form-control--inline">
      <span class="u-radio">
        <input id="standard-radio3" name="standard-radios" type="radio" class="u-radio__input" />
        <span class="u-radio__control">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
            <circle cx="50" cy="50" r="50"/>
          </svg>
        </span>
      </span>
      <label class="u-form-label" for="standard-radio3">Other</label>
    </div>
    <div class="u-form-control u-form-control--inline">
      <span class="u-radio">
        <input
          id="standard-radio4"
          name="standard-radios"
          type="radio"
          class="u-radio__input"
          disabled
        />
        <span class="u-radio__control">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
            <circle cx="50" cy="50" r="50"/>
          </svg>
        </span>
      </span>
      <label class="u-form-label u-form-label--disabled" for="standard-radio4"
        >(Disabled Option)</label
      >
    </div>
  </div>
</form>

Checkboxes

Checkboxes give users the ability to input a choice between options and may be used:

When the setting applied by the user should be confirmed and reviewed before the selection is applied.
When multiple options are available and one or more options can be selected.
To provide a better experience when selecting related items from a list.
To give a clear distinction between the selected and unselected states.
When there is a list of related items to select from.
A single yes/no choice is provided.

<form class="u-grid-container u-grid-justify--center">
  <div class="u-grid-item u-xs-auto">
    <div class="u-form-control u-form-control--inline">
      <span class="u-checkbox">
        <input id="standard-checkbox1" type="checkbox" class="u-checkbox__input" />
        <span class="u-checkbox__control">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <path fill="none" stroke-width="3px" d="M1.73,12.91 8.1,19.28 22.79,4.59"></path>
          </svg>
        </span>
      </span>
      <label class="u-form-label" for="standard-checkbox1">Checkbox 1</label>
    </div>
    <div class="u-form-control u-form-control--inline">
      <span class="u-checkbox">
        <input id="standard-checkbox2" type="checkbox" class="u-checkbox__input" />
        <span class="u-checkbox__control">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <path fill="none" stroke-width="3px" d="M1.73,12.91 8.1,19.28 22.79,4.59"></path>
          </svg>
        </span>
      </span>
      <label class="u-form-label" for="standard-checkbox2">Checkbox 2</label>
    </div>
    <div class="u-form-control u-form-control--inline">
      <span class="u-checkbox">
        <input id="standard-checkbox3" type="checkbox" class="u-checkbox__input" disabled checked />
        <span class="u-checkbox__control">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <path fill="none" stroke-width="3px" d="M1.73,12.91 8.1,19.28 22.79,4.59"></path>
          </svg>
        </span>
      </span>
      <label class="u-form-label u-form-label--disabled" for="standard-checkbox3"
        >(Disabled Option)</label
      >
    </div>
  </div>
</form>

<form class="u-grid-container u-grid-justify--center">
  <div class="u-grid-item u-xs-auto">
    <div class="u-form-control u-form-control--inline">
      <span class="u-checkbox">
        <input id="standard-checkbox1" type="checkbox" class="u-checkbox__input" />
        <span class="u-checkbox__control">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <path fill="none" stroke-width="3px" d="M1.73,12.91 8.1,19.28 22.79,4.59"></path>
          </svg>
        </span>
      </span>
      <label class="u-form-label" for="standard-checkbox1">Checkbox 1</label>
    </div>
    <div class="u-form-control u-form-control--inline">
      <span class="u-checkbox">
        <input id="standard-checkbox2" type="checkbox" class="u-checkbox__input" />
        <span class="u-checkbox__control">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <path fill="none" stroke-width="3px" d="M1.73,12.91 8.1,19.28 22.79,4.59"></path>
          </svg>
        </span>
      </span>
      <label class="u-form-label" for="standard-checkbox2">Checkbox 2</label>
    </div>
    <div class="u-form-control u-form-control--inline">
      <span class="u-checkbox">
        <input id="standard-checkbox3" type="checkbox" class="u-checkbox__input" disabled checked />
        <span class="u-checkbox__control">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <path fill="none" stroke-width="3px" d="M1.73,12.91 8.1,19.28 22.79,4.59"></path>
          </svg>
        </span>
      </span>
      <label class="u-form-label u-form-label--disabled" for="standard-checkbox3"
        >(Disabled Option)</label
      >
    </div>
  </div>
</form>

Fieldsets, Legends, and Helper Text

When a fieldset with a legend is required, take note of the following classes to apply, and placement of the helper text for descriptions.

<form class="u-grid-container u-grid-justify--center">
  <div class="u-grid-item u-xs-auto">
    <fieldset class="u-form-control">
      <legend class="u-form-label">Gender:</legend>
      <div class="u-form-control u-form-control--inline">
        <span class="u-radio">
          <input id="fieldset-radio1" name="fieldset-radios" type="radio" class="u-radio__input" />
          <span class="u-radio__control">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
              <circle cx="50" cy="50" r="50"/>
            </svg>
          </span>
        </span>
        <label class="u-form-label" for="fieldset-radio1">Female</label>
      </div>
      <div class="u-form-control u-form-control--inline">
        <span class="u-radio">
          <input id="fieldset-radio2" name="fieldset-radios" type="radio" class="u-radio__input" />
          <span class="u-radio__control">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
              <circle cx="50" cy="50" r="50"/>
            </svg>
          </span>
        </span>
        <label class="u-form-label" for="fieldset-radio2">Male</label>
      </div>
      <div class="u-form-control u-form-control--inline">
        <span class="u-radio">
          <input id="fieldset-radio3" name="fieldset-radios" type="radio" class="u-radio__input" />
          <span class="u-radio__control">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
              <circle cx="50" cy="50" r="50"/>
            </svg>
          </span>
        </span>
        <label class="u-form-label" for="fieldset-radio3">Other</label>
      </div>
      <div class="u-form-control u-form-control--inline">
        <span class="u-radio">
          <input
            id="fieldset-radio4"
            name="fieldset-radios"
            type="radio"
            class="u-radio__input"
            disabled
          />
          <span class="u-radio__control">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
              <circle cx="50" cy="50" r="50"/>
            </svg>
          </span>
        </span>
        <label class="u-form-label u-form-label--disabled" for="fieldset-radio4"
          >(Disabled Option)</label
        >
      </div>
      <p class="u-form-helpertext">These are radios.</p>
    </fieldset>
    <fieldset class="u-form-control">
      <legend class="u-form-label">Pick two:</legend>
      <div class="u-form-control u-form-control--inline">
        <span class="u-checkbox">
          <input id="fieldset-checkbox1" type="checkbox" class="u-checkbox__input" />
          <span class="u-checkbox__control">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
              <path fill="none" stroke-width="3px" d="M1.73,12.91 8.1,19.28 22.79,4.59"></path>
            </svg>
          </span>
        </span>
        <label class="u-form-label" for="fieldset-checkbox1">Gilad Gray</label>
      </div>
      <div class="u-form-control u-form-control--inline">
        <span class="u-checkbox">
          <input id="fieldset-checkbox2" type="checkbox" class="u-checkbox__input" />
          <span class="u-checkbox__control">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
              <path fill="none" stroke-width="3px" d="M1.73,12.91 8.1,19.28 22.79,4.59"></path>
            </svg>
          </span>
        </span>
        <label class="u-form-label" for="fieldset-checkbox2">Jason Killian</label>
      </div>
      <div class="u-form-control u-form-control--inline">
        <span class="u-checkbox">
          <input id="fieldset-checkbox3" type="checkbox" class="u-checkbox__input" />
          <span class="u-checkbox__control">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
              <path fill="none" stroke-width="3px" d="M1.73,12.91 8.1,19.28 22.79,4.59"></path>
            </svg>
          </span>
        </span>
        <label class="u-form-label" for="fieldset-checkbox3">Antoine Llorca</label>
      </div>
      <div class="u-form-control u-form-control--inline">
        <span class="u-checkbox">
          <input
            id="fieldset-checkbox4"
            type="checkbox"
            class="u-checkbox__input"
            disabled
            checked
          />
          <span class="u-checkbox__control">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
              <path fill="none" stroke-width="3px" d="M1.73,12.91 8.1,19.28 22.79,4.59"></path>
            </svg>
          </span>
        </span>
        <label class="u-form-label u-form-label--disabled" for="fieldset-checkbox4"
          >Checkbox Disabled</label
        >
      </div>
      <p class="u-form-helpertext">These are checkboxes.</p>
    </fieldset>
  </div>
</form>

<form class="u-grid-container u-grid-justify--center">
  <div class="u-grid-item u-xs-auto">
    <fieldset class="u-form-control">
      <legend class="u-form-label">Gender:</legend>
      <div class="u-form-control u-form-control--inline">
        <span class="u-radio">
          <input id="fieldset-radio1" name="fieldset-radios" type="radio" class="u-radio__input" />
          <span class="u-radio__control">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
              <circle cx="50" cy="50" r="50"/>
            </svg>
          </span>
        </span>
        <label class="u-form-label" for="fieldset-radio1">Female</label>
      </div>
      <div class="u-form-control u-form-control--inline">
        <span class="u-radio">
          <input id="fieldset-radio2" name="fieldset-radios" type="radio" class="u-radio__input" />
          <span class="u-radio__control">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
              <circle cx="50" cy="50" r="50"/>
            </svg>
          </span>
        </span>
        <label class="u-form-label" for="fieldset-radio2">Male</label>
      </div>
      <div class="u-form-control u-form-control--inline">
        <span class="u-radio">
          <input id="fieldset-radio3" name="fieldset-radios" type="radio" class="u-radio__input" />
          <span class="u-radio__control">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
              <circle cx="50" cy="50" r="50"/>
            </svg>
          </span>
        </span>
        <label class="u-form-label" for="fieldset-radio3">Other</label>
      </div>
      <div class="u-form-control u-form-control--inline">
        <span class="u-radio">
          <input
            id="fieldset-radio4"
            name="fieldset-radios"
            type="radio"
            class="u-radio__input"
            disabled
          />
          <span class="u-radio__control">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
              <circle cx="50" cy="50" r="50"/>
            </svg>
          </span>
        </span>
        <label class="u-form-label u-form-label--disabled" for="fieldset-radio4"
          >(Disabled Option)</label
        >
      </div>
      <p class="u-form-helpertext">These are radios.</p>
    </fieldset>
    <fieldset class="u-form-control">
      <legend class="u-form-label">Pick two:</legend>
      <div class="u-form-control u-form-control--inline">
        <span class="u-checkbox">
          <input id="fieldset-checkbox1" type="checkbox" class="u-checkbox__input" />
          <span class="u-checkbox__control">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
              <path fill="none" stroke-width="3px" d="M1.73,12.91 8.1,19.28 22.79,4.59"></path>
            </svg>
          </span>
        </span>
        <label class="u-form-label" for="fieldset-checkbox1">Gilad Gray</label>
      </div>
      <div class="u-form-control u-form-control--inline">
        <span class="u-checkbox">
          <input id="fieldset-checkbox2" type="checkbox" class="u-checkbox__input" />
          <span class="u-checkbox__control">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
              <path fill="none" stroke-width="3px" d="M1.73,12.91 8.1,19.28 22.79,4.59"></path>
            </svg>
          </span>
        </span>
        <label class="u-form-label" for="fieldset-checkbox2">Jason Killian</label>
      </div>
      <div class="u-form-control u-form-control--inline">
        <span class="u-checkbox">
          <input id="fieldset-checkbox3" type="checkbox" class="u-checkbox__input" />
          <span class="u-checkbox__control">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
              <path fill="none" stroke-width="3px" d="M1.73,12.91 8.1,19.28 22.79,4.59"></path>
            </svg>
          </span>
        </span>
        <label class="u-form-label" for="fieldset-checkbox3">Antoine Llorca</label>
      </div>
      <div class="u-form-control u-form-control--inline">
        <span class="u-checkbox">
          <input
            id="fieldset-checkbox4"
            type="checkbox"
            class="u-checkbox__input"
            disabled
            checked
          />
          <span class="u-checkbox__control">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
              <path fill="none" stroke-width="3px" d="M1.73,12.91 8.1,19.28 22.79,4.59"></path>
            </svg>
          </span>
        </span>
        <label class="u-form-label u-form-label--disabled" for="fieldset-checkbox4"
          >Checkbox Disabled</label
        >
      </div>
      <p class="u-form-helpertext">These are checkboxes.</p>
    </fieldset>
  </div>
</form>

Error States

To display field in an error state, add .u-form-control--invalid to the .u-form-control element (in the example, placed on the fieldset), and .u-form-helpertext--invalid to the helper text element (if in use).

Note: Implementation of validation logic is up to the application.

<form class="u-grid-container u-grid-justify--center">
  <div class="u-grid-item u-xs-auto">
    <fieldset class="u-form-control u-form-control--invalid">
      <legend class="u-form-label">Please select:</legend>
      <div class="u-form-control u-form-control--inline">
        <span class="u-radio">
          <input id="invalid-radio1" name="invalid-radios" type="radio" class="u-radio__input" />
          <span class="u-radio__control">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
              <circle cx="50" cy="50" r="50"/>
            </svg>
          </span>
        </span>
        <label class="u-form-label" for="invalid-radio1">Radio Invalid 1</label>
      </div>
      <div class="u-form-control u-form-control--inline">
        <span class="u-radio">
          <input id="invalid-radio2" name="invalid-radios" type="radio" class="u-radio__input" />
          <span class="u-radio__control">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
              <circle cx="50" cy="50" r="50"/>
            </svg>
          </span>
        </span>
        <label class="u-form-label" for="invalid-radio2">Radio Invalid 2</label>
      </div>
      <p class="u-form-helpertext u-form-helpertext--invalid">Oops!</p>
    </fieldset>
    <fieldset class="u-form-control u-form-control--invalid">
      <legend class="u-form-label">Please select:</legend>
      <div class="u-form-control u-form-control--inline">
        <span class="u-checkbox">
          <input id="invalid-checkbox1" type="checkbox" class="u-checkbox__input" />
          <span class="u-checkbox__control">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
              <path fill="none" stroke-width="3px" d="M1.73,12.91 8.1,19.28 22.79,4.59"></path>
            </svg>
          </span>
        </span>
        <label class="u-form-label" for="invalid-checkbox1">Checkbox Invalid 1</label>
      </div>
      <div class="u-form-control u-form-control--inline">
        <span class="u-checkbox">
          <input id="invalid-checkbox2" type="checkbox" class="u-checkbox__input" />
          <span class="u-checkbox__control">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
              <path fill="none" stroke-width="3px" d="M1.73,12.91 8.1,19.28 22.79,4.59"></path>
            </svg>
          </span>
        </span>
        <label class="u-form-label" for="invalid-checkbox2">Checkbox Invalid 2</label>
      </div>
      <p class="u-form-helpertext u-form-helpertext--invalid">Oops!</p>
    </fieldset>
  </div>
</form>

<form class="u-grid-container u-grid-justify--center">
  <div class="u-grid-item u-xs-auto">
    <fieldset class="u-form-control u-form-control--invalid">
      <legend class="u-form-label">Please select:</legend>
      <div class="u-form-control u-form-control--inline">
        <span class="u-radio">
          <input id="invalid-radio1" name="invalid-radios" type="radio" class="u-radio__input" />
          <span class="u-radio__control">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
              <circle cx="50" cy="50" r="50"/>
            </svg>
          </span>
        </span>
        <label class="u-form-label" for="invalid-radio1">Radio Invalid 1</label>
      </div>
      <div class="u-form-control u-form-control--inline">
        <span class="u-radio">
          <input id="invalid-radio2" name="invalid-radios" type="radio" class="u-radio__input" />
          <span class="u-radio__control">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
              <circle cx="50" cy="50" r="50"/>
            </svg>
          </span>
        </span>
        <label class="u-form-label" for="invalid-radio2">Radio Invalid 2</label>
      </div>
      <p class="u-form-helpertext u-form-helpertext--invalid">Oops!</p>
    </fieldset>
    <fieldset class="u-form-control u-form-control--invalid">
      <legend class="u-form-label">Please select:</legend>
      <div class="u-form-control u-form-control--inline">
        <span class="u-checkbox">
          <input id="invalid-checkbox1" type="checkbox" class="u-checkbox__input" />
          <span class="u-checkbox__control">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
              <path fill="none" stroke-width="3px" d="M1.73,12.91 8.1,19.28 22.79,4.59"></path>
            </svg>
          </span>
        </span>
        <label class="u-form-label" for="invalid-checkbox1">Checkbox Invalid 1</label>
      </div>
      <div class="u-form-control u-form-control--inline">
        <span class="u-checkbox">
          <input id="invalid-checkbox2" type="checkbox" class="u-checkbox__input" />
          <span class="u-checkbox__control">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
              <path fill="none" stroke-width="3px" d="M1.73,12.91 8.1,19.28 22.79,4.59"></path>
            </svg>
          </span>
        </span>
        <label class="u-form-label" for="invalid-checkbox2">Checkbox Invalid 2</label>
      </div>
      <p class="u-form-helpertext u-form-helpertext--invalid">Oops!</p>
    </fieldset>
  </div>
</form>

Selection Controls

Radio Buttons

Checkboxes

Fieldsets, Legends, and Helper Text

Error States

Properties

<Radio />

<Checkbox />

<FormControl />

<FormLabel />

<FormHelperText />