Skip to main content

Checkboxes

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

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

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

    <span class="nhsuk-hint" id="example-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="example-1" name="example" type="checkbox" value="email">
        <label class="nhsuk-label nhsuk-checkboxes__label" for="example-1">
          Email
        </label>
      </div>

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

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

    </div>
  </fieldset>

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

{{ checkboxes({
  "idPrefix": "example",
  "name": "example",
  "fieldset": {
    "legend": {
      "text": "How would you like to be contacted?",
      "classes": "nhsuk-fieldset__legend--l",
      isPageHeading: true
    }
  },
  "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 we recommend, 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.

Checkbox items with hints

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.

Use hint text to give users help in context. For example, say "Select all the options that are relevant to you".

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

  <fieldset class="nhsuk-fieldset" aria-describedby="example-hint-hint">
    <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--m">
      <h1 class="nhsuk-fieldset__heading">
        Have you ever had any of these conditions?
      </h1>
    </legend>

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

    <div class="nhsuk-checkboxes">

      <div class="nhsuk-checkboxes__item">
        <input class="nhsuk-checkboxes__input" id="example-hint-1" name="example-hint" type="checkbox" value="Asthma">
        <label class="nhsuk-label nhsuk-checkboxes__label" for="example-hint-1">
          Asthma
        </label>
      </div>

      <div class="nhsuk-checkboxes__item">
        <input class="nhsuk-checkboxes__input" id="example-hint-2" name="example-hint" type="checkbox" value="Diabetes">
        <label class="nhsuk-label nhsuk-checkboxes__label" for="example-hint-2">
          Diabetes
        </label>
      </div>

      <div class="nhsuk-checkboxes__item">
        <input class="nhsuk-checkboxes__input" id="example-hint-3" name="example-hint" type="checkbox" value="Heart disease">
        <label class="nhsuk-label nhsuk-checkboxes__label" for="example-hint-3">
          Heart disease
        </label>
      </div>

      <div class="nhsuk-checkboxes__item">
        <input class="nhsuk-checkboxes__input" id="example-hint-4" name="example-hint" type="checkbox" value="None are relevant to me">
        <label class="nhsuk-label nhsuk-checkboxes__label" for="example-hint-4">
          None are relevant to me
        </label>
      </div>

    </div>
  </fieldset>

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

{{ checkboxes({
  "idPrefix": "example-hint",
  "name": "example-hint",
  "fieldset": {
    "legend": {
      "text": "Have you ever had any of these conditions?",
      "classes": "nhsuk-fieldset__legend--m",
      isPageHeading: true
    }
  },
  "hint": {
    "text": "Select all the options that are relevant to you."
  },
  "items": [
    {
      "value": "Asthma",
      "text": "Asthma"
    },
    {
      "value": "Diabetes",
      "text": "Diabetes"
    },
    {
      "value": "Heart disease",
      "text": "Heart disease"
    },
    {
      "value": "None are relevant to me",
      "text": "None are relevant to me"
    }
  ]
}) }}

Error messages

Error messages should be styled like this:

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

  <fieldset class="nhsuk-fieldset" aria-describedby="example-error-hint example-error-error">
    <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--m">
      <h1 class="nhsuk-fieldset__heading">
        Have you ever had any of these conditions?
      </h1>
    </legend>

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

    <span class="nhsuk-error-message" id="example-error-error">
      <span class="nhsuk-u-visually-hidden">Error:</span> Select if you have 1 of these conditions.
    </span>

    <div class="nhsuk-checkboxes">

      <div class="nhsuk-checkboxes__item">
        <input class="nhsuk-checkboxes__input" id="example-error-1" name="example-error" type="checkbox" value="Asthma">
        <label class="nhsuk-label nhsuk-checkboxes__label" for="example-error-1">
          Asthma
        </label>
      </div>

      <div class="nhsuk-checkboxes__item">
        <input class="nhsuk-checkboxes__input" id="example-error-2" name="example-error" type="checkbox" value="Diabetes">
        <label class="nhsuk-label nhsuk-checkboxes__label" for="example-error-2">
          Diabetes
        </label>
      </div>

      <div class="nhsuk-checkboxes__item">
        <input class="nhsuk-checkboxes__input" id="example-error-3" name="example-error" type="checkbox" value="Heart disease">
        <label class="nhsuk-label nhsuk-checkboxes__label" for="example-error-3">
          Heart disease
        </label>
      </div>

      <div class="nhsuk-checkboxes__item">
        <input class="nhsuk-checkboxes__input" id="example-error-4" name="example-error" type="checkbox" value="None are relevant to me">
        <label class="nhsuk-label nhsuk-checkboxes__label" for="example-error-4">
          None are relevant to me
        </label>
      </div>

    </div>
  </fieldset>

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

{{ checkboxes({
  "idPrefix": "example-error",
  "name": "example-error",
  "fieldset": {
    "legend": {
      "text": "Have you ever had any of these conditions?",
      "classes": "nhsuk-fieldset__legend--m",
      isPageHeading: true
    }
  },
  "hint": {
    "text": "Select all the options that are relevant to you."
  },
  "errorMessage": {
    "text": "Select if you have 1 of these conditions."
  },
  "items": [
    {
      "value": "Asthma",
      "text": "Asthma"
    },
    {
      "value": "Diabetes",
      "text": "Diabetes"
    },
    {
      "value": "Heart disease",
      "text": "Heart disease"
    },
    {
      "value": "None are relevant to me",
      "text": "None are relevant to me"
    }
  ]
}) }}

Follow:

Research

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: November 2019