Checkboxes Checkboxes allow users to easily select one or more of several options. Checkbox label Example checkbox label Example checkbox label Example checkbox label Example checkbox label <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 Checkbox label Example checkbox label that is really long and probably wraps really awkwardly Help explain what this choice is in more text than should be necessary to see how text wraps Example checkbox label that is really long and probably wraps really awkwardly Help explain what this choice is in more text than should be necessary to see how text wraps <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 On Off <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>