Checkbox

Checkboxes allow users to select one or more options from a visible list.

Historical figures 1
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-sr-only">Historical figures 1</legend>
    <div class="usa-checkbox">
      <input class="usa-checkbox__input" id="truth" type="checkbox" name="historical-figures-1" value="truth" checked>
      <label class="usa-checkbox__label" for="truth">Sojourner Truth</label>
    </div>
    <div class="usa-checkbox">
      <input class="usa-checkbox__input" id="douglass" type="checkbox" name="historical-figures-1" value="douglass">
      <label class="usa-checkbox__label" for="douglass">Frederick Douglass</label>
    </div>
    <div class="usa-checkbox">
      <input class="usa-checkbox__input" id="washington" type="checkbox" name="historical-figures-1" value="washington">
      <label class="usa-checkbox__label" for="washington">Booker T. Washington</label>
    </div>
    <div class="usa-checkbox">
      <input class="usa-checkbox__input" id="carver" type="checkbox" name="historical-figures-1" disabled>
      <label class="usa-checkbox__label" for="carver">George Washington Carver</label>
    </div>
  </fieldset>
</form>

When to use the checkbox component

  • Multi-select. When a user can select any number of choices from a set list.
  • Toggles. When a user needs to choose “yes” or “no” on only one option (use a stand-alone checkbox). For example, to toggle a setting on or off.
  • Visibility of options. When users need to see all the available options at a glance.

When to consider something different

  • Too many options. If there are too many options to display on a mobile screen.
  • Single-select only. If a user can only select one option from a list (use radio buttons instead).

Usability guidelines

  • Make the label selectable. Users should be able to tap on or click on either the text label or the checkbox to select or deselect an option.
  • List options vertically. Horizontal listings can make it difficult to tell which label pertains to which checkbox.
  • Use positive statements. Negative language in labels can be counterintuitive. For example, use “I want to receive a promotional email” instead of “I don’t want to receive promotional email.”
  • Use adequate touch targets. If you customize, make sure selections are adequately spaced for touch screens.

Accessibility

  • Customize accessibly. If you customize the text inputs, ensure they continue to meet the the accessibility requirements that apply to all form controls.
  • Use a fieldset and legend for a checkbox group. Surround a related set of checkboxes with a <fieldset>. The <legend> provides context for the grouping. Do not use fieldset and legend for a single check.
  • These custom checkboxes are accessible. The custom checkboxes here are accessible to screen readers because the default checkboxes are moved off-screen with position: absolute; left: -999em.
  • Use semantic ids. Each input should have a semantic id attribute, and its corresponding label should have the same value in it’s for attribute.
  • The title attribute can replace <label>.

Package information

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