Checkboxes

Let users select one or more options from a selection by using checkboxes.

Don't use checkboxes if users can only select one option from a selection. In this case, use Radio buttons instead.

If one or more options in a checkbox list could include extra information or be blocked, use Multistate small checkboxes.

Arrange the list of options in alphabetical order unless there is a specific reason to do otherwise.

With label

Tell us what you’re not able to do independently without significant difficulty

Shop for food and essentials

Prepare meals, drinks and snacks

Eat and drink

<form>
    <fieldset aria-describedby="options-error" id="options" class="field-set field field--set">
        <legend class="field__label field__label--block">Tell us what you’re not able to do independently without
            significant difficulty</legend>
        <div class="bcc-form-block"><input class="field__input" type="checkbox" name="with-label" id="option-n6e2te-0"
                data-random-id="option-n6e2te"><label class="field__label field__label--block"
                for="option-n6e2te-0">Shop for food and essentials</label>
            <div class="field__add-info field__add-info--block  has-mb-3" for="option-n6e2te-0"></div>
        </div>
        <div class="bcc-form-block"><input class="field__input" type="checkbox" name="with-label" id="option-n6e2te-1"
                data-random-id="option-n6e2te"><label class="field__label field__label--block"
                for="option-n6e2te-1">Prepare meals, drinks and snacks</label>
            <div class="field__add-info field__add-info--block  has-mb-3" for="option-n6e2te-1"></div>
        </div>
        <div class="bcc-form-block"><input class="field__input" type="checkbox" name="with-label" id="option-n6e2te-2"
                data-random-id="option-n6e2te"><label class="field__label field__label--block" for="option-n6e2te-2">Eat
                and drink</label>
            <div class="field__add-info field__add-info--block  has-mb-3" for="option-n6e2te-2"></div>
        </div>
    </fieldset>
</form>

With label and hint

You can add hints to the label and to the checkbox items to provide additional information about the options.

Will you be travelling to any of these countries?

Select all countries that apply.

France

Portugal

Further explain your label text.

Spain

<form>
    <fieldset aria-describedby="options-error" id="options" class="field-set field field--set">
        <legend class="field__label field__label--block">Will you be travelling to any of these countries?<h6
                class="field__instructions">Select all countries that apply.</h6>
        </legend>
        <div class="bcc-form-block"><input class="field__input" type="checkbox" name="with-label-hint"
                id="option-0s78s-0" data-random-id="option-0s78s"><label class="field__label field__label--block"
                for="option-0s78s-0">France</label>
            <div class="field__add-info field__add-info--block  has-mb-3" for="option-0s78s-0"></div>
        </div>
        <div class="bcc-form-block"><input class="field__input" type="checkbox" name="with-label-hint"
                id="option-0s78s-1" data-random-id="option-0s78s"><label class="field__label field__label--block"
                for="option-0s78s-1">Portugal</label>
            <div class="field__add-info field__add-info--block  has-mb-3" for="option-0s78s-1">Further explain your
                label text.</div>
        </div>
        <div class="bcc-form-block"><input class="field__input" type="checkbox" name="with-label-hint"
                id="option-0s78s-2" data-random-id="option-0s78s"><label class="field__label field__label--block"
                for="option-0s78s-2">Spain</label>
            <div class="field__add-info field__add-info--block  has-mb-3" for="option-0s78s-2"></div>
        </div>
    </fieldset>
</form>

Option for ‘no’ or ‘none’

If ‘no’ or ‘none’ is a valid response to a question, include it as an option instead of expecting the user to not select any checkboxes.

This option should be shown last in any list. It should be separated from other options in the group with a divider, typically the word ‘or’.

Will you be travelling to any of these countries?

Select all countries that apply.

France

Portugal

Spain

or

No, I will not be travelling to any of these countries.

HTML5

