Checkbox

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

Default

Component Preview

Select any historical figure

Sojourner Truth

Frederick Douglass

Booker T. Washington

George Washington Carver

Component Code


<fieldset class="usa-fieldset">
  <legend class="usa-legend">Select any historical figure</legend>
  <div class="usa-checkbox">
    <input
      class="usa-checkbox__input"
      id="check-historical-truth"
      type="checkbox"
      name="historical-figures"
      value="sojourner-truth"
      checked="checked"
    />
    <label class="usa-checkbox__label" for="check-historical-truth">
      Sojourner Truth
    </label>
  </div>
  <div class="usa-checkbox">
    <input
      class="usa-checkbox__input"
      id="check-historical-douglass"
      type="checkbox"
      name="historical-figures"
      value="frederick-douglass"
    />
    <label class="usa-checkbox__label" for="check-historical-douglass">
      Frederick Douglass
    </label>
  </div>
  <div class="usa-checkbox">
    <input
      class="usa-checkbox__input"
      id="check-historical-washington"
      type="checkbox"
      name="historical-figures"
      value="booker-t-washington"
    />
    <label class="usa-checkbox__label" for="check-historical-washington">
      Booker T. Washington
    </label>
  </div>
  <div class="usa-checkbox">
    <input
      class="usa-checkbox__input"
      id="check-historical-carver"
      type="checkbox"
      name="historical-figures"
      value="george-washington-carver"
      disabled="disabled"
    />
    <label class="usa-checkbox__label" for="check-historical-carver">
      George Washington Carver
    </label>
  </div>
</fieldset>

Tile

Component Preview

Component Code


<form class="usa-form">
  <fieldset class="usa-fieldset">
    <legend class="usa-legend">Select any historical figure</legend>
    <div class="usa-checkbox">
      <input
        class="usa-checkbox__input usa-checkbox__input--tile"
        id="check-historical-truth-2"
        type="checkbox"
        name="historical-figures-2"
        value="sojourner-truth"
        checked="checked"
      />
      <label class="usa-checkbox__label" for="check-historical-truth-2">
        Sojourner Truth
        <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-checkbox">
      <input
        class="usa-checkbox__input usa-checkbox__input--tile"
        id="check-historical-douglass-2"
        type="checkbox"
        name="historical-figures-2"
        value="frederick-douglass"
      />
      <label class="usa-checkbox__label" for="check-historical-douglass-2">
        Frederick Douglass
      </label>
    </div>
    <div class="usa-checkbox">
      <input
        class="usa-checkbox__input usa-checkbox__input--tile"
        id="check-historical-washington-2"
        type="checkbox"
        name="historical-figures-2"
        value="booker-t-washington"
      />
      <label class="usa-checkbox__label" for="check-historical-washington-2">
        Booker T. Washington
      </label>
    </div>
    <div class="usa-checkbox">
      <input
        class="usa-checkbox__input usa-checkbox__input--tile"
        id="check-historical-carver-2"
        type="checkbox"
        name="historical-figures-2"
        value="george-washington-carver"
        disabled="disabled"
      />
      <label class="usa-checkbox__label" for="check-historical-carver-2">
        George Washington Carver
      </label>
    </div>
  </fieldset>
</form>

Guidance

When to use the checkbox component

To display multiple answers.: When a user can select any number of choices from a list.
To allow users to toggle answers.: When a user needs to acknowledge acceptance of something (like terms of service) or switch between two opposite states, such as unchecked = "no" and checked = "yes."

When to consider something else

Single-select only.: If a user can only select one option from a list of many, use radio buttons instead.

Usability guidance

Make the label selectable.: Users should be able to select 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 a promotional email."
Use logical labels.: Make sure that the label makes both states — checked and unchecked — clear to the user. If that's not possible, consider using a radio button with two individual options instead.
Use adequate touch targets.: Make sure selections are adequately spaced for touch screens. Consider using the tile variant for larger touch targets.
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.

Accessibility guidance

Customize form controls accessibly.: If you customize this component, ensure that it continues to meet 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. Don't 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 tags.: Each input should have a semantic tag for the id attribute, and its corresponding label should have the same value in its for attribute.

USWDS Documentation

For more guidance, view the USWDS Checkbox Component Documentation.

Settings

Variable	Description
`$theme-checkbox-border-radius`	Checkbox border radius for rounded corners.
`$theme-input-background-color`	Background color for radio and checkbox inputs.
`$theme-input-tile-border-radius`	Tile border radius for rounded corners.
`$theme-input-tile-border-width`	Tile border thickness.

Variants

Variant	Description
`.usa-checkbox__input--tile`	Displays checkbox as a larger tile with optional description text.