Design Kit

Checkbox

Checboxes are used to select one or several options in a list.

Examples

Base

<div class="m-form__item">
  <div class="a-checkbox">
    <input type="checkbox" class="a-checkbox__input" id="checkbox1">
    <label class="a-checkbox__label" for="checkbox1">Checkbox</label>
  </div>
</div>

Disabled

<div class="m-form__item">
  <div class="a-checkbox">
    <input type="checkbox" class="a-checkbox__input" id="checkbox2" disabled>
    <label class="a-checkbox__label" for="checkbox2">Checkbox</label>
  </div>
</div>

Stacked

Group checkboxes in m-form__item for easy stacking.

Select options
<fieldset>
  <legend class="a-label">Select options</legend>
  <div class="m-form__item">
    <div class="a-checkbox">
      <input type="checkbox" class="a-checkbox__input" id="checkbox3">
      <label class="a-checkbox__label" for="checkbox3">Checkbox</label>
    </div>
  </div>
  <div class="m-form__item">
    <div class="a-checkbox">
      <input type="checkbox" class="a-checkbox__input" id="checkbox4">
      <label class="a-checkbox__label" for="checkbox4">Checkbox</label>
    </div>
  </div>
</fieldset>

Inline

Apply the class -inline to m-form__item to display two or more checkboxes in one row.

Select options
<fieldset>
  <legend class="a-label">Select options</legend>
  <div class="m-form__item -inline">
    <div class="a-checkbox">
      <input type="checkbox" class="a-checkbox__input" id="inlineCheckbox1">
      <label class="a-checkbox__label" for="inlineCheckbox1">Option 1</label>
    </div>
  </div>
  <div class="m-form__item -inline">
    <div class="a-checkbox">
      <input type="checkbox" class="a-checkbox__input" id="inlineCheckbox2">
      <label class="a-checkbox__label" for="inlineCheckbox2">Option 2</label>
    </div>
  </div>
</fieldset>

Checkbox List

Checkbox lists are used to wrap a series of checkboxes in a list. To render a series of checkboxes in a list, apply the class -list to m-form__item.

Select options
<fieldset>
  <legend class="a-label">Select options</legend>
  <ul class="m-form__item -list">
    <li class="m-form__item">
      <div class="a-checkbox">
        <input type="checkbox" class="a-checkbox__input" id="checkbox1">
        <label class="a-checkbox__label" for="checkbox1">Option 1</label>
      </div>
    </li>
    <li class="m-form__item">
      <div class="a-checkbox">
        <input type="checkbox" class="a-checkbox__input" id="checkbox2">
        <label class="a-checkbox__label" for="checkbox2">Option 2</label>
      </div>
    </li>
    <li class="m-form__item">
      <div class="a-checkbox">
        <input type="checkbox" class="a-checkbox__input" id="checkbox3">
        <label class="a-checkbox__label" for="checkbox3">Option 3</label>
      </div>
    </li>
    <li class="m-form__item">
      <div class="a-checkbox">
        <input type="checkbox" class="a-checkbox__input" id="checkbox4">
        <label class="a-checkbox__label" for="checkbox4">Option 4</label>
      </div>
    </li>
    <li class="m-form__item">
      <div class="a-checkbox">
        <input type="checkbox" class="a-checkbox__input" id="checkbox5">
        <label class="a-checkbox__label" for="checkbox5">Option 5</label>
      </div>
    </li>
  </ul>
</fieldset>