Checkboxes

Checkboxes allow users to easily select one or more of several options.


<div class="Form__group g-1_2">
<label class="Form__label">Checkbox label</label>
<label class="Choice">
<input type="checkbox" name="check1" checked>
<span class="Choice__label">Example checkbox label</span>
</label>
<label class="Choice">
<input type="checkbox" name="check1">
<span class="Choice__label">Example checkbox label</span>
</label>
</div>

Checkboxes With Descriptions

<div class="Form__group">
<label class="Form__label">Checkbox label</label>
<label class="Choice">
<input type="checkbox" name="check1" checked>
<span class="Choice__label">Example checkbox label that is really long and probably wraps really awkwardly</span>
<span class="Choice__description">Help explain what this choice is in more text than should be necessary to see how text wraps</span>
</label>
<label class="Choice">
<input type="checkbox" name="check1">
<span class="Choice__label">Example checkbox label that is really long and probably wraps really awkwardly</span>
<span class="Choice__description">Help explain what this choice is in more text than should be necessary to see how text wraps</span>
</label>
</div>

Checkbox as a toggle

<div class="Toggle">
<input class="Toggle__input" type="checkbox" id="toggle" />
<label for="toggle" class="Toggle__label">
<span class="Toggle__description">
<span class="Toggle__checked">On</span>
<span class="Toggle__unchecked">Off</span>
</span>
<span class="Toggle__visible"></span>
</label>
</div>