Form elements - Checkboxes

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

Open this default checkboxes example in new window
Copy default checkboxes code
<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>
Close default checkboxes code
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Nunjucks arguments for default checkboxes
Name Type Required Description
Name fieldset Type object Required false Description Options for the fieldset component (for example legend).
Name hint Type object Required false Description Options for the hint component (for example text).
Name errorMessage Type object Required false Description Options for the error message component.
Name idPrefix Type string Required false Description String to prefix id for each checkbox item if no id is specified on each item. If not passed, fall back to using the name option instead.
Name name Type string Required true Description Name attribute for all checkbox items.
Name items Type array Required true Description Array of checkbox items objects.
Name items[].text Type string Required true Description If `html` is set, this is not required. Text to use within each checkbox item label. If `html` is provided, the `text` argument will be ignored.
Name items[].html Type string Required true Description If `text` is set, this is not required. HTML to use within each checkbox item label. If `html` is provided, the `text` argument will be ignored.
Name items[].id Type string Required false Description Specific id attribute for the checkbox item. If omitted, then component global `idPrefix` option will be applied.
Name items[].name Type string Required false Description Specific name for the checkbox item. If omitted, then component global `name` string will be applied.
Name items[].value Type string Required true Description Value for the checkbox input.
Name items[].divider Type string Required true Description Optional divider text to separate checkbox items, for example the text "or".
Name items[].hint Type object Required false Description Provide hint to each checkbox item.
Name items[].checked Type boolean Required false Description If true, checkbox will be checked.
Name items[].conditional Type boolean Required false Description If true, content provided will be revealed when the item is checked.
Name items[].conditional.html Type string Required false Description Provide content for the conditional reveal.
Name items[].disabled Type boolean Required false Description If true, checkbox will be disabled.
Name items[].attributes Type object Required false Description HTML attributes (for example data attributes) to add to the checkbox input tag.
Name classes Type string Required false Description Classes to add to the checkboxes container.
Name attributes Type object Required false Description HTML attributes (for example data attributes) to add to the anchor tag.
Copy default checkboxes code
{% 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"
    }
  ]
}) }}
Close default checkboxes code

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 hint checkboxes example in new window
Copy hint checkboxes code
<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>
Close hint checkboxes code
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Nunjucks arguments for hint checkboxes
Name Type Required Description
Name fieldset Type object Required false Description Options for the fieldset component (for example legend).
Name hint Type object Required false Description Options for the hint component (for example text).
Name errorMessage Type object Required false Description Options for the error message component.
Name idPrefix Type string Required false Description String to prefix id for each checkbox item if no id is specified on each item. If not passed, fall back to using the name option instead.
Name name Type string Required true Description Name attribute for all checkbox items.
Name items Type array Required true Description Array of checkbox items objects.
Name items[].text Type string Required true Description If `html` is set, this is not required. Text to use within each checkbox item label. If `html` is provided, the `text` argument will be ignored.
Name items[].html Type string Required true Description If `text` is set, this is not required. HTML to use within each checkbox item label. If `html` is provided, the `text` argument will be ignored.
Name items[].id Type string Required false Description Specific id attribute for the checkbox item. If omitted, then component global `idPrefix` option will be applied.
Name items[].name Type string Required false Description Specific name for the checkbox item. If omitted, then component global `name` string will be applied.
Name items[].value Type string Required true Description Value for the checkbox input.
Name items[].divider Type string Required true Description Optional divider text to separate checkbox items, for example the text "or".
Name items[].hint Type object Required false Description Provide hint to each checkbox item.
Name items[].checked Type boolean Required false Description If true, checkbox will be checked.
Name items[].conditional Type boolean Required false Description If true, content provided will be revealed when the item is checked.
Name items[].conditional.html Type string Required false Description Provide content for the conditional reveal.
Name items[].disabled Type boolean Required false Description If true, checkbox will be disabled.
Name items[].attributes Type object Required false Description HTML attributes (for example data attributes) to add to the checkbox input tag.
Name classes Type string Required false Description Classes to add to the checkboxes container.
Name attributes Type object Required false Description HTML attributes (for example data attributes) to add to the anchor tag.
Copy hint checkboxes code
{% 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"
    }
  ]
}) }}
Close hint checkboxes code

Checkbox items with hints

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

