Guidance
Use a checkbox group when you want to give people a list of options, and more than one answer might apply. For example, you might use a checkbox group to ask which contact methods are acceptable (email, phone, text) or which services a person is interested in.
Checkbox groups should present options clearly and use plain language so users can easily compare them. If there are too many options, consider whether another component, such as a select list or predictive list, would be more suitable.
Checkbox group
HTML
<!-- Checkbox group -->
<fieldset class="gnb-checkboxes">
<legend>Select all of your favourite fruits:</legend>
<div class="pair">
<input type="checkbox" name="blueberry" id="blueberry" checked>
<label for="blueberry">Blueberry</label>
</div>
<div class="pair">
<input type="checkbox" name="apple" id="apple">
<label for="apple">Apple</label>
</div>
<div class="pair">
<input type="checkbox" name="cherry" id="cherry">
<label for="cherry">Cherry</label>
</div>
<div class="pair">
<input type="checkbox" name="orange" id="orange">
<label for="orange">Orange</label>
</div>
<div class="pair">
<input type="checkbox" name="lemon" id="lemon">
<label for="lemon">Lemon</label>
</div>
</fieldset>