You appear to be using an unsupported browser, and it may not be able to display this site properly. You may wish to upgrade your browser.

We use cookies to collect anonymous data to help us improve your site browsing experience.

Click 'Accept all cookies' to agree to all cookies that collect anonymous data. To only allow the cookies that make the site work, click 'Use essential cookies only.' Visit 'Set cookie preferences' to control specific cookies.

Set cookie preferences

Your cookie preferences have been saved. You can change your cookie settings at any time.

Components

Checkboxes

Last updated
20 September 2022 - see all updates
The checkbox component allows users to pick the options they want from a list, by checking one or more boxes.
Open this example in a new window

Sample HTML 

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

Why we use this component

We use this component when we want users to be able 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.

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.

Open this example in a new window

Sample HTML 

<div class="ds_question">
    <fieldset>
        <legend>What are you interested in?</legend>
        <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

Small checkboxes look smaller but their actual size is the same as normal checkboxes. This keeps them easy for users to click.

Open this example in a new window

Sample HTML 

<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’.

Open this example in a new window

Sample HTML 

<div class="ds_question">
    <fieldset>
        <legend>Do you receive any of these benefits?</legend>
        <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.

Open this example in a new window

Sample HTML 

<div class="ds_question  ds_question--error">
    <fieldset aria-invalid="true">
        <legend>Do you receive any of these benefits?</legend>
        <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.

Open this example in a new window

Sample HTML 

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

First published
19 August 2020
Last updated
20 September 2022 - show all updates

  1. 'None' option added to checkboxes

  2. Add website analytics content to checkboxes

Back to top