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 class="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="options"
        id="shop-essentials"
      />
      <label
        class="field__label field__label--block has-mb-2"
        for="shop-essentials"
        >Shop for food and essentials</label
      >
      <input
        class="field__input"
        type="checkbox"
        name="options"
        id="prepare-meals"
      />
      <label class="field__label field__label--block has-mb-2" for="prepare-meals"
        >Prepare meals, drinks and snacks</label
      >
      <input
        class="field__input"
        type="checkbox"
        name="options"
        id="food-and-drink"
      />
      <label class="field__label field__label--block has-mb-2" for="food-and-drink"
        >Eat and drink</label
      >
    </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

<fieldset class="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="options" id="france" />
    <label class="field__label field__label--block" for="france">France</label>

    <input class="field__input" type="checkbox" name="options" id="portugal" />
    <label class="field__label field__label--block" for="portugal"
      >Portugal</label
    >
    <div class="field__add-info field__add-info--block" for="portugal">
      Further text to explain your label text.
    </div>

    <input class="field__input" type="checkbox" name="options" id="spain" />
    <label class="field__label field__label--block" for="spain">Spain</label>
  </div>
</fieldset>

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
                type="checkbox"
                class="field__input"
                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
                type="checkbox"
                class="field__input"
                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
                type="checkbox"
                class="field__input"
                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
                type="checkbox"
                class="field__input"
                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 class="h3">Declaration<</h3>
<p class="paragraph">By continuing you confirm that:</p>
<ul class="default-list">
  <li>the information you've given is correct.</li>
  <li>you agree to the <a href="#"><strong>terms and conditions</strong></li>.
</ul>

<fieldset class="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="options" id="terms" />
    <label class="field__label field__label--block" for="terms">I agree</label>
  </div>
</fieldset>

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

<fieldset
  aria-describedby="options-error"
  id="contact"
  class="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" id="email" />
    <label class="field__label__error field__label--block" for="email"
      >Email</label
    >
    <input class="field__input" type="checkbox" name="options" id="text-msg" />
    <label class="field__label__error field__label--block" for="text-msg"
      >Text Message</label
    >
    <input class="field__input" type="checkbox" name="options" id="phone" />
    <label class="field__label__error field__label--block" for="phone"
      >Phone</label
    >
  </div>

  <div id="options-error" class="field__message field__message--error">
    At least one selection is required
  </div>
</fieldset>