Design Kit

Checkbox

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

Examples

To render a checkbox, apply the class a-input to an input type="checkbox". For proper styling, checkboxes require an empty label element defined immediately after their declaration.

Stacked

Group checkboxes in m-form__item for easy stacking. Apply class -row to display checkbox and label inline.

<div class="m-form__item -row">
  <div class="a-checkbox">
    <input type="checkbox" class="a-checkbox__input" id="checkbox1">
    <label class="a-checkbox__label" for="checkbox1">Checkbox</label>
  </div>
</div>
<div class="m-form__item -row">
  <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>

Inline

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

<div class="m-form__item -row -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 -row -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>

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 an option
<legend class="a-label">Select an option</legend>
<ul class="m-form__item -list">
  <li class="m-form__item -row">
    <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 -row">
    <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 -row">
    <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 -row">
    <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 -row">
    <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>