Checkbox Component

Default Checkbox

Use the checkbox base class to create a checkbox.

NOTE: Skin uses SVG to give a custom checkbox appearance. This SVG is hidden by default to prevent it from appearing alongside the browser default checkbox in a non-CSS state.

<span class="checkbox">
  <input class="checkbox__control" type="checkbox" checked />
  <span class="checkbox__icon" hidden>
    <svg class="checkbox__unchecked" height="18" width="18" aria-hidden="true">
      <use href="#icon-checkbox-unchecked-18" />
    </svg>
    <svg class="checkbox__checked" height="18" width="18" aria-hidden="true">
      <use href="#icon-checkbox-checked-18" />
    </svg>
  </span>
</span>

Mixed Checkbox

For a mixed checkbox, that is partially checked, or indeterminate, apply the aria-checked="mixed" state and use icon-checkbox-mixed-18 .

NOTE : JavaScript is required to toggle the aria-checked state.

<span class="checkbox">
  <input
    aria-checked="mixed"
    class="checkbox__control"
    type="checkbox"
    checked
  />
  <span class="checkbox__icon" hidden>
    <svg class="checkbox__unchecked" height="18" width="18" aria-hidden="true">
      <use href="#icon-checkbox-unchecked-18" />
    </svg>
    <svg class="checkbox__checked" height="18" width="18" aria-hidden="true">
      <use href="#icon-checkbox-mixed-18" />
    </svg>
  </span>
</span>

Large Checkbox

For a larger checkbox, use the checkbox--large modifier plus the #icon-checkbox-unchecked-24 , #icon-checkbox-checked-24 and #icon-checkbox-unchecked-24 icons.

<span class="checkbox checkbox--large">
  <input class="checkbox__control" type="checkbox" checked />
  <span class="checkbox__icon" hidden>
    <svg class="checkbox__unchecked" height="24" width="24" aria-hidden="true">
      <use href="#icon-checkbox-unchecked-24" />
    </svg>
    <svg class="checkbox__checked" height="24" width="24" aria-hidden="true">
      <use href="#icon-checkbox-checked-24" />
    </svg>
  </span>
</span>

Disabled Checkbox

Use the disabled attribute to disable any checkbox input.

<span class="checkbox">
  <input class="checkbox__control" type="checkbox" checked disabled />
  <span class="checkbox__icon" hidden>
    <svg class="checkbox__unchecked" height="18" width="18" aria-hidden="true">
      <use href="#icon-checkbox-unchecked-18" />
    </svg>
    <svg class="checkbox__checked" height="18" width="18" aria-hidden="true">
      <use href="#icon-checkbox-checked-18" />
    </svg>
  </span>
</span>

Grouped Checkboxes

A group of checkboxes allows multi-select (unlike a group of radio buttons which enforces single-select).

A fieldset and legend are required in order to create the correct grouping semantics. Note that the Skin global module removes the default fieldset border and padding.

The following example uses the field module for simple layout of checkbox fields and labels.

