Form elements - Checkboxes

Use checkboxes to let users select 1 or more options. For example, on a form or as part of a flow.

Open this default checkboxes example in new window
Copy default checkboxes code 
<form>

  <div class="hse-form-group">

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

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

      <div class="hse-checkboxes">

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

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

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

      </div>
    </fieldset>

  </div>

</form>
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 exclusive Type boolean Required false Description If set to `true`, marks this checkbox as the None option in a None of these type behaviour. Unchecking all other checkboxes in the group when None is clicked.
Name exclusiveGroup Type string Required false Description Used in conjunction with `exclusive` - this should be set to a string which groups checkboxes together into a set for use in a None of these scenario.
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 %}

<form>
  {{ checkboxes({
    "idPrefix": "example",
    "name": "example",
    "fieldset": {
      "legend": {
        "text": "How would you like to be contacted?",
        "classes": "hse-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"
      }
    ]
  }) }}
</form>
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 1 option on or off

When not to use checkboxes

Do not use checkboxes 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. The legend is usually a question like; "How would you like to be contacted?".

If you're asking just 1 question per page, 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.

Making labels and legends headings - design-system.service.gov.uk.

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". This will give more context to the question you are asking users.

Open this hint checkboxes example in new window
Copy hint checkboxes code 
<form>

  <div class="hse-form-group">

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

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

      <div class="hse-checkboxes">

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

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

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

      </div>
    </fieldset>

  </div>

</form>
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 exclusive Type boolean Required false Description If set to `true`, marks this checkbox as the None option in a None of these type behaviour. Unchecking all other checkboxes in the group when None is clicked.
Name exclusiveGroup Type string Required false Description Used in conjunction with `exclusive` - this should be set to a string which groups checkboxes together into a set for use in a None of these scenario.
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 %}

<form>
  {{ checkboxes({
    "idPrefix": "contact",
    "name": "contact",
    "fieldset": {
      "legend": {
        "text": "How would you like to be contacted?",
        "classes": "hse-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"
      }
    ]
  }) }}
</form>
Close hint checkboxes code

Checkbox items with hints

You can add a hint to a checkbox item. This is to provide more information about the answers a user can choose from.

Open this items with hints checkboxes example in new window
Copy items with hints checkboxes code 
<form>

  <div class="hse-form-group">

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

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

      <div class="hse-checkboxes">

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

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

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

      </div>
    </fieldset>

  </div>

</form>
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 exclusive Type boolean Required false Description If set to `true`, marks this checkbox as the None option in a None of these type behaviour. Unchecking all other checkboxes in the group when None is clicked.
Name exclusiveGroup Type string Required false Description Used in conjunction with `exclusive` - this should be set to a string which groups checkboxes together into a set for use in a None of these scenario.
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 %}

<form>
  {{ checkboxes({
    idPrefix: "nationality",
    name: "nationality",
    fieldset: {
      legend: {
        text: "What is your nationality?",
        isPageHeading: true,
        classes: "hse-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"
      }
    ]
  }) }}
</form>
Close items with hints checkboxes code

Adding an option for "none"

You can give users the option to say none of the other options apply to them.

This option means users need to actively select "none" rather than leave all the boxes unchecked. This makes sure they do not skip the question by accident.

Remember to start by asking 1 question per page. You might be able to remove the need for a "none" option by asking the user a better question, or by using questions to filter users out beforehand.

Show the "none" option last. Separate it from the other options using a divider, normally the word "or".

Write a label that repeats the key part of the question. For example, for the question; "Do you have any of these symptoms?", say; "No, I do not have any of these symptoms".

Avoid phrases like "none of the above", because this is a visual reference and might be hard for people who use screen readers to understand.

To enable some JavaScript that unchecks all other checkboxes when the user clicks "none", add the data-checkbox-exclusive behaviour to the "none" checkbox.

