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-formGroup for easy stacking.

<div class="m-formGroup">
  <input type="checkbox" class="a-input" id="checkbox1">
  <label for="checkbox1"></label>
  <label class="-text" for="checkbox1">Checkbox</label>
</div>
<div class="m-formGroup">
  <input type="checkbox" class="a-input" id="checkbox2" disabled>
  <label for="checkbox2"></label>
  <label class="-text" for="checkbox2">Disabled Checkbox</label>
</div>

Inline

Apply the class -inline to m-formGroup to display checkboxes inline.

<div class="m-formGroup -inline">
  <input type="checkbox" class="a-input" id="inlineCheckbox1">
  <label for="inlineCheckbox1"></label>
  <label class="-text" for="inlineCheckbox1">Option 1</label>
</div>
<div class="m-formGroup -inline">
  <input type="checkbox" class="a-input" id="inlineCheckbox2">
  <label for="inlineCheckbox2"></label>
  <label class="-text" for="inlineCheckbox2">Option 2</label>
</div>

Checkbox List

Checkbox lists are used to wrap a series of checkbox in a list.

Examples

To render a series of checkboxes in a list, apply the class -list to m-formGroup.

Select an option
<h5>Select an option</h5>
<ul class="m-formGroup -list">
  <li class="m-formGroup">
    <input type="checkbox" class="a-input" id="checkbox1">
    <label for="checkbox1"></label>
    <label class="-text" for="checkbox1">Option 1</label>
  </li>
  <li class="m-formGroup">
    <input type="checkbox" class="a-input" id="checkbox2">
    <label for="checkbox2"></label>
    <label class="-text" for="checkbox2">Option 2</label>
  </li>
  <li class="m-formGroup">
    <input type="checkbox" class="a-input" id="checkbox3">
    <label for="checkbox3"></label>
    <label class="-text" for="checkbox3">Option 3</label>
  </li>
  <li class="m-formGroup">
    <input type="checkbox" class="a-input" id="checkbox4">
    <label for="checkbox4"></label>
    <label class="-text" for="checkbox4">Option 4</label>
  </li>
  <li class="m-formGroup">
    <input type="checkbox" class="a-input" id="checkbox5">
    <label for="checkbox5"></label>
    <label class="-text" for="checkbox5">Option 5</label>
  </li>
</ul>