Open this items with hints checkboxes example in new window
Copy items with hints checkboxes code
<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>
Close items with hints checkboxes code
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Nunjucks arguments for items with hints checkboxes
Name Type Required Description
Name fieldset Type object Required false Description Options for the fieldset component (for example legend).
Name hint Type object Required false Description Options for the hint component (for example text).
Name errorMessage Type object Required false Description Options for the error message component.
Name idPrefix Type string Required false Description String to prefix id for each checkbox item if no id is specified on each item. If not passed, fall back to using the name option instead.
Name name Type string Required true Description Name attribute for all checkbox items.
Name items Type array Required true Description Array of checkbox items objects.
Name items[].text Type string Required true Description If `html` is set, this is not required. Text to use within each checkbox item label. If `html` is provided, the `text` argument will be ignored.
Name items[].html Type string Required true Description If `text` is set, this is not required. HTML to use within each checkbox item label. If `html` is provided, the `text` argument will be ignored.
Name items[].id Type string Required false Description Specific id attribute for the checkbox item. If omitted, then component global `idPrefix` option will be applied.
Name items[].name Type string Required false Description Specific name for the checkbox item. If omitted, then component global `name` string will be applied.
Name items[].value Type string Required true Description Value for the checkbox input.
Name items[].divider Type string Required true Description Optional divider text to separate checkbox items, for example the text "or".
Name items[].hint Type object Required false Description Provide hint to each checkbox item.
Name items[].checked Type boolean Required false Description If true, checkbox will be checked.
Name items[].conditional Type boolean Required false Description If true, content provided will be revealed when the item is checked.
Name items[].conditional.html Type string Required false Description Provide content for the conditional reveal.
Name items[].disabled Type boolean Required false Description If true, checkbox will be disabled.
Name items[].attributes Type object Required false Description HTML attributes (for example data attributes) to add to the checkbox input tag.
Name classes Type string Required false Description Classes to add to the checkboxes container.
Name attributes Type object Required false Description HTML attributes (for example data attributes) to add to the anchor tag.
Copy items with hints checkboxes code
{% 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"
    }
  ]
}) }}
Close items with hints checkboxes code

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 conditional checkboxes example in new window
Copy conditional checkboxes code
<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>
Close conditional checkboxes code
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Nunjucks arguments for conditional checkboxes
Name Type Required Description
Name fieldset Type object Required false Description Options for the fieldset component (for example legend).
Name hint Type object Required false Description Options for the hint component (for example text).
Name errorMessage Type object Required false Description Options for the error message component.
Name idPrefix Type string Required false Description String to prefix id for each checkbox item if no id is specified on each item. If not passed, fall back to using the name option instead.
Name name Type string Required true Description Name attribute for all checkbox items.
Name items Type array Required true Description Array of checkbox items objects.
Name items[].text Type string Required true Description If `html` is set, this is not required. Text to use within each checkbox item label. If `html` is provided, the `text` argument will be ignored.
Name items[].html Type string Required true Description If `text` is set, this is not required. HTML to use within each checkbox item label. If `html` is provided, the `text` argument will be ignored.
Name items[].id Type string Required false Description Specific id attribute for the checkbox item. If omitted, then component global `idPrefix` option will be applied.
Name items[].name Type string Required false Description Specific name for the checkbox item. If omitted, then component global `name` string will be applied.
Name items[].value Type string Required true Description Value for the checkbox input.
Name items[].divider Type string Required true Description Optional divider text to separate checkbox items, for example the text "or".
Name items[].hint Type object Required false Description Provide hint to each checkbox item.
Name items[].checked Type boolean Required false Description If true, checkbox will be checked.
Name items[].conditional Type boolean Required false Description If true, content provided will be revealed when the item is checked.
Name items[].conditional.html Type string Required false Description Provide content for the conditional reveal.
Name items[].disabled Type boolean Required false Description If true, checkbox will be disabled.
Name items[].attributes Type object Required false Description HTML attributes (for example data attributes) to add to the checkbox input tag.
Name classes Type string Required false Description Classes to add to the checkboxes container.
Name attributes Type object Required false Description HTML attributes (for example data attributes) to add to the anchor tag.
Copy conditional checkboxes code
{% 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
      }
    }
  ]
}) }}
Close conditional checkboxes code

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 error messages checkboxes example in new window
Copy error messages checkboxes code
<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>
Close error messages checkboxes code
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Nunjucks arguments for error messages checkboxes
Name Type Required Description
Name fieldset Type object Required false Description Options for the fieldset component (for example legend).
Name hint Type object Required false Description Options for the hint component (for example text).
Name errorMessage Type object Required false Description Options for the error message component.
Name idPrefix Type string Required false Description String to prefix id for each checkbox item if no id is specified on each item. If not passed, fall back to using the name option instead.
Name name Type string Required true Description Name attribute for all checkbox items.
Name items Type array Required true Description Array of checkbox items objects.
Name items[].text Type string Required true Description If `html` is set, this is not required. Text to use within each checkbox item label. If `html` is provided, the `text` argument will be ignored.
Name items[].html Type string Required true Description If `text` is set, this is not required. HTML to use within each checkbox item label. If `html` is provided, the `text` argument will be ignored.
Name items[].id Type string Required false Description Specific id attribute for the checkbox item. If omitted, then component global `idPrefix` option will be applied.
Name items[].name Type string Required false Description Specific name for the checkbox item. If omitted, then component global `name` string will be applied.
Name items[].value Type string Required true Description Value for the checkbox input.
Name items[].divider Type string Required true Description Optional divider text to separate checkbox items, for example the text "or".
Name items[].hint Type object Required false Description Provide hint to each checkbox item.
Name items[].checked Type boolean Required false Description If true, checkbox will be checked.
Name items[].conditional Type boolean Required false Description If true, content provided will be revealed when the item is checked.
Name items[].conditional.html Type string Required false Description Provide content for the conditional reveal.
Name items[].disabled Type boolean Required false Description If true, checkbox will be disabled.
Name items[].attributes Type object Required false Description HTML attributes (for example data attributes) to add to the checkbox input tag.
Name classes Type string Required false Description Classes to add to the checkboxes container.
Name attributes Type object Required false Description HTML attributes (for example data attributes) to add to the anchor tag.
Copy error messages checkboxes code
{% 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"
    }
  ]
}) }}
Close error messages checkboxes code

Follow:

Research

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

Have you tested this component?

If so, please share your research findings and let us know how it has worked for you. This will help us improve it for everyone.

Before you start, you will need a GitHub account. It's an open forum where we collect feedback.

If you have any questions, you can message us on Slack. You will need a Slack account if you do not have one. Or you can contact us by email.

Updated: April 2020