Open this none option checkboxes example in new window
Copy none option checkboxes code 
<form>

  <div class="hse-form-group">

    <fieldset class="hse-fieldset" aria-describedby="symptoms-hint">
      <legend class="hse-fieldset__legend hse-fieldset__legend--l">
        <h1 class="hse-fieldset__heading">
          Do you have any of these symptoms?
        </h1>
      </legend>

      <span class="hse-hint" id="symptoms-hint">
        Select all the symptoms you have.
      </span>

      <div class="hse-checkboxes">

        <div class="hse-checkboxes__item">
          <input class="hse-checkboxes__input" id="symptoms-1" name="symptoms" type="checkbox" value="sorethroat">
          <label class="hse-label hse-checkboxes__label" for="symptoms-1">
            Sore throat
          </label>
        </div>

        <div class="hse-checkboxes__item">
          <input class="hse-checkboxes__input" id="symptoms-2" name="symptoms" type="checkbox" value="runnynose">
          <label class="hse-label hse-checkboxes__label" for="symptoms-2">
            Runny nose
          </label>
        </div>

        <div class="hse-checkboxes__item">
          <input class="hse-checkboxes__input" id="symptoms-3" name="symptoms" type="checkbox" value="muscleorjointpain">
          <label class="hse-label hse-checkboxes__label" for="symptoms-3">
            Muscle or joint pain
          </label>
        </div>

        <div class="hse-checkboxes__divider">or</div>

        <div class="hse-checkboxes__item">
          <input class="hse-checkboxes__input" id="symptoms-5" name="symptoms" type="checkbox" value="none">
          <label class="hse-label hse-checkboxes__label" for="symptoms-5">
            No, I do not have any of these symptoms
          </label>
        </div>

      </div>
    </fieldset>

  </div>

</form>
Close none option 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 none option 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 exclusive Type boolean Required false Description If set to `true`, marks this checkbox as the None option in a None of these type behaviour. Unchecking all other checkboxes in the group when None is clicked.
Name exclusiveGroup Type string Required false Description Used in conjunction with `exclusive` - this should be set to a string which groups checkboxes together into a set for use in a None of these scenario.
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 none option checkboxes code 
{% from 'checkboxes/macro.njk' import checkboxes %}

<form>
  {{ checkboxes({
    idPrefix: "symptoms",
    name: "symptoms",
    fieldset: {
      legend: {
        text: "Do you have any of these symptoms?",
        isPageHeading: true,
        classes: "hse-fieldset__legend--l"
      }
    },
    hint: {
      text: "Select all the symptoms you have."
    },
    items: [
      {
        value: "sorethroat",
        text: "Sore throat",
        exclusiveGroup: "symptoms-list"
      },
      {
        value: "runnynose",
        text: "Runny nose",
        exclusiveGroup: "symptoms-list"
      },
      {
        value: "muscleorjointpain",
        text: "Muscle or joint pain",
        exclusiveGroup: "symptoms-list"
      },
      {
        divider: "or"
      },
      {
        value: "none",
        text: "No, I do not have any of these symptoms",
        exclusive: true,
        exclusiveGroup: "symptoms-list"
      }
    ]
  }) }}
</form>
Close none option checkboxes code

If JavaScript is unavailable, and a user selects both the "none" checkbox and another checkbox, display an error message.

Error messages

Error messages should be styled like this.

Open this error messages checkboxes example in new window
Copy error messages checkboxes code 
<form>

  <div class="hse-form-group hse-form-group--error">

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

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

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

      <div class="hse-checkboxes">

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

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

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

      </div>
    </fieldset>

  </div>

</form>
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 exclusive Type boolean Required false Description If set to `true`, marks this checkbox as the None option in a None of these type behaviour. Unchecking all other checkboxes in the group when None is clicked.
Name exclusiveGroup Type string Required false Description Used in conjunction with `exclusive` - this should be set to a string which groups checkboxes together into a set for use in a None of these scenario.
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 %}

<form>
  {{ checkboxes({
    "idPrefix": "contact",
    "name": "contact",
    "fieldset": {
      "legend": {
        "text": "How would you like to be contacted?",
        "classes": "hse-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"
      }
    ]
  }) }}
</form>
Close error messages checkboxes code

Updated: September 2023