Checkboxes
Sample HTML for Checkboxes example
<div class="ds_question">
<fieldset aria-describedby="ds_hint">
<legend>What topics are you interested in?</legend>
<p class="ds_hint-text" id="ds_hint">Select as many as you like</p>
<div class="ds_field-group">
<div class="ds_checkbox">
<input class="ds_checkbox__input" id="education" name="education" type="checkbox">
<label class="ds_checkbox__label" for="education">Education</label>
</div>
<div class="ds_checkbox">
<input class="ds_checkbox__input" id="housing" name="housing" type="checkbox">
<label class="ds_checkbox__label" for="housing">Housing</label>
</div>
<div class="ds_checkbox">
<input class="ds_checkbox__input" id="transport" name="transport" type="checkbox">
<label class="ds_checkbox__label" for="transport">Transport</label>
</div>
</div>
</fieldset>
</div>About this component
Checkboxes allow users to pick any number of items from a list. This is different from radio buttons, which allow users to pick one option at a time.
When to use this component
Use checkboxes to allow users to:
- pick one or more items from a list
- toggle between selecting and deselecting an option
If users should only pick one option from a list, you should use the radio buttons component.
How to use this component
Put checkboxes to the left of their labels.
Tell the user how many checkboxes they should select. For example:
- Select all that apply
- Choose up to 3 items
Use hint text to do this. Place this text above the checkboxes.
Other versions of this component
Checkboxes with hint text
You can add hint text to checkboxes, the same as you can with any other form component.
Sample HTML for Checkboxes with hint text example
<div class="ds_question">
<fieldset aria-describedby="ds_hint">
<legend>What are you interested in?</legend>
<p class="ds_hint-text" id="ds_hint">Select as many as you like</p>
<div class="ds_field-group">
<div class="ds_checkbox">
<input class="ds_checkbox__input" id="benefits" name="benefits" type="checkbox" aria-describedby="benefits_hint">
<label class="ds_checkbox__label" for="benefits">Benefits and grants</label>
<p class="ds_hint-text" id="benefits_hint">Information on benefits, funds and grants, including Child Benefit and tax credits.</p>
</div>
<div class="ds_checkbox">
<input class="ds_checkbox__input" id="environment" name="environment" type="checkbox" aria-describedby="environment_hint">
<label class="ds_checkbox__label" for="environment">Environment, farming and marine</label>
<p class="ds_hint-text" id="environment_hint">Guidance on recycling, flooding, farming, fishing and conservation, including advice for businesses.</p>
</div>
<div class="ds_checkbox">
<input class="ds_checkbox__input" id="living-in-scotland" name="living-in-scotland" type="checkbox" aria-describedby="scotland_hint">
<label class="ds_checkbox__label" for="living-in-scotland">Living in and visiting Scotland</label>
<p class="ds_hint-text" id="scotland_hint">Voting, charities, tourism and life in Scotland.</p>
</div>
</div>
</fieldset>
</div>Small checkboxes
You can use small checkboxes if space is limited. For example, if you're using them in search filters.
Sample HTML for Small checkboxes example
<div class="ds_question">
<fieldset aria-describedby="ds_hint">
<legend>What topics are you interested in?</legend>
<p class="ds_hint-text" id="ds_hint">Select as many as you like</p>
<div class="ds_field-group">
<div class="ds_checkbox ds_checkbox--small">
<input class="ds_checkbox__input" id="education" name="education" type="checkbox">
<label class="ds_checkbox__label" for="education">Education</label>
</div>
<div class="ds_checkbox ds_checkbox--small">
<input class="ds_checkbox__input" id="housing" name="housing" type="checkbox">
<label class="ds_checkbox__label" for="housing">Housing</label>
</div>
<div class="ds_checkbox ds_checkbox--small">
<input class="ds_checkbox__input" id="transport" name="transport" type="checkbox">
<label class="ds_checkbox__label" for="transport">Transport</label>
</div>
</div>
</fieldset>
</div>Including a ‘none’ option
If ‘none’ is a valid response to a question, include it as an option. Do not expect the user to not select any checkboxes as their response.
You will know that the user has made a specific choice and that they have answered the question. Without the ‘none’ option it might not be clear whether the user has skipped the question or not.
Show the option for ‘none’ last in the options. Separate it from other options in the group with a divider, usually the word ‘or’.
The label for the ‘none’ option should relate to the question and not be the word ‘none’. For example, if the question was ‘Do you receive any of these benefits?’ you could use ‘No, I do not receive any of these benefits’.
Sample HTML for Exclusive checkbox example
<div class="ds_question">
<fieldset aria-describedby="ds_hint">
<legend>Do you receive any of these benefits?</legend>
<p class="ds_hint-text" id="ds_hint">Select all that apply</p>
<div class="ds_checkboxes" data-module="ds-checkboxes">
<div class="ds_checkbox">
<input class="ds_checkbox__input" id="universal-credit" name="universal-credit" type="checkbox">
<label class="ds_checkbox__label" for="universal-credit">Universal Credit</label>
</div>
<div class="ds_checkbox">
<input class="ds_checkbox__input" id="pension-credit" name="pension-credit" type="checkbox">
<label class="ds_checkbox__label" for="pension-credit">Pension Credit</label>
</div>
<div class="ds_checkbox">
<input class="ds_checkbox__input" id="jsa" name="jsa" type="checkbox">
<label class="ds_checkbox__label" for="jsa">Income-based Job Seeker's Allowance</label>
</div>
<p class="ds_checkbox-separator">or</p>
<div class="ds_checkbox">
<input class="ds_checkbox__input" id="none" name="none" type="checkbox" data-behaviour="exclusive">
<label class="ds_checkbox__label" for="none">No, I do not receive any of these benefits</label>
</div>
</div>
</fieldset>
</div>You must add an attribute of data-behaviour="exclusive" to the 'none' option's checkbox. This makes selection of the 'none' option and any other checkboxes exclusive.
Selecting the 'none' option will unselect any other checkboxes. Selecting other checkboxes with the 'none' option selected will unselect the 'none' option.
Add server-side validation to prevent invalid submissions. This is important if a user does not have JavaScript enabled in their browser.
Sample HTML for Exclusive checkbox with error example
<div class="ds_question ds_question--error">
<fieldset aria-describedby="ds_hint" aria-invalid="true">
<legend>Do you receive any of these benefits?</legend>
<p class="ds_hint-text" id="ds_hint">Select all that apply</p>
<p class="ds_question__error-message">
Select which benefits you receive or select 'No, I do not receive any of these benefits'
</p>
<div class="ds_checkboxes" data-module="ds-checkboxes">
<div class="ds_checkbox">
<input class="ds_checkbox__input" id="universal-credit" name="universal-credit" type="checkbox" checked="true">
<label class="ds_checkbox__label" for="universal-credit">Universal Credit</label>
</div>
<div class="ds_checkbox">
<input class="ds_checkbox__input" id="pension-credit" name="pension-credit" type="checkbox">
<label class="ds_checkbox__label" for="pension-credit">Pension Credit</label>
</div>
<div class="ds_checkbox">
<input class="ds_checkbox__input" id="jsa" name="jsa" type="checkbox">
<label class="ds_checkbox__label" for="jsa">Income-based Job Seeker's Allowance</label>
</div>
<p class="ds_checkbox-separator">or</p>
<div class="ds_checkbox">
<input class="ds_checkbox__input" id="none" name="none" type="checkbox" data-behaviour="exclusive" checked="true">
<label class="ds_checkbox__label" for="none">No, I do not receive any of these benefits</label>
</div>
</div>
</fieldset>
</div>Error messages
The error state for checkboxes marks the entire fieldset.
Sample HTML for Checkbox error message example
<div class="ds_question">
<div class="ds_question ds_question--error" id="error-id">
<fieldset aria-describedby="ds_hint" aria-invalid="true">
<legend>What topics are you interested in?</legend>
<p class="ds_hint-text" id="ds_hint">Select an option</p>
<p class="ds_question__error-message">This field is required</p>
<div class="ds_field-group">
<div class="ds_checkbox">
<input class="ds_checkbox__input" id="education" name="education" type="checkbox">
<label class="ds_checkbox__label" for="education">Education</label>
</div>
<div class="ds_checkbox">
<input class="ds_checkbox__input" id="housing" name="housing" type="checkbox">
<label class="ds_checkbox__label" for="housing">Housing</label>
</div>
<div class="ds_checkbox">
<input class="ds_checkbox__input" id="transport" name="transport" type="checkbox">
<label class="ds_checkbox__label" for="transport">Transport</label>
</div>
</div>
</fieldset>
</div>
</div>Website analytics
You can track checkbox items through the original page path and a data attribute identifying the checkbox and its value.
The Design System’s ‘tracking’ script adds this attribute.
Accessibility
We use a custom style for checkboxes. They are larger and easier to use than the standard checkboxes defined by a browser. We also make their focussed and selected states clearer.
You should only stack checkboxes vertically. This makes tabbing through the checkboxes easier to follow. It also makes it easier for screen magnifier users to find all the options.