Checboxes are used to select one or several options in a list.
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.
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>
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>