Form elements - Checkboxes

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

Open this checkboxes example 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>

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

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

Checkboxes with hint text

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 this checkboxes hint example in new window
Copy
<div class="nhsuk-form-group">

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

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

    <div class="nhsuk-checkboxes">

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

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

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

    </div>
  </fieldset>

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

{{ checkboxes({
  "idPrefix": "contact",
  "name": "contact",
  "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",
      id: "contact"
    },
    {
      "value": "phone",
      "text": "Phone"
    },
    {
      "value": "text message",
      "text": "Text message"
    }
  ]
}) }}

Checkbox items with hints

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

Open this checkbox items with hints example in new window
Copy
<div class="nhsuk-form-group">

  <fieldset class="nhsuk-fieldset" aria-describedby="nationality-hint">
    <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--l">
      <h1 class="nhsuk-fieldset__heading">
        What is your nationality?
      </h1>
    </legend>

    <div class="nhsuk-hint" id="nationality-hint">
      If you have dual nationality, select all options that are relevant to you.
    </div>

    <div class="nhsuk-checkboxes">

      <div class="nhsuk-checkboxes__item">
        <input class="nhsuk-checkboxes__input" id="nationality-1" name="nationality" type="checkbox" value="british" aria-describedby="nationality-1-item-hint">
        <label class="nhsuk-label nhsuk-checkboxes__label" for="nationality-1">
          British
        </label>
        <div class="nhsuk-hint nhsuk-checkboxes__hint" id="nationality-1-item-hint">
          including English, Scottish, Welsh and Northern Irish
        </div>
      </div>

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

      <div class="nhsuk-checkboxes__item">
        <input class="nhsuk-checkboxes__input" id="nationality-3" name="nationality" type="checkbox" value="other">
        <label class="nhsuk-label nhsuk-checkboxes__label" for="nationality-3">
          Citizen of another country
        </label>
      </div>

    </div>
  </fieldset>

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

{{ checkboxes({
  idPrefix: "nationality",
  name: "nationality",
  fieldset: {
    legend: {
      text: "What is your nationality?",
      isPageHeading: true,
      classes: "nhsuk-fieldset__legend--l"
    }
  },
  hint: {
    text: "If you have dual nationality, select all options that are relevant to you."
  },
  items: [
    {
      value: "british",
      text: "British",
      hint: {
        text: "including English, Scottish, Welsh and Northern Irish"
      }
    },
    {
      value: "irish",
      text: "Irish"
    },
    {
      value: "other",
      text: "Citizen of another country"
    }
  ]
}) }}

Conditionally revealing content

You can add conditionally revealing content to checkboxes, so users only see content when it’s relevant to them.

For example, you could reveal a phone number input only when a user chooses to be contacted by phone.

Open this checkboxes conditional example in new window
Copy
<div class="nhsuk-form-group">

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

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

    <div class="nhsuk-checkboxes nhsuk-checkboxes--conditional">

      <div class="nhsuk-checkboxes__item">
        <input class="nhsuk-checkboxes__input" id="contact-1" name="contact" type="checkbox" value="email" aria-controls="conditional-contact-1" aria-expanded="false">
        <label class="nhsuk-label nhsuk-checkboxes__label" for="contact-1">
          Email
        </label>
      </div>

      <div class="nhsuk-checkboxes__conditional nhsuk-checkboxes__conditional--hidden" id="conditional-contact-1">

        <div class="nhsuk-form-group">
          <label class="nhsuk-label" for="email">
            Email address
          </label>
          <input class="nhsuk-input nhsuk-u-width-two-thirds" id="email" name="email" type="text">
        </div>

      </div>

      <div class="nhsuk-checkboxes__item">
        <input class="nhsuk-checkboxes__input" id="contact-2" name="contact" type="checkbox" value="phone" aria-controls="conditional-contact-2" aria-expanded="false">
        <label class="nhsuk-label nhsuk-checkboxes__label" for="contact-2">
          Phone
        </label>
      </div>

      <div class="nhsuk-checkboxes__conditional nhsuk-checkboxes__conditional--hidden" id="conditional-contact-2">

        <div class="nhsuk-form-group">
          <label class="nhsuk-label" for="phone">
            Phone number
          </label>
          <input class="nhsuk-input nhsuk-u-width-two-thirds" id="phone" name="phone" type="text">
        </div>

      </div>

      <div class="nhsuk-checkboxes__item">
        <input class="nhsuk-checkboxes__input" id="contact-3" name="contact" type="checkbox" value="text" aria-controls="conditional-contact-3" aria-expanded="false">
        <label class="nhsuk-label nhsuk-checkboxes__label" for="contact-3">
          Text message
        </label>
      </div>

      <div class="nhsuk-checkboxes__conditional nhsuk-checkboxes__conditional--hidden" id="conditional-contact-3">

        <div class="nhsuk-form-group">
          <label class="nhsuk-label" for="mobile">
            Mobile phone number
          </label>
          <input class="nhsuk-input nhsuk-u-width-two-thirds" id="mobile" name="mobile" type="text">
        </div>

      </div>

    </div>
  </fieldset>

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

{% set emailHtml %}
  {{ input({
    id: "email",
    name: "email",
    classes: "nhsuk-u-width-two-thirds",
    label: {
      text: "Email address"
    }
  }) }}
{% endset -%}

{% set phoneHtml %}
  {{ input({
    id: "phone",
    name: "phone",
    classes: "nhsuk-u-width-two-thirds",
    label: {
      text: "Phone number"
    }
  }) }}
{% endset -%}

{% set mobileHtml %}
  {{ input({
    id: "mobile",
    name: "mobile",
    classes: "nhsuk-u-width-two-thirds",
    label: {
      text: "Mobile phone number"
    }
  }) }}
{% endset -%}

{{ checkboxes({
  "idPrefix": "contact",
  "name": "contact",
  "fieldset": {
    "legend": {
      "text": "How would you prefer 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",
      "conditional": {
        "html": emailHtml
      }
    },
    {
      "value": "phone",
      "text": "Phone",
      "conditional": {
        "html": phoneHtml
      }
    },
    {
      "value": "text",
      "text": "Text message",
      "conditional": {
        "html": mobileHtml
      }
    }
  ]
}) }}

Keep it simple - if you need to add a lot of content, consider showing it on the next page in the process instead.

Error messages

Error messages should be styled like this:

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

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

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

    <span class="nhsuk-error-message" id="contact-error">
      <span class="nhsuk-u-visually-hidden">Error:</span> Select how you like to be contacted
    </span>

    <div class="nhsuk-checkboxes">

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

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

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

    </div>
  </fieldset>

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

{{ checkboxes({
  "idPrefix": "contact",
  "name": "contact",
  "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."
  },
  "errorMessage": {
    "text": "Select how you like to be contacted"
  },
  "items": [
    {
      "value": "email",
      "text": "Email",
      id: "contact"
    },
    {
      "value": "phone",
      "text": "Phone"
    },
    {
      "value": "text message",
      "text": "Text message"
    }
  ]
}) }}

Follow:

Research

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

Help improve this page

The manual is a community effort. Anyone can help improve and grow it.

To help make sure the Checkboxes guidance is useful, relevant and up to date, you can:

Need help?

If you’ve got a question about the NHS digital service manual or want to feedback, get in touch.

Updated: April 2020