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

I Agree

Standalone

Use this component as a 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 l-margin-top--medium on the input to create 16px of space between the container and the previous component.

<div class="c-checkbox__container">
  <div>
    <input class="c-checkbox__input" type="checkbox" id="checkbox3" />
    <label class="c-checkbox" for="checkbox3">
      I Agree
      <span class="c-checkbox__checkmark">
        <svg
          class="c-checkbox__checkmark-icon"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 32 32"
          fill="#fff"
        >
          <path d="M27 4l-15 15-7-7-5 5 12 12 20-20z"></path>
        </svg>
      </span>
    </label>
  </div>
</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.


  <div class="c-checkbox-group">
  <div class="c-checkbox__container">
    <input class="c-checkbox__input" type="checkbox" id="checkbox5" />
    <label class="c-checkbox" for="checkbox5">
      No
      <span class="c-checkbox__checkmark">
        <svg
          class="c-checkbox__checkmark-icon"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 32 32"
          fill="#fff"
        >
          <path d="M27 4l-15 15-7-7-5 5 12 12 20-20z" />
        </svg>
      </span>
    </label>
  </div>
  <div class="c-checkbox__container">
    <input class="c-checkbox__input" type="checkbox" id="checkbox6" />
    <label class="c-checkbox" for="checkbox6">
      Yes
      <span class="c-checkbox__checkmark">
        <svg
          class="c-checkbox__checkmark-icon"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 32 32"
          fill="#fff"
        >
          <path d="M27 4l-15 15-7-7-5 5 12 12 20-20z" />
        </svg>
      </span>
    </label>
  </div>
  <div class="c-checkbox__container">
    <input class="c-checkbox__input" type="checkbox" id="checkbox7" />
    <label class="c-checkbox" for="checkbox7">
      Maybe
      <span class="c-checkbox__checkmark">
        <svg
          class="c-checkbox__checkmark-icon"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 32 32"
          fill="#fff"
        >
          <path d="M27 4l-15 15-7-7-5 5 12 12 20-20z" />
        </svg>
      </span>
    </label>
  </div>
</div>

Copy

States

I Agree

You must agree to our Terms of Use.

Option 1

Option 2

Option 3

You must choose at least two options.

In addition to the default state, every checkbox option has a hover state, a focus state, a checked state and an error state. In a list, the error state affects the entire list container. Use the c-checkbox__container--error class to apply the error state to a standalone checkbox and c-checbox-group--error class to apply the error to a checkbox group. The error state must be used with an input error component to guide the user in correcting the error.

<div class="c-checkbox-group c-checkbox-group--error">
<div class="c-checkbox__container">
  <input class="c-checkbox__input" type="checkbox" id="checkbox5" />
  <label class="c-checkbox" for="checkbox5">
    Option 1
    <span class="c-checkbox__checkmark">
      <svg
        class="c-checkbox__checkmark-icon"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 32 32"
        fill="#fff"
      >
        <path d="M27 4l-15 15-7-7-5 5 12 12 20-20z" />
      </svg>
    </span>
  </label>
</div>
<div class="c-checkbox__container">
  <input class="c-checkbox__input" type="checkbox" id="checkbox6" />
  <label class="c-checkbox" for="checkbox6">
    Option 2
    <span class="c-checkbox__checkmark">
      <svg
        class="c-checkbox__checkmark-icon"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 32 32"
        fill="#fff"
      >
        <path d="M27 4l-15 15-7-7-5 5 12 12 20-20z" />
      </svg>
    </span>
  </label>
</div>
<div class="c-checkbox__container">
  <input class="c-checkbox__input" type="checkbox" id="checkbox7" />
  <label class="c-checkbox" for="checkbox7">
    Option 3
    <span class="c-checkbox__checkmark">
      <svg
        class="c-checkbox__checkmark-icon"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 32 32"
        fill="#fff"
      >
        <path d="M27 4l-15 15-7-7-5 5 12 12 20-20z" />
      </svg>
    </span>
  </label>
</div>
</div>
<span class="c-inline-error">
<i class="icon icon--error c-inline-error__icon"></i>
<span class="c-inline-error__content">
  You must choose at least two options.
</span>
</span>

Copy