Explore the system

Get started

Get the tools and building blocks to design and develop consistent and accessible experiences.

Start developing Start designing

Checkbox

Allow users to select one or more options.

Guidance

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

Single checkbox

Do you want to recieve status updates?

HTML

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

Select all your favourite fruits:

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>