Checkboxes

Use checkboxes to let users select one or more options on a form.

Code and design

Open in new window
Copy
<div class="nhsuk-form-group">

  <fieldset class="nhsuk-fieldset" aria-describedby="nationality-hint">
    <legend class="nhsuk-fieldset__legend">
      How would you like to be contacted?
    </legend>

    <span class="nhsuk-hint" id="nationality-hint">
      Select all options that are relevant to you.
    </span>

    <div class="nhsuk-checkboxes">

      <div class="nhsuk-checkboxes__item">
        <input class="nhsuk-checkboxes__input" id="nationality-1" name="nationality" type="checkbox" value="email">
        <label class="nhsuk-label nhsuk-checkboxes__label" for="nationality-1">
          Email
        </label>
      </div>

      <div class="nhsuk-checkboxes__item">
        <input class="nhsuk-checkboxes__input" id="nationality-2" name="nationality" type="checkbox" value="phone">
        <label class="nhsuk-label nhsuk-checkboxes__label" for="nationality-2">
          Phone
        </label>
      </div>

      <div class="nhsuk-checkboxes__item">
        <input class="nhsuk-checkboxes__input" id="nationality-3" name="nationality" type="checkbox" value="text message">
        <label class="nhsuk-label nhsuk-checkboxes__label" for="nationality-3">
          Text message
        </label>
      </div>

    </div>
  </fieldset>

</div>
Copy
{% from 'checkboxes/macro.njk' import checkboxes %}

{{ checkboxes({
  "idPrefix": "nationality",
  "name": "nationality",
  "fieldset": {
    "legend": {
      "text": "How would you like to be contacted?"
    }
  },
  "hint": {
    "text": "Select all options that are relevant to you."
  },
  "items": [
    {
      "value": "email",
      "text": "Email"
    },
    {
      "value": "phone",
      "text": "Phone"
    },
    {
      "value": "text message",
      "text": "Text message"
    }
  ]
}) }}

When to use checkboxes

Use checkboxes when you need to help users:

  • select more than 1 option from a list
  • toggle a single option on or off

When not to use checkboxes

Do not use the checkboxes component if users can only choose 1 option from a selection. In this case, use a radio.

How to use checkboxes

Group checkboxes together in a <fieldset> with a <legend> that describes them. You can see an example at the top of this page. The legend is usually a question, like "How would you like to be contacted?".

If you're asking just 1 question per page as GOV.UK design system recommends, you can set the contents of the <legend> as the page heading. This is good practice as it means screen reader users will only hear the contents once.

Read more on the GOV.UK design system about making labels and legends headings.

Unlike with radios, users can select more than 1 option from a list of checkboxes. Do not assume that users will know how many options they can select. Make it clear with a hint - for example, say "Select all that apply".

Research

We tested checkboxes on a "Register with a GP" prototype at 2 labs in 2018. Users understood what the checkboxes were for and were able to complete the set task successfully.

Our checkboxes are based on the GOV.UK design system. Read more about how GOV.UK developed and tested them.

Discuss

Discuss checkboxes on GitHub

Get in touch

If you have a question:

Updated: January 2019