Checkboxes

A selectable input field that allows a user to select items.

Base Style

<fieldset class="d-layout__stack8">
<div class="d-checkbox-group">
<div class="d-checkbox__input">
<input class="d-checkbox" type="checkbox" name="Dialtone-CheckExample1" id="Dialtone-CheckExample1" />
</div>
<div class="d-checkbox__copy">
<label class="d-checkbox__label" for="Dialtone-CheckExample1">Checkbox label</label>
</div>
</div>
<div class="d-checkbox-group--disabled">
<div class="d-checkbox__input">
<input class="d-checkbox" type="checkbox" name="Dialtone-CheckExample2" id="Dialtone-CheckExample2" disabled />
</div>
<div class="d-checkbox__copy">
<label class="d-checkbox__label" for="Dialtone-CheckExample2">Checkbox label that's been disabled</label>
</div>
</div>
</fieldset>

Accessibility

The best accessibility is semantic HTML. Most screen readers understand how to parse inputs if they’re correctly formatted. When it comes to checkboxes, there are a few things to keep in mind:

  • All inputs should have an id attribute.
  • Associate checkbox labels with their inputs using the for attribute. This correlates with the checkbox's id.
  • If you have a group of related checkboxes, use a fieldset to group them and a legend to title the group.

For further information, please visit Gov.UK’s article, "Using the fieldset and legend elements".

Examples

Stacked Group

Call Blocking & Spam Protection
<fieldset class="d-layout__stack8">
<legend class="d-label">Call Blocking & Spam Protection</legend>
<div class="d-checkbox-group">
<div class="d-checkbox__input">
<input class="d-checkbox" type="checkbox" name="Dialtone-CheckGroupAExample1" id="Dialtone-CheckGroupAExample1" />
</div>
<div class="d-checkbox__copy">
<label class="d-checkbox__label" for="Dialtone-CheckGroupAExample1">Anonymous callers</label>
</div>
</div>
<div class="d-checkbox-group">
<div class="d-checkbox__input">
<input class="d-checkbox" type="checkbox" name="Dialtone-CheckGroupAExample2" id="Dialtone-CheckGroupAExample2" />
</div>
<div class="d-checkbox__copy">
<label class="d-checkbox__label" for="Dialtone-CheckGroupAExample2">Block callers not already in contacts list</label>
</div>
</div>
<div class="d-checkbox-group">
<div class="d-checkbox__input">
<input class="d-checkbox" type="checkbox" name="Dialtone-CheckGroupAExample3" id="Dialtone-CheckGroupAExample3" />
</div>
<div class="d-checkbox__copy">
<label class="d-checkbox__label" for="Dialtone-CheckGroupAExample3">Block callers with a high spam score</label>
</div>
</div>
</fieldset>

With description copy

Call Blocking & Spam Protection
<fieldset class="d-layout__stack8">
<legend class="d-label">Call Blocking & Spam Protection</legend>
<div class="d-checkbox-group">
<div class="d-checkbox__input">
<input class="d-checkbox" type="checkbox" name="Dialtone-CheckGroupBExample1" id="Dialtone-CheckGroupBExample1" />
</div>
<div class="d-checkbox__copy">
<label class="d-checkbox__label" for="Dialtone-CheckGroupBExample1">
Anonymous callers
<p class="d-checkbox__description">Select how phone numbers you don't know should be handled.</p>
</label>
</div>
</div>
<div class="d-checkbox-group">
<div class="d-checkbox__input">
<input class="d-checkbox" type="checkbox" name="Dialtone-CheckGroupBExample2" id="Dialtone-CheckGroupBExample2" />
</div>
<div class="d-checkbox__copy">
<label class="d-checkbox__label" for="Dialtone-CheckGroupBExample2">
Block callers not already in contacts list
<p class="d-checkbox__description">You get enough calls. Free up some of your time.</p>
</label>
</div>
</div>
<div class="d-checkbox-group">
<div class="d-checkbox__input">
<input class="d-checkbox" type="checkbox" name="Dialtone-CheckGroupBExample3" id="Dialtone-CheckGroupBExample3" />
</div>
<div class="d-checkbox__copy">
<label class="d-checkbox__label" for="Dialtone-CheckGroupBExample3">
Block callers with a high spam score
<p class="d-checkbox__description">We'll only let the legitimate callers through to bother you.</p>
</label>
</div>
</div>
</fieldset>

Validation States

Checkboxes use the same validation states as inputs.

Call Blocking & Spam Protection
<fieldset class="d-layout__stack8">
<legend class="d-label">Call Blocking & Spam Protection</legend>
<div class="d-checkbox-group">
<div class="d-checkbox__input">
<input class="d-checkbox d-checkbox--warning" type="checkbox" name="Dialtone-CheckGroupBExample1" id="Dialtone-CheckGroupCExample1" />
</div>
<div class="d-checkbox__copy">
<label class="d-checkbox__label" for="Dialtone-CheckGroupCExample1">
Anonymous callers
<p class="d-checkbox__description d-checkbox__description--warning">Select how phone numbers you don't know should be handled.</p>
</label>
</div>
</div>
<div class="d-checkbox-group">
<div class="d-checkbox__input">
<input class="d-checkbox d-checkbox--error" type="checkbox" name="Dialtone-CheckGroupCExample2" id="Dialtone-CheckGroupCExample2" />
</div>
<div class="d-checkbox__copy">
<label class="d-checkbox__label" for="Dialtone-CheckGroupCExample2">
Block callers not already in contacts list
<p class="d-checkbox__description d-checkbox__description--error">You get enough calls. Free up some of your time.</p>
</label>
</div>
</div>
<div class="d-checkbox-group">
<div class="d-checkbox__input">
<input class="d-checkbox d-checkbox--success" type="checkbox" name="Dialtone-CheckGroupCExample3" id="Dialtone-CheckGroupCExample3" />
</div>
<div class="d-checkbox__copy">
<label class="d-checkbox__label" for="Dialtone-CheckGroupCExample3">
Block callers with a high spam score
<p class="d-checkbox__description d-checkbox__description--success">We'll only let the legitimate callers through to bother you.</p>
</label>
</div>
</div>
</fieldset>