Checkboxes

Use checkboxes when seeking yes or no answers or when users can select multiple options.

The for attribute is required to bind a custom checkbox to the input. Make sure the input’s id matches the for attribute in the label.

Default

<fieldset>
  <div class="input input--checkbox">
    <span>
      <input type="checkbox" tabindex="" name="checkbox1" id="checkbox1" checked>
      <label for="checkbox1">Checkbox 1</label>
    </span>

    <span>
      <input type="checkbox" tabindex="" name="checkbox2" id="checkbox2">
      <label for="checkbox2">Checkbox 2</label>
    </span>
  </div>
  <p class="message">Sorry looks like you choose poorly.</p>
</fieldset>

Disabled Checkbox

To disable checkboxes, wrap them inside a <fieldset disabled> element. Disabled checkboxes cannot be interacted with.

<fieldset disabled>
  <div class="input input--checkbox">
    <span>
      <input type="checkbox" tabindex="" name="checkbox1" id="checkbox1" checked>
      <label for="checkbox1">Checkbox 1</label>
    </span>

    <span>
      <input type="checkbox" tabindex="" name="checkbox2" id="checkbox2">
      <label for="checkbox2">Checkbox 2</label>
    </span>
  </div>
  <p class="message">Sorry looks like you choose poorly.</p>
</fieldset>

Invalid Checkbox

To highlight invalid selections, add the .invalid class to the fieldset.

<fieldset class="invalid">
  <div class="input input--checkbox">
    <span>
      <input type="checkbox" tabindex="" name="checkbox1" id="checkbox1" checked>
      <label for="checkbox1">Checkbox 1</label>
    </span>

    <span>
      <input type="checkbox" tabindex="" name="checkbox2" id="checkbox2">
      <label for="checkbox2">Checkbox 2</label>
    </span>
  </div>
  <p class="message">Sorry looks like you choose poorly.</p>
</fieldset>