Checkbox

Guidance

Checkboxes allow users to select one more options. They can be presented alone or as part of a group.

Single checkbox

<!-- Checkbox -->
<fieldset class="gnb-checkboxes">
	<legend>Do you want to recieve status updates?</legend>
	<div class="pair">
		<input type="checkbox" name="yes" id="yes">
		<label for="yes">Yes</label>
	</div>
</fieldset>

Checkbox group

<!-- 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>