<fieldset>
  <legend>Choose an Option</legend>
  <span class="field">
    <span class="checkbox field__control">
      <input
        class="checkbox__control"
        id="group-checkbox-1"
        type="checkbox"
        value="1"
        name="checkbox-group"
        checked
      />
      <span class="checkbox__icon" hidden>
        <svg
          class="checkbox__unchecked"
          height="18"
          width="18"
          aria-hidden="true"
        >
          <use href="#icon-checkbox-unchecked-18" />
        </svg>
        <svg
          class="checkbox__checked"
          height="18"
          width="18"
          aria-hidden="true"
        >
          <use href="#icon-checkbox-checked-18" />
        </svg>
      </span>
    </span>
    <label class="field__label field__label--end" for="group-checkbox-1">
      Option 1
    </label>
  </span>
  <span class="field">
    <span class="checkbox field__control">
      <input
        class="checkbox__control"
        id="group-checkbox-2"
        type="checkbox"
        value="2"
        name="checkbox-group"
      />
      <span class="checkbox__icon" hidden>
        <svg
          class="checkbox__unchecked"
          height="18"
          width="18"
          aria-hidden="true"
        >
          <use href="#icon-checkbox-unchecked-18" />
        </svg>
        <svg
          class="checkbox__checked"
          height="18"
          width="18"
          aria-hidden="true"
        >
          <use href="#icon-checkbox-checked-18" />
        </svg>
      </span>
    </span>
    <label class="field__label field__label--end" for="group-checkbox-2">
      Option 2
    </label>
  </span>
  <span class="field">
    <span class="checkbox field__control">
      <input
        class="checkbox__control"
        id="group-checkbox-3"
        type="checkbox"
        value="3"
        name="checkbox-group"
      />
      <span class="checkbox__icon" hidden>
        <svg
          class="checkbox__unchecked"
          height="18"
          width="18"
          aria-hidden="true"
        >
          <use href="#icon-checkbox-unchecked-18" />
        </svg>
        <svg
          class="checkbox__checked"
          height="18"
          width="18"
          aria-hidden="true"
        >
          <use href="#icon-checkbox-checked-18" />
        </svg>
      </span>
    </span>
    <label class="field__label field__label--end" for="group-checkbox-3">
      Option 3
    </label>
  </span>
</fieldset>

TIP : For large checkboxes, wrap each label and control inside of a field__group element to maintain vertical alignment.

To stack checkboxes vertically instead of side-by-side, simply replace the span wrapper with a div wrapper.

<fieldset>
  <legend>Choose an Option</legend>
  <div class="field">
    <span class="checkbox field__control">
      <input
        class="checkbox__control"
        id="group-checkbox-4"
        type="checkbox"
        value="1"
        name="checkbox-group"
        checked
      />
      <span class="checkbox__icon" hidden>
        <svg
          class="checkbox__unchecked"
          height="18"
          width="18"
          aria-hidden="true"
        >
          <use href="#icon-checkbox-unchecked-18" />
        </svg>
        <svg
          class="checkbox__checked"
          height="18"
          width="18"
          aria-hidden="true"
        >
          <use href="#icon-checkbox-checked-18" />
        </svg>
      </span>
    </span>
    <label class="field__label field__label--end" for="group-checkbox-4">
      Option 1
    </label>
  </div>
  <div class="field">
    <span class="checkbox field__control">
      <input
        class="checkbox__control"
        id="group-checkbox-5"
        type="checkbox"
        value="2"
        name="checkbox-group"
      />
      <span class="checkbox__icon" hidden>
        <svg
          class="checkbox__unchecked"
          height="18"
          width="18"
          aria-hidden="true"
        >
          <use href="#icon-checkbox-unchecked-18" />
        </svg>
        <svg
          class="checkbox__checked"
          height="18"
          width="18"
          aria-hidden="true"
        >
          <use href="#icon-checkbox-checked-18" />
        </svg>
      </span>
    </span>
    <label class="field__label field__label--end" for="group-checkbox-5">
      Option 2
    </label>
  </div>
  <div class="field">
    <span class="checkbox field__control">
      <input
        class="checkbox__control"
        id="group-checkbox-6"
        type="checkbox"
        value="3"
        name="checkbox-group"
      />
      <span class="checkbox__icon" hidden>
        <svg
          class="checkbox__unchecked"
          height="18"
          width="18"
          aria-hidden="true"
        >
          <use href="#icon-checkbox-unchecked-18" />
        </svg>
        <svg
          class="checkbox__checked"
          height="18"
          width="18"
          aria-hidden="true"
        >
          <use href="#icon-checkbox-checked-18" />
        </svg>
      </span>
    </span>
    <label class="field__label field__label--end" for="group-checkbox-6">
      Option 3
    </label>
  </div>
</fieldset>