Make it clear with words when users can select one or multiple options.
Back to components
Checkboxes
Use these to select either on/off toggles or multiple selections.
Example
What bins do you currently have?
Select all that apply
HTML Snippet for checkboxes
<h1 class="heading-medium">What bins do you currently have?</h1>
<p>Select all that apply</p>
<form>
<div class="form-group">
<fieldset>
<legend class="sr-only">What bins do you currently have?</legend>
<label class="block-label" for="waste-type-1" data-target="waste-type-1">
<input type="checkbox" id="waste-type-1" name="waste-types" value="Black bin (General waste)" aria-controls="waste-type-1" aria-expanded="false">
Black bin (General waste)
</label>
<label class="block-label" for="waste-type-2" data-target="waste-type-2">
<input type="checkbox" id="waste-type-2" name="waste-types" value="Brown bin (Garden waste)" aria-controls="waste-type-2" aria-expanded="false">
Brown bin (Garden waste)
</label>
<label class="block-label" for="waste-type-3" data-target="waste-type-3">
<input type="checkbox" id="waste-type-3" name="waste-types" value="Green bin (Recycling)" aria-controls="waste-type-3" aria-expanded="false">
Green bin (Recycling)
</label>
</fieldset>
</div>
</form>Conditionally revealing content
Reveal additional questions, depending on the context.
Select 'Other'
Example
How do you travel to work?
Select all options that are relevant to you.
HTML Snippet for conditionally revealing content
<h1 class="heading-medium">How do you travel to work?</h1>
<p>Select all options that are relevant to you.</p>
<form>
<div class="form-group">
<fieldset>
<legend class="sr-only">How do you travel to work?</legend>
<div class="form-group">
<label class="block-label" for="car" data-target="car">
<input type="checkbox" id="car" name="work travel" value="Car" aria-controls="car" aria-expanded="false">
Car
</label>
<label class="block-label" for="train" data-target="train">
<input type="checkbox" id="train" name="work travel" value="Irish" aria-controls="train" aria-expanded="false">
Train
</label>
<label class="block-label" for="bus" data-target="bus">
<input type="checkbox" id="bus" name="work travel" value="Bus" aria-controls="bus" aria-expanded="false">
Bus
</label>
<label class="block-label" for="walking" data-target="walking">
<input type="checkbox" id="walking" name="work travel" value="I walk" aria-controls="walking" aria-expanded="false">
I walk
</label>
<label class="block-label" for="other" data-target="other">
<input type="checkbox" id="other" name="work travel" value="Other" aria-controls="other" aria-expanded="false">
Other
</label>
<div class="panel panel-border-narrow js-hidden" id="example-other-transport">
<label class="form-label" for="other-transport">Tell us how</label>
<input class="form-control" type="text" id="other-transport" name="other-transport">
</div>
</div>
<div class="form-group">
<button type="submit" id="register-button" class="btn btn-primary">
Continue to payment
</button>
</div>
</fieldset>
</div>
</form>Error handling
- add a class of
form-group-errorto<div class="form-group"> - the error message
<span class="error-message">Choose an answer</span>goes beneath the<legend>
Example
What bins do you currently have?
Select all that apply
HTML Snippet for error handling
<h1 class="heading-medium">What bins do you currently have?</h1>
<p>Select all that apply</p>
<form>
<div class="form-group form-group-error">
<fieldset>
<legend class="sr-only">What bins do you currently have?</legend>
<span class="error-message">Choose an answer</span>
<label class="block-label" for="waste-type-1-error" data-target="waste-type-1-error">
<input type="checkbox" id="waste-type-1-error" name="waste-types-error" value="Black bin (General waste)" aria-controls="waste-type-1-error" aria-expanded="false">
Black bin (General waste)
</label>
<label class="block-label" for="waste-type-2-error" data-target="waste-type-2-error">
<input type="checkbox" id="waste-type-2-error" name="waste-types-error" value="Brown bin (Garden waste)" aria-controls="waste-type-2-error" aria-expanded="false">
Brown bin (Garden waste)
</label>
<label class="block-label" for="waste-type-3-error" data-target="waste-type-3-error">
<input type="checkbox" id="waste-type-3-error" name="waste-types-error" value="Green bin (Recycling)" aria-controls="waste-type-3-error" aria-expanded="false">
Green bin (Recycling)
</label>
</fieldset>
</div>
</form>