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 option or 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" type="checkbox" />
                <label class="ds_checkbox__label" for="education">Education</label>
            </div>

            <div class="ds_checkbox">
                <input class="ds_checkbox__input" id="housing" type="checkbox" />
                <label class="ds_checkbox__label" for="housing">Housing</label>
            </div>

            <div class="ds_checkbox">
                <input class="ds_checkbox__input" id="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. Unlike radio buttons which allow users to pick one option.

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

Hint text can be added to checkboxes, just as it can to any other form component.

You can use hint text for more details about a checkbox. You should avoid adding hint text to the checkbox’s label element.

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

Although small checkboxes appear smaller, their clickable area is the same as normal checkboxes. This makes them easier for users to pick.

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" 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" 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" 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 instead of expecting the user to not select any checkboxes. This helps ensure that the user is making a specific choice in their response, and you will know that the question has been answered. Without the ‘none’ option it might not be clear whether a question has been skipped or not.

The option for ‘none’ should be shown last in the options. It should be separated from other options in the group with a divider, typically the word ‘or’.

The label for the ‘none’ option should clearly relate to the question being asked and not just 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" 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" 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" 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" 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>

Invalid combinations of checkboxes are automatically managed with JavaScript. Enable it on the ‘none’ option by adding the attribute data-behaviour="exclusive" to the checkbox.

If the user selects the ‘none’ option, any other checkboxes will be unchecked. Similarly, if a user selects ‘none’ and then chooses another option, the ‘none’ option will be unchecked.

If JavaScript is not enabled in the user’s browser, add validation to prevent the ‘none’ option being submitted when another option is also selected.

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" 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" 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" 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" 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" type="checkbox" />
                    <label class="ds_checkbox__label" for="education">Education</label>
                </div>

                <div class="ds_checkbox">
                    <input class="ds_checkbox__input" id="housing" type="checkbox" />
                    <label class="ds_checkbox__label" for="housing">Housing</label>
                </div>

                <div class="ds_checkbox">
                    <input class="ds_checkbox__input" id="transport" type="checkbox" />
                    <label class="ds_checkbox__label" for="transport">Transport</label>
                </div>
            </div>
        </fieldset>
    </div>
</div>

Website analytics

Checkbox items can be tracked through the original page path and a data attribute identifying the checkbox and its value, if set.

The data attribute is added automatically by the Design System’s ‘tracking’ script.

Accessibility

We use a custom style for checkboxes so that they’re larger and easier to use than the standard checkboxes defined by a browser. We also use a custom style to make their focussed and selected states clearer.

Checkboxes should only be stacked vertically. This makes tabbing through the checkboxes easier to follow. It also ensures better visibility of the options for screen magnifier users.

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