<form>
    <fieldset aria-describedby="options-error" id="options" class="field-set field field--set">
        <legend class="field__label field__label--block">Will you be travelling to any of these countries?<h6
                class="field__instructions">Select all countries that apply.</h6>
        </legend>
        <div class="bcc-form-block"><input class="field__input" type="checkbox" name="with-label-hint"
                id="option-for-no-or-none-0" data-random-id="option-for-no-or-none"><label
                class="field__label field__label--block" for="option-for-no-or-none-0">France</label>
            <div class="field__add-info field__add-info--block  has-mb-3" for="option-for-no-or-none-0"></div>
        </div>
        <div class="bcc-form-block"><input class="field__input" type="checkbox" name="with-label-hint"
                id="option-for-no-or-none-1" data-random-id="option-for-no-or-none"><label
                class="field__label field__label--block" for="option-for-no-or-none-1">Portugal</label>
            <div class="field__add-info field__add-info--block  has-mb-3" for="option-for-no-or-none-1"></div>
        </div>
        <div class="bcc-form-block"><input class="field__input" type="checkbox" name="with-label-hint"
                id="option-for-no-or-none-2" data-random-id="option-for-no-or-none"><label
                class="field__label field__label--block" for="option-for-no-or-none-2">Spain</label>
            <div class="field__add-info field__add-info--block  has-mb-3" for="option-for-no-or-none-2"></div>
        </div><label class="field__label field__label--block field__label--divider">or</label>
        <div class="bcc-form-block"><input class="field__input" type="checkbox" name="with-label-hint"
                id="option-for-no-or-none-no" data-random-id="option-for-no-or-none"><label
                class="field__label field__label--block" for="option-for-no-or-none-no">No, I will not be travelling to
                any of these countries.</label>
            <div class="field__add-info field__add-info--block  has-mb-3" for="option-for-no-or-none-3"></div>
        </div>
    </fieldset>
</form>

JavaScript

document.addEventListener("DOMContentLoaded", function () {
    const checkboxes = document.querySelectorAll(
        '.field__input[data-random-id="option-for-no-or-none"]'
    );

    checkboxes.forEach((checkbox) => {
        checkbox.addEventListener("change", function () {
            if (checkbox.id === `option-for-no-or-none-no`) {
                if (checkbox.checked) {
                    checkboxes.forEach((cb) => {
                        if (cb !== checkbox) {
                            cb.checked = false;
                        }
                    });
                }
            } else {
                checkboxes.forEach((cb) => {
                    if (cb.id === `option-for-no-or-none-no`) {
                        cb.checked = false;
                    }
                });
            }
        });
    });
});

Single checkbox with a label

Use a single checkbox item when you need users to confirm one thing, for example, agreeing to terms and conditions.

Declaration

By continuing you confirm that:

• the information you've given is correct.
• you agree to the terms and conditions.

You could be prosecuted if you deliberately give untrue or misleading information.

I agree

<h3>Declaration</h3>
<p>By continuing you confirm that:</p>
<ul>
    <li>the information you've given is correct.</li>
    <li>
        you agree to the
        <a href="#"><strong>terms and conditions</strong></a>.
    </li>
</ul>
<form>
    <fieldset aria-describedby="options-error" id="options" class="field-set field field--set">
        <legend class="field__label field__label--block">
            You could be prosecuted if you deliberately give untrue or
            misleading information.
        </legend>
        <div class="bcc-form-block">
            <input class="field__input" type="checkbox" name="with-label-hint" id="option-chfv0b-0"
                data-random-id="option-chfv0b" /><label class="field__label field__label--block" for="option-chfv0b-0">I
                agree</label>
            <div class="field__add-info field__add-info--block has-mb-3" for="option-chfv0b-0"></div>
        </div>
    </fieldset>
</form>

With error

Display an inline error when there's something wrong. For example, when a user tries to proceed without selecting an option and the question is mandatory.

How would you like to be contacted?

Email

Text message

Phone

At least one selection is required

<form>
    <fieldset aria-describedby="options-error" id="options" class="field-set field field--set field--error">
        <legend class="field__label field__label--block">How would you like to be contacted?</legend>
        <div class="bcc-form-block"><input class="field__input" type="checkbox" name="options-error"
                id="email-option-b0rcr"><label class="field__label field__label--block has-mb-md-2 has-mb-3"
                for="email-option-b0rcr">Email</label></div>
        <div class="bcc-form-block"><input class="field__input" type="checkbox" name="options-error"
                id="text-msg-option-b0rcr"><label class="field__label field__label--block has-mb-md-2 has-mb-3"
                for="text-msg-option-b0rcr">Text message</label></div>
        <div class="bcc-form-block"><input class="field__input" type="checkbox" name="options-error"
                id="phone-option-b0rcr"><label class="field__label field__label--block has-mb-md-2 has-mb-3"
                for="phone-option-b0rcr">Phone</label></div>
        <div id="options-error" class="field__message field__message--error">At least one selection is required</div>
    </fieldset>
</form>