Checkbox

A checkbox is a type of input that can be used in one of two ways. As a standalone option it allows the user to visually record a yes/no response. In a form list, it allows the user to select multiple options for a single prompt. To restrict the user to selecting only one option, use the Radio component.

Variants

Option 1

Standard

The standard checkbox component includes the checkbox in put and a text label. In addition to the default state, every checkbox option has a hover state, a focus state, and a checked state. The error state takes the form of an Input Error component.

<div class="c-checkbox__container--no-container">
  <input
    class="c-checkbox__input"
    name="option"
    type="checkbox"
    id="option1"
  />
  <label class="c-checkbox" for="option1">
    Option 1
    <span class="c-checkbox__checkmark--no-container">
      <i class="c-checkbox__checkmark-icon icon icon--success"></i>
    </span>
  </label>
</div>

Copy

Option 1

Contained

In addition to the input and label, the contained checkbox variant has a stroke border. It has all the same states as the standard variant. The error state takes the form of an Input Error component.

<div class="c-checkbox__container">
  <input
    class="c-checkbox__input"
    name="container"
    type="checkbox"
    id="option1-container"
  />
  <label class="c-checkbox" for="option1-container">
    Option 1
    <span class="c-checkbox__checkmark">
      <i class="c-checkbox__checkmark-icon icon icon--success"></i>
    </span>
  </label>
</div>

Copy

Design Environment

I have read the above Terms and Conditions

Standalone

Use a single checkbox standalone when it will function as a yes/no response. Other components can be nested to appear within the container in the checked state. There should be a margin of 16px between the container and the previous component.

<div class="c-checkbox__container">
  <input
    class="c-checkbox__input"
    name="container"
    type="checkbox"
    id="option1-container"
  />
  <label class="c-checkbox" for="option1-container">
  I have read the above Terms and Conditions
    <span class="c-checkbox__checkmark">
      <i class="c-checkbox__checkmark-icon icon icon--success"></i>
    </span>
  </label>
</div>

Copy

Option 1

Option 2

Option 3

List

Use this component in a list when the user can choose more than one of multiple options. Options should be listed vertically with one checkbox per row. There should be a margin of 16px between all checkbox components.


  <div class="c-checkbox-group">
    <div class="c-checkbox__container">
      <input
        class="c-checkbox__input"
        name="container"
        type="checkbox"
        id="option1-group-container"
      />
      <label class="c-checkbox" for="option1-group-container">
        Option 1
        <span class="c-checkbox__checkmark">
          <i class="c-checkbox__checkmark-icon icon icon--success"></i>
        </span>
      </label>
    </div>
    <div class="c-checkbox__container">
      <input
        class="c-checkbox__input"
        name="container"
        type="checkbox"
        id="option2-group-container"
      />
      <label class="c-checkbox" for="option2-group-container">
        Option 2
        <span class="c-checkbox__checkmark">
          <i class="c-checkbox__checkmark-icon icon icon--success"></i>
        </span>
      </label>
    </div>
    <div class="c-checkbox__container">
      <input
        class="c-checkbox__input"
        name="container"
        type="checkbox"
        id="option3-group-container"
      />
      <label class="c-checkbox" for="option3-group-container">
        Option 3
        <span class="c-checkbox__checkmark">
          <i class="c-checkbox__checkmark-icon icon icon--success"></i>
        </span>
      </label>
    </div>
  </div>

Copy

Microcopy

Text labels for standalone checkboxes should be full sentences in the first person. Listed checkboxes can be full sentences or fragments. In a list, all options should use the same part of speech (e.g. all nouns or all verbs) rather than mixing. Use sentence case with no end punctuation, unless the text is a question.