Skip to main content

This is an internal development app.

To learn how to design and build digital services, visit the design system in the NHS digital service manual for guidance and examples.

Checkboxes

These examples are used for automated tests and may not follow service manual best practice.

Checkboxes default

Open this example in a new tab: Checkboxes default

How do you want to be contacted about this?

Select all options that are relevant to you
Code

Markup

<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 do you want to be contacted about this?
    </h1>
  </legend>
  <div class="nhsuk-hint" id="example-hint">
    Select all options that are relevant to you
  </div>
  <div class="nhsuk-checkboxes" data-module="nhsuk-checkboxes">
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="example" name="example" type="checkbox" value="email">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="example">
        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">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="example-3">
        Text message
      </label>
    </div>
  </div>
</fieldset>
</div>

Macro

{% from "checkboxes/macro.njk" import checkboxes -%}

{{ checkboxes({
  fieldset: {
    legend: {
      text: "How do you want to be contacted about this?",
      size: "l",
      isPageHeading: true
    }
  },
  hint: {
    text: "Select all options that are relevant to you"
  },
  name: "example",
  items: [
    {
      value: "email",
      text: "Email"
    },
    {
      value: "phone",
      text: "Phone"
    },
    {
      value: "text",
      text: "Text message"
    }
  ]
}) }}

Checkboxes small default

Open this example in a new tab: Checkboxes small default

How do you want to be contacted about this?

Select all options that are relevant to you
Code

Markup

<div class="nhsuk-form-group">
  <fieldset class="nhsuk-fieldset" aria-describedby="example-hint">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--m">
    <h1 class="nhsuk-fieldset__heading">
      How do you want to be contacted about this?
    </h1>
  </legend>
  <div class="nhsuk-hint" id="example-hint">
    Select all options that are relevant to you
  </div>
  <div class="nhsuk-checkboxes nhsuk-checkboxes--small" data-module="nhsuk-checkboxes">
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="example" name="example" type="checkbox" value="email">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="example">
        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">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="example-3">
        Text message
      </label>
    </div>
  </div>
</fieldset>
</div>

Macro

{% from "checkboxes/macro.njk" import checkboxes -%}

{{ checkboxes({
  fieldset: {
    legend: {
      text: "How do you want to be contacted about this?",
      size: "m",
      isPageHeading: true
    }
  },
  hint: {
    text: "Select all options that are relevant to you"
  },
  name: "example",
  items: [
    {
      value: "email",
      text: "Email"
    },
    {
      value: "phone",
      text: "Phone"
    },
    {
      value: "text",
      text: "Text message"
    }
  ],
  small: true
}) }}

Checkboxes with size S legend

Open this example in a new tab: Checkboxes with size S legend

How do you want to be contacted about this?
Select all options that are relevant to you
Code

Markup

<div class="nhsuk-form-group">
  <fieldset class="nhsuk-fieldset" aria-describedby="custom-size-hint">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--s">
    How do you want to be contacted about this?
  </legend>
  <div class="nhsuk-hint" id="custom-size-hint">
    Select all options that are relevant to you
  </div>
  <div class="nhsuk-checkboxes" data-module="nhsuk-checkboxes">
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="custom-size" name="example" type="checkbox" value="email">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="custom-size">
        Email
      </label>
    </div>
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="custom-size-2" name="example" type="checkbox" value="phone">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="custom-size-2">
        Phone
      </label>
    </div>
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="custom-size-3" name="example" type="checkbox" value="text message">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="custom-size-3">
        Text message
      </label>
    </div>
  </div>
</fieldset>
</div>

Macro

{% from "checkboxes/macro.njk" import checkboxes -%}

{{ checkboxes({
  fieldset: {
    legend: {
      text: "How do you want to be contacted about this?",
      size: "s"
    }
  },
  hint: {
    text: "Select all options that are relevant to you"
  },
  idPrefix: "custom-size",
  name: "example",
  items: [
    {
      value: "email",
      text: "Email"
    },
    {
      value: "phone",
      text: "Phone"
    },
    {
      value: "text message",
      text: "Text message"
    }
  ]
}) }}

Checkboxes with size M legend

Open this example in a new tab: Checkboxes with size M legend

How do you want to be contacted about this?
Select all options that are relevant to you
Code

Markup

<div class="nhsuk-form-group">
  <fieldset class="nhsuk-fieldset" aria-describedby="custom-size-hint">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--m">
    How do you want to be contacted about this?
  </legend>
  <div class="nhsuk-hint" id="custom-size-hint">
    Select all options that are relevant to you
  </div>
  <div class="nhsuk-checkboxes" data-module="nhsuk-checkboxes">
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="custom-size" name="example" type="checkbox" value="email">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="custom-size">
        Email
      </label>
    </div>
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="custom-size-2" name="example" type="checkbox" value="phone">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="custom-size-2">
        Phone
      </label>
    </div>
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="custom-size-3" name="example" type="checkbox" value="text message">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="custom-size-3">
        Text message
      </label>
    </div>
  </div>
</fieldset>
</div>

Macro

{% from "checkboxes/macro.njk" import checkboxes -%}

{{ checkboxes({
  fieldset: {
    legend: {
      text: "How do you want to be contacted about this?",
      size: "m"
    }
  },
  hint: {
    text: "Select all options that are relevant to you"
  },
  idPrefix: "custom-size",
  name: "example",
  items: [
    {
      value: "email",
      text: "Email"
    },
    {
      value: "phone",
      text: "Phone"
    },
    {
      value: "text message",
      text: "Text message"
    }
  ]
}) }}

Checkboxes with size L legend

Open this example in a new tab: Checkboxes with size L legend

How do you want to be contacted about this?
Select all options that are relevant to you
Code

Markup

<div class="nhsuk-form-group">
  <fieldset class="nhsuk-fieldset" aria-describedby="custom-size-hint">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--l">
    How do you want to be contacted about this?
  </legend>
  <div class="nhsuk-hint" id="custom-size-hint">
    Select all options that are relevant to you
  </div>
  <div class="nhsuk-checkboxes" data-module="nhsuk-checkboxes">
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="custom-size" name="example" type="checkbox" value="email">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="custom-size">
        Email
      </label>
    </div>
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="custom-size-2" name="example" type="checkbox" value="phone">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="custom-size-2">
        Phone
      </label>
    </div>
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="custom-size-3" name="example" type="checkbox" value="text message">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="custom-size-3">
        Text message
      </label>
    </div>
  </div>
</fieldset>
</div>

Macro

{% from "checkboxes/macro.njk" import checkboxes -%}

{{ checkboxes({
  fieldset: {
    legend: {
      text: "How do you want to be contacted about this?",
      size: "l"
    }
  },
  hint: {
    text: "Select all options that are relevant to you"
  },
  idPrefix: "custom-size",
  name: "example",
  items: [
    {
      value: "email",
      text: "Email"
    },
    {
      value: "phone",
      text: "Phone"
    },
    {
      value: "text message",
      text: "Text message"
    }
  ]
}) }}

Checkboxes with size XL legend

Open this example in a new tab: Checkboxes with size XL legend

How do you want to be contacted about this?
Select all options that are relevant to you
Code

Markup

<div class="nhsuk-form-group">
  <fieldset class="nhsuk-fieldset" aria-describedby="custom-size-hint">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--xl">
    How do you want to be contacted about this?
  </legend>
  <div class="nhsuk-hint" id="custom-size-hint">
    Select all options that are relevant to you
  </div>
  <div class="nhsuk-checkboxes" data-module="nhsuk-checkboxes">
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="custom-size" name="example" type="checkbox" value="email">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="custom-size">
        Email
      </label>
    </div>
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="custom-size-2" name="example" type="checkbox" value="phone">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="custom-size-2">
        Phone
      </label>
    </div>
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="custom-size-3" name="example" type="checkbox" value="text message">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="custom-size-3">
        Text message
      </label>
    </div>
  </div>
</fieldset>
</div>

Macro

{% from "checkboxes/macro.njk" import checkboxes -%}

{{ checkboxes({
  fieldset: {
    legend: {
      text: "How do you want to be contacted about this?",
      size: "xl"
    }
  },
  hint: {
    text: "Select all options that are relevant to you"
  },
  idPrefix: "custom-size",
  name: "example",
  items: [
    {
      value: "email",
      text: "Email"
    },
    {
      value: "phone",
      text: "Phone"
    },
    {
      value: "text message",
      text: "Text message"
    }
  ]
}) }}

Checkboxes with conditional content

Open this example in a new tab: Checkboxes with conditional content

How do you want to be contacted about this?

Select all options that are relevant to you
Code

Markup

<div class="nhsuk-form-group">
  <fieldset class="nhsuk-fieldset" aria-describedby="conditional-hint">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--l">
    <h1 class="nhsuk-fieldset__heading">
      How do you want to be contacted about this?
    </h1>
  </legend>
  <div class="nhsuk-hint" id="conditional-hint">
    Select all options that are relevant to you
  </div>
  <div class="nhsuk-checkboxes" data-module="nhsuk-checkboxes">
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="conditional" name="contact" type="checkbox" value="email" data-aria-controls="conditional-conditional">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="conditional">
        Email
      </label>
    </div>
    <div class="nhsuk-checkboxes__conditional nhsuk-checkboxes__conditional--hidden" id="conditional-conditional">
      <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" spellcheck="false">
</div>
    </div>
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="conditional-2" name="contact" type="checkbox" value="phone" data-aria-controls="conditional-conditional-2">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="conditional-2">
        Phone
      </label>
    </div>
    <div class="nhsuk-checkboxes__conditional nhsuk-checkboxes__conditional--hidden" id="conditional-conditional-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="tel">
</div>
    </div>
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="conditional-3" name="contact" type="checkbox" value="text" data-aria-controls="conditional-conditional-3">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="conditional-3">
        Text message
      </label>
    </div>
    <div class="nhsuk-checkboxes__conditional nhsuk-checkboxes__conditional--hidden" id="conditional-conditional-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="tel">
</div>
    </div>
  </div>
</fieldset>
</div>

Macro

{% from "checkboxes/macro.njk" import checkboxes -%}

{{ checkboxes({
  fieldset: {
    legend: {
      text: "How do you want to be contacted about this?",
      size: "l",
      isPageHeading: true
    }
  },
  hint: {
    text: "Select all options that are relevant to you"
  },
  idPrefix: "conditional",
  name: "contact",
  items: [
    {
      value: "email",
      text: "Email",
      conditional: {
        html: '<div class="nhsuk-form-group">\n  <label class="nhsuk-label" for="email">\n    Email address\n  </label>\n  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="email" name="email" type="text" spellcheck="false">\n</div>\n'
      }
    },
    {
      value: "phone",
      text: "Phone",
      conditional: {
        html: '<div class="nhsuk-form-group">\n  <label class="nhsuk-label" for="phone">\n    Phone number\n  </label>\n  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="phone" name="phone" type="tel">\n</div>\n'
      }
    },
    {
      value: "text",
      text: "Text message",
      conditional: {
        html: '<div class="nhsuk-form-group">\n  <label class="nhsuk-label" for="mobile">\n    Mobile phone number\n  </label>\n  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="mobile" name="mobile" type="tel">\n</div>\n'
      }
    }
  ]
}) }}

Checkboxes small with conditional content

Open this example in a new tab: Checkboxes small with conditional content

How do you want to be contacted about this?

Select all options that are relevant to you
Code

Markup

<div class="nhsuk-form-group">
  <fieldset class="nhsuk-fieldset" aria-describedby="conditional-hint">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--m">
    <h1 class="nhsuk-fieldset__heading">
      How do you want to be contacted about this?
    </h1>
  </legend>
  <div class="nhsuk-hint" id="conditional-hint">
    Select all options that are relevant to you
  </div>
  <div class="nhsuk-checkboxes nhsuk-checkboxes--small" data-module="nhsuk-checkboxes">
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="conditional" name="contact" type="checkbox" value="email" data-aria-controls="conditional-conditional">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="conditional">
        Email
      </label>
    </div>
    <div class="nhsuk-checkboxes__conditional nhsuk-checkboxes__conditional--hidden" id="conditional-conditional">
      <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" spellcheck="false">
</div>
    </div>
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="conditional-2" name="contact" type="checkbox" value="phone" data-aria-controls="conditional-conditional-2">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="conditional-2">
        Phone
      </label>
    </div>
    <div class="nhsuk-checkboxes__conditional nhsuk-checkboxes__conditional--hidden" id="conditional-conditional-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="tel">
</div>
    </div>
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="conditional-3" name="contact" type="checkbox" value="text" data-aria-controls="conditional-conditional-3">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="conditional-3">
        Text message
      </label>
    </div>
    <div class="nhsuk-checkboxes__conditional nhsuk-checkboxes__conditional--hidden" id="conditional-conditional-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="tel">
</div>
    </div>
  </div>
</fieldset>
</div>

Macro

{% from "checkboxes/macro.njk" import checkboxes -%}

{{ checkboxes({
  fieldset: {
    legend: {
      text: "How do you want to be contacted about this?",
      size: "m",
      isPageHeading: true
    }
  },
  hint: {
    text: "Select all options that are relevant to you"
  },
  idPrefix: "conditional",
  name: "contact",
  items: [
    {
      value: "email",
      text: "Email",
      conditional: {
        html: '<div class="nhsuk-form-group">\n  <label class="nhsuk-label" for="email">\n    Email address\n  </label>\n  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="email" name="email" type="text" spellcheck="false">\n</div>\n'
      }
    },
    {
      value: "phone",
      text: "Phone",
      conditional: {
        html: '<div class="nhsuk-form-group">\n  <label class="nhsuk-label" for="phone">\n    Phone number\n  </label>\n  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="phone" name="phone" type="tel">\n</div>\n'
      }
    },
    {
      value: "text",
      text: "Text message",
      conditional: {
        html: '<div class="nhsuk-form-group">\n  <label class="nhsuk-label" for="mobile">\n    Mobile phone number\n  </label>\n  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="mobile" name="mobile" type="tel">\n</div>\n'
      }
    }
  ],
  small: true
}) }}

Checkboxes with conditional content, error message

Open this example in a new tab: Checkboxes with conditional content, error message

How do you want to be contacted about this?

Select all options that are relevant to you

Error: Select how you like to be contacted

Code

Markup

<div class="nhsuk-form-group nhsuk-form-group--error">
  <fieldset class="nhsuk-fieldset" aria-describedby="conditional-hint conditional-error">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--l">
    <h1 class="nhsuk-fieldset__heading">
      How do you want to be contacted about this?
    </h1>
  </legend>
  <div class="nhsuk-hint" id="conditional-hint">
    Select all options that are relevant to you
  </div>
  <p class="nhsuk-error-message" id="conditional-error">
    <span class="nhsuk-u-visually-hidden">Error:</span> Select how you like to be contacted
  </p>
  <div class="nhsuk-checkboxes nhsuk-checkboxes--error" data-module="nhsuk-checkboxes">
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="conditional" name="contact" type="checkbox" value="email" data-aria-controls="conditional-conditional">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="conditional">
        Email
      </label>
    </div>
    <div class="nhsuk-checkboxes__conditional nhsuk-checkboxes__conditional--hidden" id="conditional-conditional">
      <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" spellcheck="false">
</div>
    </div>
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="conditional-2" name="contact" type="checkbox" value="phone" data-aria-controls="conditional-conditional-2">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="conditional-2">
        Phone
      </label>
    </div>
    <div class="nhsuk-checkboxes__conditional nhsuk-checkboxes__conditional--hidden" id="conditional-conditional-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="tel">
</div>
    </div>
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="conditional-3" name="contact" type="checkbox" value="text" data-aria-controls="conditional-conditional-3">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="conditional-3">
        Text message
      </label>
    </div>
    <div class="nhsuk-checkboxes__conditional nhsuk-checkboxes__conditional--hidden" id="conditional-conditional-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="tel">
</div>
    </div>
  </div>
</fieldset>
</div>

Macro

{% from "checkboxes/macro.njk" import checkboxes -%}

{{ checkboxes({
  fieldset: {
    legend: {
      text: "How do you want to be contacted about this?",
      size: "l",
      isPageHeading: true
    }
  },
  hint: {
    text: "Select all options that are relevant to you"
  },
  errorMessage: {
    text: "Select how you like to be contacted"
  },
  idPrefix: "conditional",
  name: "contact",
  items: [
    {
      value: "email",
      text: "Email",
      conditional: {
        html: '<div class="nhsuk-form-group">\n  <label class="nhsuk-label" for="email">\n    Email address\n  </label>\n  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="email" name="email" type="text" spellcheck="false">\n</div>\n'
      }
    },
    {
      value: "phone",
      text: "Phone",
      conditional: {
        html: '<div class="nhsuk-form-group">\n  <label class="nhsuk-label" for="phone">\n    Phone number\n  </label>\n  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="phone" name="phone" type="tel">\n</div>\n'
      }
    },
    {
      value: "text",
      text: "Text message",
      conditional: {
        html: '<div class="nhsuk-form-group">\n  <label class="nhsuk-label" for="mobile">\n    Mobile phone number\n  </label>\n  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="mobile" name="mobile" type="tel">\n</div>\n'
      }
    }
  ]
}) }}

Checkboxes small with conditional content, error message

Open this example in a new tab: Checkboxes small with conditional content, error message

How do you want to be contacted about this?

Select all options that are relevant to you

Error: Select how you like to be contacted

Code

Markup

<div class="nhsuk-form-group nhsuk-form-group--error">
  <fieldset class="nhsuk-fieldset" aria-describedby="conditional-hint conditional-error">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--m">
    <h1 class="nhsuk-fieldset__heading">
      How do you want to be contacted about this?
    </h1>
  </legend>
  <div class="nhsuk-hint" id="conditional-hint">
    Select all options that are relevant to you
  </div>
  <p class="nhsuk-error-message" id="conditional-error">
    <span class="nhsuk-u-visually-hidden">Error:</span> Select how you like to be contacted
  </p>
  <div class="nhsuk-checkboxes nhsuk-checkboxes--small nhsuk-checkboxes--error" data-module="nhsuk-checkboxes">
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="conditional" name="contact" type="checkbox" value="email" data-aria-controls="conditional-conditional">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="conditional">
        Email
      </label>
    </div>
    <div class="nhsuk-checkboxes__conditional nhsuk-checkboxes__conditional--hidden" id="conditional-conditional">
      <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" spellcheck="false">
</div>
    </div>
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="conditional-2" name="contact" type="checkbox" value="phone" data-aria-controls="conditional-conditional-2">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="conditional-2">
        Phone
      </label>
    </div>
    <div class="nhsuk-checkboxes__conditional nhsuk-checkboxes__conditional--hidden" id="conditional-conditional-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="tel">
</div>
    </div>
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="conditional-3" name="contact" type="checkbox" value="text" data-aria-controls="conditional-conditional-3">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="conditional-3">
        Text message
      </label>
    </div>
    <div class="nhsuk-checkboxes__conditional nhsuk-checkboxes__conditional--hidden" id="conditional-conditional-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="tel">
</div>
    </div>
  </div>
</fieldset>
</div>

Macro

{% from "checkboxes/macro.njk" import checkboxes -%}

{{ checkboxes({
  fieldset: {
    legend: {
      text: "How do you want to be contacted about this?",
      size: "m",
      isPageHeading: true
    }
  },
  hint: {
    text: "Select all options that are relevant to you"
  },
  errorMessage: {
    text: "Select how you like to be contacted"
  },
  idPrefix: "conditional",
  name: "contact",
  items: [
    {
      value: "email",
      text: "Email",
      conditional: {
        html: '<div class="nhsuk-form-group">\n  <label class="nhsuk-label" for="email">\n    Email address\n  </label>\n  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="email" name="email" type="text" spellcheck="false">\n</div>\n'
      }
    },
    {
      value: "phone",
      text: "Phone",
      conditional: {
        html: '<div class="nhsuk-form-group">\n  <label class="nhsuk-label" for="phone">\n    Phone number\n  </label>\n  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="phone" name="phone" type="tel">\n</div>\n'
      }
    },
    {
      value: "text",
      text: "Text message",
      conditional: {
        html: '<div class="nhsuk-form-group">\n  <label class="nhsuk-label" for="mobile">\n    Mobile phone number\n  </label>\n  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="mobile" name="mobile" type="tel">\n</div>\n'
      }
    }
  ],
  small: true
}) }}

Checkboxes with conditional content, error message (nested)

Open this example in a new tab: Checkboxes with conditional content, error message (nested)

How do you want to be contacted about this?

Select all options that are relevant to you

Error: Enter your phone number

Code

Markup

<div class="nhsuk-form-group">
  <fieldset class="nhsuk-fieldset" aria-describedby="conditional-hint">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--l">
    <h1 class="nhsuk-fieldset__heading">
      How do you want to be contacted about this?
    </h1>
  </legend>
  <div class="nhsuk-hint" id="conditional-hint">
    Select all options that are relevant to you
  </div>
  <div class="nhsuk-checkboxes" data-module="nhsuk-checkboxes">
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="conditional" name="example" type="checkbox" value="email" data-aria-controls="conditional-conditional">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="conditional">
        Email
      </label>
    </div>
    <div class="nhsuk-checkboxes__conditional nhsuk-checkboxes__conditional--hidden" id="conditional-conditional">
      <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" spellcheck="false">
</div>
    </div>
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="conditional-2" name="example" type="checkbox" value="phone" checked data-aria-controls="conditional-conditional-2">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="conditional-2">
        Phone
      </label>
    </div>
    <div class="nhsuk-checkboxes__conditional" id="conditional-conditional-2">
      <div class="nhsuk-form-group nhsuk-form-group--error">
  <label class="nhsuk-label" for="phone">
    Phone number
  </label>
  <p class="nhsuk-error-message" id="phone-error">
    <span class="nhsuk-u-visually-hidden">Error:</span> Enter your phone number
  </p>
  <input class="nhsuk-input nhsuk-input--error nhsuk-u-width-two-thirds" id="phone" name="phone" type="tel" aria-describedby="phone-error">
</div>
    </div>
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="conditional-3" name="example" type="checkbox" value="text" data-aria-controls="conditional-conditional-3">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="conditional-3">
        Text message
      </label>
    </div>
    <div class="nhsuk-checkboxes__conditional nhsuk-checkboxes__conditional--hidden" id="conditional-conditional-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="tel">
</div>
    </div>
  </div>
</fieldset>
</div>

Macro

{% from "checkboxes/macro.njk" import checkboxes -%}

{{ checkboxes({
  fieldset: {
    legend: {
      text: "How do you want to be contacted about this?",
      size: "l",
      isPageHeading: true
    }
  },
  hint: {
    text: "Select all options that are relevant to you"
  },
  idPrefix: "conditional",
  name: "example",
  values: ["phone"],
  items: [
    {
      value: "email",
      text: "Email",
      conditional: {
        html: '<div class="nhsuk-form-group">\n  <label class="nhsuk-label" for="email">\n    Email address\n  </label>\n  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="email" name="email" type="text" spellcheck="false">\n</div>\n'
      }
    },
    {
      value: "phone",
      text: "Phone",
      conditional: {
        html: '<div class="nhsuk-form-group nhsuk-form-group--error">\n  <label class="nhsuk-label" for="phone">\n    Phone number\n  </label>\n  <p class="nhsuk-error-message" id="phone-error">\n    <span class="nhsuk-u-visually-hidden">Error:</span> Enter your phone number\n  </p>\n  <input class="nhsuk-input nhsuk-input--error nhsuk-u-width-two-thirds" id="phone" name="phone" type="tel" aria-describedby="phone-error">\n</div>\n'
      }
    },
    {
      value: "text",
      text: "Text message",
      conditional: {
        html: '<div class="nhsuk-form-group">\n  <label class="nhsuk-label" for="mobile">\n    Mobile phone number\n  </label>\n  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="mobile" name="mobile" type="tel">\n</div>\n'
      }
    }
  ]
}) }}

Checkboxes small with conditional content, error message (nested)

Open this example in a new tab: Checkboxes small with conditional content, error message (nested)

How do you want to be contacted about this?

Select all options that are relevant to you

Error: Enter your phone number

Code

Markup

<div class="nhsuk-form-group">
  <fieldset class="nhsuk-fieldset" aria-describedby="conditional-hint">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--m">
    <h1 class="nhsuk-fieldset__heading">
      How do you want to be contacted about this?
    </h1>
  </legend>
  <div class="nhsuk-hint" id="conditional-hint">
    Select all options that are relevant to you
  </div>
  <div class="nhsuk-checkboxes nhsuk-checkboxes--small" data-module="nhsuk-checkboxes">
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="conditional" name="example" type="checkbox" value="email" data-aria-controls="conditional-conditional">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="conditional">
        Email
      </label>
    </div>
    <div class="nhsuk-checkboxes__conditional nhsuk-checkboxes__conditional--hidden" id="conditional-conditional">
      <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" spellcheck="false">
</div>
    </div>
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="conditional-2" name="example" type="checkbox" value="phone" checked data-aria-controls="conditional-conditional-2">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="conditional-2">
        Phone
      </label>
    </div>
    <div class="nhsuk-checkboxes__conditional" id="conditional-conditional-2">
      <div class="nhsuk-form-group nhsuk-form-group--error">
  <label class="nhsuk-label" for="phone">
    Phone number
  </label>
  <p class="nhsuk-error-message" id="phone-error">
    <span class="nhsuk-u-visually-hidden">Error:</span> Enter your phone number
  </p>
  <input class="nhsuk-input nhsuk-input--error nhsuk-u-width-two-thirds" id="phone" name="phone" type="tel" aria-describedby="phone-error">
</div>
    </div>
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="conditional-3" name="example" type="checkbox" value="text" data-aria-controls="conditional-conditional-3">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="conditional-3">
        Text message
      </label>
    </div>
    <div class="nhsuk-checkboxes__conditional nhsuk-checkboxes__conditional--hidden" id="conditional-conditional-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="tel">
</div>
    </div>
  </div>
</fieldset>
</div>

Macro

{% from "checkboxes/macro.njk" import checkboxes -%}

{{ checkboxes({
  fieldset: {
    legend: {
      text: "How do you want to be contacted about this?",
      size: "m",
      isPageHeading: true
    }
  },
  hint: {
    text: "Select all options that are relevant to you"
  },
  idPrefix: "conditional",
  name: "example",
  values: ["phone"],
  items: [
    {
      value: "email",
      text: "Email",
      conditional: {
        html: '<div class="nhsuk-form-group">\n  <label class="nhsuk-label" for="email">\n    Email address\n  </label>\n  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="email" name="email" type="text" spellcheck="false">\n</div>\n'
      }
    },
    {
      value: "phone",
      text: "Phone",
      conditional: {
        html: '<div class="nhsuk-form-group nhsuk-form-group--error">\n  <label class="nhsuk-label" for="phone">\n    Phone number\n  </label>\n  <p class="nhsuk-error-message" id="phone-error">\n    <span class="nhsuk-u-visually-hidden">Error:</span> Enter your phone number\n  </p>\n  <input class="nhsuk-input nhsuk-input--error nhsuk-u-width-two-thirds" id="phone" name="phone" type="tel" aria-describedby="phone-error">\n</div>\n'
      }
    },
    {
      value: "text",
      text: "Text message",
      conditional: {
        html: '<div class="nhsuk-form-group">\n  <label class="nhsuk-label" for="mobile">\n    Mobile phone number\n  </label>\n  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="mobile" name="mobile" type="tel">\n</div>\n'
      }
    }
  ],
  small: true
}) }}

Checkboxes with disabled item

Open this example in a new tab: Checkboxes with disabled item

Code

Markup

<div class="nhsuk-form-group">
  <div class="nhsuk-checkboxes" id="with-disabled-item" data-module="nhsuk-checkboxes">
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="colours" name="colours" type="checkbox" value="red">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="colours">
        Red
      </label>
    </div>
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="colours-2" name="colours" type="checkbox" value="green">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="colours-2">
        Green
      </label>
    </div>
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="colours-3" name="colours" type="checkbox" value="blue" disabled>
      <label class="nhsuk-label nhsuk-checkboxes__label" for="colours-3">
        Blue
      </label>
    </div>
  </div>
</div>

Macro

{% from "checkboxes/macro.njk" import checkboxes -%}

{{ checkboxes({
  fieldset: null,
  id: "with-disabled-item",
  name: "colours",
  items: [
    {
      value: "red",
      text: "Red"
    },
    {
      value: "green",
      text: "Green"
    },
    {
      value: "blue",
      text: "Blue",
      disabled: true
    }
  ]
}) }}

Checkboxes small with disabled item

Open this example in a new tab: Checkboxes small with disabled item

Code

Markup

<div class="nhsuk-form-group">
  <div class="nhsuk-checkboxes nhsuk-checkboxes--small" id="with-disabled-item" data-module="nhsuk-checkboxes">
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="colours" name="colours" type="checkbox" value="red">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="colours">
        Red
      </label>
    </div>
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="colours-2" name="colours" type="checkbox" value="green">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="colours-2">
        Green
      </label>
    </div>
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="colours-3" name="colours" type="checkbox" value="blue" disabled>
      <label class="nhsuk-label nhsuk-checkboxes__label" for="colours-3">
        Blue
      </label>
    </div>
  </div>
</div>

Macro

{% from "checkboxes/macro.njk" import checkboxes -%}

{{ checkboxes({
  fieldset: null,
  id: "with-disabled-item",
  name: "colours",
  items: [
    {
      value: "red",
      text: "Red"
    },
    {
      value: "green",
      text: "Green"
    },
    {
      value: "blue",
      text: "Blue",
      disabled: true
    }
  ],
  small: true
}) }}

Checkboxes with error message

Open this example in a new tab: Checkboxes with error message

How do you want to be contacted about this?

Error: Select how you want to be contacted

Code

Markup

<div class="nhsuk-form-group nhsuk-form-group--error">
  <fieldset class="nhsuk-fieldset" aria-describedby="with-error-message-error">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--l">
    <h1 class="nhsuk-fieldset__heading">
      How do you want to be contacted about this?
    </h1>
  </legend>
  <p class="nhsuk-error-message" id="with-error-message-error">
    <span class="nhsuk-u-visually-hidden">Error:</span> Select how you want to be contacted
  </p>
  <div class="nhsuk-checkboxes nhsuk-checkboxes--error" data-module="nhsuk-checkboxes">
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="with-error-message" name="example" type="checkbox" value="email">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="with-error-message">
        Email
      </label>
    </div>
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="with-error-message-2" name="example" type="checkbox" value="phone">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="with-error-message-2">
        Phone
      </label>
    </div>
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="with-error-message-3" name="example" type="checkbox" value="text message">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="with-error-message-3">
        Text message
      </label>
    </div>
  </div>
</fieldset>
</div>

Macro

{% from "checkboxes/macro.njk" import checkboxes -%}

{{ checkboxes({
  fieldset: {
    legend: {
      text: "How do you want to be contacted about this?",
      size: "l",
      isPageHeading: true
    }
  },
  errorMessage: {
    text: "Select how you want to be contacted"
  },
  idPrefix: "with-error-message",
  name: "example",
  items: [
    {
      value: "email",
      text: "Email"
    },
    {
      value: "phone",
      text: "Phone"
    },
    {
      value: "text message",
      text: "Text message"
    }
  ]
}) }}

Checkboxes small with error message

Open this example in a new tab: Checkboxes small with error message

How do you want to be contacted about this?

Error: Select how you want to be contacted

Code

Markup

<div class="nhsuk-form-group nhsuk-form-group--error">
  <fieldset class="nhsuk-fieldset" aria-describedby="with-error-message-error">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--m">
    <h1 class="nhsuk-fieldset__heading">
      How do you want to be contacted about this?
    </h1>
  </legend>
  <p class="nhsuk-error-message" id="with-error-message-error">
    <span class="nhsuk-u-visually-hidden">Error:</span> Select how you want to be contacted
  </p>
  <div class="nhsuk-checkboxes nhsuk-checkboxes--small nhsuk-checkboxes--error" data-module="nhsuk-checkboxes">
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="with-error-message" name="example" type="checkbox" value="email">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="with-error-message">
        Email
      </label>
    </div>
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="with-error-message-2" name="example" type="checkbox" value="phone">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="with-error-message-2">
        Phone
      </label>
    </div>
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="with-error-message-3" name="example" type="checkbox" value="text message">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="with-error-message-3">
        Text message
      </label>
    </div>
  </div>
</fieldset>
</div>

Macro

{% from "checkboxes/macro.njk" import checkboxes -%}

{{ checkboxes({
  fieldset: {
    legend: {
      text: "How do you want to be contacted about this?",
      size: "m",
      isPageHeading: true
    }
  },
  errorMessage: {
    text: "Select how you want to be contacted"
  },
  idPrefix: "with-error-message",
  name: "example",
  items: [
    {
      value: "email",
      text: "Email"
    },
    {
      value: "phone",
      text: "Phone"
    },
    {
      value: "text message",
      text: "Text message"
    }
  ],
  small: true
}) }}

Checkboxes with hint

Open this example in a new tab: Checkboxes with hint

What is your nationality?

If you have dual nationality, select all options that are relevant to you
Code

Markup

<div class="nhsuk-form-group">
  <fieldset class="nhsuk-fieldset" aria-describedby="with-hint-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="with-hint-hint">
    If you have dual nationality, select all options that are relevant to you
  </div>
  <div class="nhsuk-checkboxes" data-module="nhsuk-checkboxes">
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="with-hint" name="example" type="checkbox" value="british">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="with-hint">
        British
      </label>
    </div>
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="with-hint-2" name="example" type="checkbox" value="irish">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="with-hint-2">
        Irish
      </label>
    </div>
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="with-hint-3" name="example" type="checkbox" value="other">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="with-hint-3">
        Citizen of another country
      </label>
    </div>
  </div>
</fieldset>
</div>

Macro

{% from "checkboxes/macro.njk" import checkboxes -%}

{{ checkboxes({
  fieldset: {
    legend: {
      text: "What is your nationality?",
      size: "l",
      isPageHeading: true
    }
  },
  hint: {
    text: "If you have dual nationality, select all options that are relevant to you"
  },
  idPrefix: "with-hint",
  name: "example",
  items: [
    {
      value: "british",
      text: "British"
    },
    {
      value: "irish",
      text: "Irish"
    },
    {
      value: "other",
      text: "Citizen of another country"
    }
  ]
}) }}

Checkboxes small with hint

Open this example in a new tab: Checkboxes small with hint

What is your nationality?

If you have dual nationality, select all options that are relevant to you
Code

Markup

<div class="nhsuk-form-group">
  <fieldset class="nhsuk-fieldset" aria-describedby="with-hint-hint">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--m">
    <h1 class="nhsuk-fieldset__heading">
      What is your nationality?
    </h1>
  </legend>
  <div class="nhsuk-hint" id="with-hint-hint">
    If you have dual nationality, select all options that are relevant to you
  </div>
  <div class="nhsuk-checkboxes nhsuk-checkboxes--small" data-module="nhsuk-checkboxes">
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="with-hint" name="example" type="checkbox" value="british">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="with-hint">
        British
      </label>
    </div>
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="with-hint-2" name="example" type="checkbox" value="irish">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="with-hint-2">
        Irish
      </label>
    </div>
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="with-hint-3" name="example" type="checkbox" value="other">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="with-hint-3">
        Citizen of another country
      </label>
    </div>
  </div>
</fieldset>
</div>

Macro

{% from "checkboxes/macro.njk" import checkboxes -%}

{{ checkboxes({
  fieldset: {
    legend: {
      text: "What is your nationality?",
      size: "m",
      isPageHeading: true
    }
  },
  hint: {
    text: "If you have dual nationality, select all options that are relevant to you"
  },
  idPrefix: "with-hint",
  name: "example",
  items: [
    {
      value: "british",
      text: "British"
    },
    {
      value: "irish",
      text: "Irish"
    },
    {
      value: "other",
      text: "Citizen of another country"
    }
  ],
  small: true
}) }}

Checkboxes with hint and error

Open this example in a new tab: Checkboxes with hint and error

How do you want to be contacted about this?

Select all options that are relevant to you

Error: Select how you want to be contacted

Code

Markup

<div class="nhsuk-form-group nhsuk-form-group--error">
  <fieldset class="nhsuk-fieldset" aria-describedby="with-hint-error-hint with-hint-error-error">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--l">
    <h1 class="nhsuk-fieldset__heading">
      How do you want to be contacted about this?
    </h1>
  </legend>
  <div class="nhsuk-hint" id="with-hint-error-hint">
    Select all options that are relevant to you
  </div>
  <p class="nhsuk-error-message" id="with-hint-error-error">
    <span class="nhsuk-u-visually-hidden">Error:</span> Select how you want to be contacted
  </p>
  <div class="nhsuk-checkboxes nhsuk-checkboxes--error" data-module="nhsuk-checkboxes">
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="with-hint-error" name="example" type="checkbox" value="email">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="with-hint-error">
        Email
      </label>
    </div>
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="with-hint-error-2" name="example" type="checkbox" value="phone">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="with-hint-error-2">
        Phone
      </label>
    </div>
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="with-hint-error-3" name="example" type="checkbox" value="text message">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="with-hint-error-3">
        Text message
      </label>
    </div>
  </div>
</fieldset>
</div>

Macro

{% from "checkboxes/macro.njk" import checkboxes -%}

{{ checkboxes({
  fieldset: {
    legend: {
      text: "How do you want to be contacted about this?",
      size: "l",
      isPageHeading: true
    }
  },
  hint: {
    text: "Select all options that are relevant to you"
  },
  errorMessage: {
    text: "Select how you want to be contacted"
  },
  idPrefix: "with-hint-error",
  name: "example",
  items: [
    {
      value: "email",
      text: "Email"
    },
    {
      value: "phone",
      text: "Phone"
    },
    {
      value: "text message",
      text: "Text message"
    }
  ]
}) }}

Checkboxes small with hint and error

Open this example in a new tab: Checkboxes small with hint and error

How do you want to be contacted about this?

Select all options that are relevant to you

Error: Select how you want to be contacted

Code

Markup

<div class="nhsuk-form-group nhsuk-form-group--error">
  <fieldset class="nhsuk-fieldset" aria-describedby="with-hint-error-hint with-hint-error-error">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--m">
    <h1 class="nhsuk-fieldset__heading">
      How do you want to be contacted about this?
    </h1>
  </legend>
  <div class="nhsuk-hint" id="with-hint-error-hint">
    Select all options that are relevant to you
  </div>
  <p class="nhsuk-error-message" id="with-hint-error-error">
    <span class="nhsuk-u-visually-hidden">Error:</span> Select how you want to be contacted
  </p>
  <div class="nhsuk-checkboxes nhsuk-checkboxes--small nhsuk-checkboxes--error" data-module="nhsuk-checkboxes">
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="with-hint-error" name="example" type="checkbox" value="email">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="with-hint-error">
        Email
      </label>
    </div>
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="with-hint-error-2" name="example" type="checkbox" value="phone">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="with-hint-error-2">
        Phone
      </label>
    </div>
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="with-hint-error-3" name="example" type="checkbox" value="text message">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="with-hint-error-3">
        Text message
      </label>
    </div>
  </div>
</fieldset>
</div>

Macro

{% from "checkboxes/macro.njk" import checkboxes -%}

{{ checkboxes({
  fieldset: {
    legend: {
      text: "How do you want to be contacted about this?",
      size: "m",
      isPageHeading: true
    }
  },
  hint: {
    text: "Select all options that are relevant to you"
  },
  errorMessage: {
    text: "Select how you want to be contacted"
  },
  idPrefix: "with-hint-error",
  name: "example",
  items: [
    {
      value: "email",
      text: "Email"
    },
    {
      value: "phone",
      text: "Phone"
    },
    {
      value: "text message",
      text: "Text message"
    }
  ],
  small: true
}) }}

Checkboxes with hints on items

Open this example in a new tab: Checkboxes with hints on items

What is your nationality?

If you have dual nationality, select all options that are relevant to you
including English, Scottish, Welsh and Northern Irish
Code

Markup

<div class="nhsuk-form-group">
  <fieldset class="nhsuk-fieldset" aria-describedby="with-hint-item-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="with-hint-item-hint">
    If you have dual nationality, select all options that are relevant to you
  </div>
  <div class="nhsuk-checkboxes" data-module="nhsuk-checkboxes">
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="with-hint-item" name="example" type="checkbox" value="british" aria-describedby="with-hint-item-item-hint">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="with-hint-item">
        British
      </label>
      <div class="nhsuk-hint nhsuk-checkboxes__hint" id="with-hint-item-item-hint">
        including English, Scottish, Welsh and Northern Irish
      </div>
    </div>
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="with-hint-item-2" name="example" type="checkbox" value="irish">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="with-hint-item-2">
        Irish
      </label>
    </div>
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="with-hint-item-3" name="example" type="checkbox" value="other">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="with-hint-item-3">
        Citizen of another country
      </label>
    </div>
  </div>
</fieldset>
</div>

Macro

{% from "checkboxes/macro.njk" import checkboxes -%}

{{ checkboxes({
  fieldset: {
    legend: {
      text: "What is your nationality?",
      size: "l",
      isPageHeading: true
    }
  },
  hint: {
    text: "If you have dual nationality, select all options that are relevant to you"
  },
  idPrefix: "with-hint-item",
  name: "example",
  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"
    }
  ]
}) }}

Checkboxes small with hints on items

Open this example in a new tab: Checkboxes small with hints on items

What is your nationality?

If you have dual nationality, select all options that are relevant to you
including English, Scottish, Welsh and Northern Irish
Code

Markup

<div class="nhsuk-form-group">
  <fieldset class="nhsuk-fieldset" aria-describedby="with-hint-item-hint">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--m">
    <h1 class="nhsuk-fieldset__heading">
      What is your nationality?
    </h1>
  </legend>
  <div class="nhsuk-hint" id="with-hint-item-hint">
    If you have dual nationality, select all options that are relevant to you
  </div>
  <div class="nhsuk-checkboxes nhsuk-checkboxes--small" data-module="nhsuk-checkboxes">
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="with-hint-item" name="example" type="checkbox" value="british" aria-describedby="with-hint-item-item-hint">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="with-hint-item">
        British
      </label>
      <div class="nhsuk-hint nhsuk-checkboxes__hint" id="with-hint-item-item-hint">
        including English, Scottish, Welsh and Northern Irish
      </div>
    </div>
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="with-hint-item-2" name="example" type="checkbox" value="irish">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="with-hint-item-2">
        Irish
      </label>
    </div>
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="with-hint-item-3" name="example" type="checkbox" value="other">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="with-hint-item-3">
        Citizen of another country
      </label>
    </div>
  </div>
</fieldset>
</div>

Macro

{% from "checkboxes/macro.njk" import checkboxes -%}

{{ checkboxes({
  fieldset: {
    legend: {
      text: "What is your nationality?",
      size: "m",
      isPageHeading: true
    }
  },
  hint: {
    text: "If you have dual nationality, select all options that are relevant to you"
  },
  idPrefix: "with-hint-item",
  name: "example",
  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"
    }
  ],
  small: true
}) }}

Checkboxes with long text

Open this example in a new tab: Checkboxes with long text

Venenatis Condimentum

Code

Markup

<div class="nhsuk-form-group">
  <fieldset class="nhsuk-fieldset">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--l">
    <h1 class="nhsuk-fieldset__heading">
      Venenatis Condimentum
    </h1>
  </legend>
  <div class="nhsuk-checkboxes" data-module="nhsuk-checkboxes">
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="with-long-text" name="example" type="checkbox" value="nullam">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="with-long-text">
        Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo
        quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
        Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida
        at eget metus.
      </label>
    </div>
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="with-long-text-2" name="example" type="checkbox" value="aenean">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="with-long-text-2">
        Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis
        vestibulum. Donec sed odio dui. Duis mollis, est non commodo luctus,
        nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cum sociis
        natoque penatibus et magnis dis parturient montes, nascetur ridiculus
        mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam
        venenatis vestibulum. Cras mattis consectetur purus sit amet
        fermentum.
      </label>
    </div>
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="with-long-text-3" name="example" type="checkbox" value="fusce">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="with-long-text-3">
        Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
        nibh, ut fermentum massa justo sit amet risus. Etiam porta sem
        malesuada magna mollis euismod. Praesent commodo cursus magna, vel
        scelerisque nisl consectetur et. Etiam porta sem malesuada magna
        mollis euismod. Etiam porta sem malesuada magna mollis euismod.
        Donec sed odio dui. Sed posuere consectetur est at lobortis.
      </label>
    </div>
  </div>
</fieldset>
</div>

Macro

{% from "checkboxes/macro.njk" import checkboxes -%}

{{ checkboxes({
  fieldset: {
    legend: {
      text: "Venenatis Condimentum",
      size: "l",
      isPageHeading: true
    }
  },
  idPrefix: "with-long-text",
  name: "example",
  items: [
    {
      value: "nullam",
      text: "Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo\nquam. Pellentesque ornare sem lacinia quam venenatis vestibulum.\nMaecenas faucibus mollis interdum. Donec id elit non mi porta gravida\nat eget metus."
    },
    {
      value: "aenean",
      text: "Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis\nvestibulum. Donec sed odio dui. Duis mollis, est non commodo luctus,\nnisi erat porttitor ligula, eget lacinia odio sem nec elit. Cum sociis\nnatoque penatibus et magnis dis parturient montes, nascetur ridiculus\nmus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam\nvenenatis vestibulum. Cras mattis consectetur purus sit amet\nfermentum."
    },
    {
      value: "fusce",
      text: "Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum\nnibh, ut fermentum massa justo sit amet risus. Etiam porta sem\nmalesuada magna mollis euismod. Praesent commodo cursus magna, vel\nscelerisque nisl consectetur et. Etiam porta sem malesuada magna\nmollis euismod. Etiam porta sem malesuada magna mollis euismod.\nDonec sed odio dui. Sed posuere consectetur est at lobortis."
    }
  ]
}) }}

Checkboxes small with long text

Open this example in a new tab: Checkboxes small with long text

Venenatis Condimentum

Code

Markup

<div class="nhsuk-form-group">
  <fieldset class="nhsuk-fieldset">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--m">
    <h1 class="nhsuk-fieldset__heading">
      Venenatis Condimentum
    </h1>
  </legend>
  <div class="nhsuk-checkboxes nhsuk-checkboxes--small" data-module="nhsuk-checkboxes">
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="with-long-text" name="example" type="checkbox" value="nullam">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="with-long-text">
        Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo
        quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
        Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida
        at eget metus.
      </label>
    </div>
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="with-long-text-2" name="example" type="checkbox" value="aenean">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="with-long-text-2">
        Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis
        vestibulum. Donec sed odio dui. Duis mollis, est non commodo luctus,
        nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cum sociis
        natoque penatibus et magnis dis parturient montes, nascetur ridiculus
        mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam
        venenatis vestibulum. Cras mattis consectetur purus sit amet
        fermentum.
      </label>
    </div>
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="with-long-text-3" name="example" type="checkbox" value="fusce">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="with-long-text-3">
        Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
        nibh, ut fermentum massa justo sit amet risus. Etiam porta sem
        malesuada magna mollis euismod. Praesent commodo cursus magna, vel
        scelerisque nisl consectetur et. Etiam porta sem malesuada magna
        mollis euismod. Etiam porta sem malesuada magna mollis euismod.
        Donec sed odio dui. Sed posuere consectetur est at lobortis.
      </label>
    </div>
  </div>
</fieldset>
</div>

Macro

{% from "checkboxes/macro.njk" import checkboxes -%}

{{ checkboxes({
  fieldset: {
    legend: {
      text: "Venenatis Condimentum",
      size: "m",
      isPageHeading: true
    }
  },
  idPrefix: "with-long-text",
  name: "example",
  items: [
    {
      value: "nullam",
      text: "Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo\nquam. Pellentesque ornare sem lacinia quam venenatis vestibulum.\nMaecenas faucibus mollis interdum. Donec id elit non mi porta gravida\nat eget metus."
    },
    {
      value: "aenean",
      text: "Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis\nvestibulum. Donec sed odio dui. Duis mollis, est non commodo luctus,\nnisi erat porttitor ligula, eget lacinia odio sem nec elit. Cum sociis\nnatoque penatibus et magnis dis parturient montes, nascetur ridiculus\nmus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam\nvenenatis vestibulum. Cras mattis consectetur purus sit amet\nfermentum."
    },
    {
      value: "fusce",
      text: "Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum\nnibh, ut fermentum massa justo sit amet risus. Etiam porta sem\nmalesuada magna mollis euismod. Praesent commodo cursus magna, vel\nscelerisque nisl consectetur et. Etiam porta sem malesuada magna\nmollis euismod. Etiam porta sem malesuada magna mollis euismod.\nDonec sed odio dui. Sed posuere consectetur est at lobortis."
    }
  ],
  small: true
}) }}

Checkboxes with "none of the above" option

Open this example in a new tab: Checkboxes with "none of the above" option

How do you want to be contacted about this?

or
Code

Markup

<div class="nhsuk-form-group">
  <fieldset class="nhsuk-fieldset">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--l">
    <h1 class="nhsuk-fieldset__heading">
      How do you want to be contacted about this?
    </h1>
  </legend>
  <div class="nhsuk-checkboxes" data-module="nhsuk-checkboxes">
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="conditional" name="example" type="checkbox" value="email">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="conditional">
        Email
      </label>
    </div>
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="conditional-2" name="example" type="checkbox" value="phone">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="conditional-2">
        Phone
      </label>
    </div>
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="conditional-3" name="example" type="checkbox" value="text">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="conditional-3">
        Text message
      </label>
    </div>
    <div class="nhsuk-checkboxes__divider">or</div>
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="conditional-5" name="example" type="checkbox" value="none" data-checkbox-exclusive>
      <label class="nhsuk-label nhsuk-checkboxes__label" for="conditional-5">
        None of the above
      </label>
    </div>
  </div>
</fieldset>
</div>

Macro

{% from "checkboxes/macro.njk" import checkboxes -%}

{{ checkboxes({
  fieldset: {
    legend: {
      text: "How do you want to be contacted about this?",
      size: "l",
      isPageHeading: true
    }
  },
  idPrefix: "conditional",
  name: "example",
  items: [
    {
      value: "email",
      text: "Email"
    },
    {
      value: "phone",
      text: "Phone"
    },
    {
      value: "text",
      text: "Text message"
    },
    {
      divider: "or"
    },
    {
      value: "none",
      text: "None of the above",
      exclusive: true
    }
  ]
}) }}

Checkboxes small with "none of the above" option

Open this example in a new tab: Checkboxes small with "none of the above" option

How do you want to be contacted about this?

or
Code

Markup

<div class="nhsuk-form-group">
  <fieldset class="nhsuk-fieldset">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--m">
    <h1 class="nhsuk-fieldset__heading">
      How do you want to be contacted about this?
    </h1>
  </legend>
  <div class="nhsuk-checkboxes nhsuk-checkboxes--small" data-module="nhsuk-checkboxes">
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="conditional" name="example" type="checkbox" value="email">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="conditional">
        Email
      </label>
    </div>
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="conditional-2" name="example" type="checkbox" value="phone">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="conditional-2">
        Phone
      </label>
    </div>
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="conditional-3" name="example" type="checkbox" value="text">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="conditional-3">
        Text message
      </label>
    </div>
    <div class="nhsuk-checkboxes__divider">or</div>
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="conditional-5" name="example" type="checkbox" value="none" data-checkbox-exclusive>
      <label class="nhsuk-label nhsuk-checkboxes__label" for="conditional-5">
        None of the above
      </label>
    </div>
  </div>
</fieldset>
</div>

Macro

{% from "checkboxes/macro.njk" import checkboxes -%}

{{ checkboxes({
  fieldset: {
    legend: {
      text: "How do you want to be contacted about this?",
      size: "m",
      isPageHeading: true
    }
  },
  idPrefix: "conditional",
  name: "example",
  items: [
    {
      value: "email",
      text: "Email"
    },
    {
      value: "phone",
      text: "Phone"
    },
    {
      value: "text",
      text: "Text message"
    },
    {
      divider: "or"
    },
    {
      value: "none",
      text: "None of the above",
      exclusive: true
    }
  ],
  small: true
}) }}

Checkboxes with "none of the above" option, conditional content

Open this example in a new tab: Checkboxes with "none of the above" option, conditional content

How do you want to be contacted about this?

or
Code

Markup

<div class="nhsuk-form-group">
  <fieldset class="nhsuk-fieldset">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--l">
    <h1 class="nhsuk-fieldset__heading">
      How do you want to be contacted about this?
    </h1>
  </legend>
  <div class="nhsuk-checkboxes" data-module="nhsuk-checkboxes">
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="conditional" name="example" type="checkbox" value="email" data-aria-controls="conditional-conditional">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="conditional">
        Email
      </label>
    </div>
    <div class="nhsuk-checkboxes__conditional nhsuk-checkboxes__conditional--hidden" id="conditional-conditional">
      <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" spellcheck="false">
</div>
    </div>
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="conditional-2" name="example" type="checkbox" value="phone" data-aria-controls="conditional-conditional-2">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="conditional-2">
        Phone
      </label>
    </div>
    <div class="nhsuk-checkboxes__conditional nhsuk-checkboxes__conditional--hidden" id="conditional-conditional-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="tel">
</div>
    </div>
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="conditional-3" name="example" type="checkbox" value="text" data-aria-controls="conditional-conditional-3">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="conditional-3">
        Text message
      </label>
    </div>
    <div class="nhsuk-checkboxes__conditional nhsuk-checkboxes__conditional--hidden" id="conditional-conditional-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="tel">
</div>
    </div>
    <div class="nhsuk-checkboxes__divider">or</div>
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="conditional-5" name="example" type="checkbox" value="none" data-checkbox-exclusive>
      <label class="nhsuk-label nhsuk-checkboxes__label" for="conditional-5">
        None of the above
      </label>
    </div>
  </div>
</fieldset>
</div>

Macro

{% from "checkboxes/macro.njk" import checkboxes -%}

{{ checkboxes({
  fieldset: {
    legend: {
      text: "How do you want to be contacted about this?",
      size: "l",
      isPageHeading: true
    }
  },
  idPrefix: "conditional",
  name: "example",
  items: [
    {
      value: "email",
      text: "Email",
      conditional: {
        html: '<div class="nhsuk-form-group">\n  <label class="nhsuk-label" for="email">\n    Email address\n  </label>\n  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="email" name="email" type="text" spellcheck="false">\n</div>\n'
      }
    },
    {
      value: "phone",
      text: "Phone",
      conditional: {
        html: '<div class="nhsuk-form-group">\n  <label class="nhsuk-label" for="phone">\n    Phone number\n  </label>\n  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="phone" name="phone" type="tel">\n</div>\n'
      }
    },
    {
      value: "text",
      text: "Text message",
      conditional: {
        html: '<div class="nhsuk-form-group">\n  <label class="nhsuk-label" for="mobile">\n    Mobile phone number\n  </label>\n  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="mobile" name="mobile" type="tel">\n</div>\n'
      }
    },
    {
      divider: "or"
    },
    {
      value: "none",
      text: "None of the above",
      exclusive: true
    }
  ]
}) }}

Checkboxes small with "none of the above" option, conditional content

Open this example in a new tab: Checkboxes small with "none of the above" option, conditional content

How do you want to be contacted about this?

or
Code

Markup

<div class="nhsuk-form-group">
  <fieldset class="nhsuk-fieldset">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--m">
    <h1 class="nhsuk-fieldset__heading">
      How do you want to be contacted about this?
    </h1>
  </legend>
  <div class="nhsuk-checkboxes nhsuk-checkboxes--small" data-module="nhsuk-checkboxes">
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="conditional" name="example" type="checkbox" value="email" data-aria-controls="conditional-conditional">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="conditional">
        Email
      </label>
    </div>
    <div class="nhsuk-checkboxes__conditional nhsuk-checkboxes__conditional--hidden" id="conditional-conditional">
      <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" spellcheck="false">
</div>
    </div>
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="conditional-2" name="example" type="checkbox" value="phone" data-aria-controls="conditional-conditional-2">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="conditional-2">
        Phone
      </label>
    </div>
    <div class="nhsuk-checkboxes__conditional nhsuk-checkboxes__conditional--hidden" id="conditional-conditional-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="tel">
</div>
    </div>
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="conditional-3" name="example" type="checkbox" value="text" data-aria-controls="conditional-conditional-3">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="conditional-3">
        Text message
      </label>
    </div>
    <div class="nhsuk-checkboxes__conditional nhsuk-checkboxes__conditional--hidden" id="conditional-conditional-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="tel">
</div>
    </div>
    <div class="nhsuk-checkboxes__divider">or</div>
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="conditional-5" name="example" type="checkbox" value="none" data-checkbox-exclusive>
      <label class="nhsuk-label nhsuk-checkboxes__label" for="conditional-5">
        None of the above
      </label>
    </div>
  </div>
</fieldset>
</div>

Macro

{% from "checkboxes/macro.njk" import checkboxes -%}

{{ checkboxes({
  fieldset: {
    legend: {
      text: "How do you want to be contacted about this?",
      size: "m",
      isPageHeading: true
    }
  },
  idPrefix: "conditional",
  name: "example",
  items: [
    {
      value: "email",
      text: "Email",
      conditional: {
        html: '<div class="nhsuk-form-group">\n  <label class="nhsuk-label" for="email">\n    Email address\n  </label>\n  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="email" name="email" type="text" spellcheck="false">\n</div>\n'
      }
    },
    {
      value: "phone",
      text: "Phone",
      conditional: {
        html: '<div class="nhsuk-form-group">\n  <label class="nhsuk-label" for="phone">\n    Phone number\n  </label>\n  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="phone" name="phone" type="tel">\n</div>\n'
      }
    },
    {
      value: "text",
      text: "Text message",
      conditional: {
        html: '<div class="nhsuk-form-group">\n  <label class="nhsuk-label" for="mobile">\n    Mobile phone number\n  </label>\n  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="mobile" name="mobile" type="tel">\n</div>\n'
      }
    },
    {
      divider: "or"
    },
    {
      value: "none",
      text: "None of the above",
      exclusive: true
    }
  ],
  small: true
}) }}

Checkboxes without fieldset

Open this example in a new tab: Checkboxes without fieldset

Code

Markup

<div class="nhsuk-form-group">
  <div class="nhsuk-checkboxes" id="with-disabled-item" data-module="nhsuk-checkboxes">
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="colours" name="colours" type="checkbox" value="red">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="colours">
        Red
      </label>
    </div>
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="colours-2" name="colours" type="checkbox" value="green">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="colours-2">
        Green
      </label>
    </div>
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="colours-3" name="colours" type="checkbox" value="blue" disabled>
      <label class="nhsuk-label nhsuk-checkboxes__label" for="colours-3">
        Blue
      </label>
    </div>
  </div>
</div>

Macro

{% from "checkboxes/macro.njk" import checkboxes -%}

{{ checkboxes({
  fieldset: null,
  id: "with-disabled-item",
  name: "colours",
  items: [
    {
      value: "red",
      text: "Red"
    },
    {
      value: "green",
      text: "Green"
    },
    {
      value: "blue",
      text: "Blue",
      disabled: true
    }
  ]
}) }}

Checkboxes small without fieldset

Open this example in a new tab: Checkboxes small without fieldset

Code

Markup

<div class="nhsuk-form-group">
  <div class="nhsuk-checkboxes nhsuk-checkboxes--small" id="with-disabled-item" data-module="nhsuk-checkboxes">
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="colours" name="colours" type="checkbox" value="red">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="colours">
        Red
      </label>
    </div>
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="colours-2" name="colours" type="checkbox" value="green">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="colours-2">
        Green
      </label>
    </div>
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="colours-3" name="colours" type="checkbox" value="blue" disabled>
      <label class="nhsuk-label nhsuk-checkboxes__label" for="colours-3">
        Blue
      </label>
    </div>
  </div>
</div>

Macro

{% from "checkboxes/macro.njk" import checkboxes -%}

{{ checkboxes({
  fieldset: null,
  id: "with-disabled-item",
  name: "colours",
  items: [
    {
      value: "red",
      text: "Red"
    },
    {
      value: "green",
      text: "Green"
    },
    {
      value: "blue",
      text: "Blue",
      disabled: true
    }
  ],
  small: true
}) }}

Checkboxes without page heading

Open this example in a new tab: Checkboxes without page heading

How do you want to be contacted about this?

Select all options that are relevant to you
Code

Markup

<div class="nhsuk-form-group">
  <fieldset class="nhsuk-fieldset" aria-describedby="without-heading-hint">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--l">
    <h1 class="nhsuk-fieldset__heading">
      How do you want to be contacted about this?
    </h1>
  </legend>
  <div class="nhsuk-hint" id="without-heading-hint">
    Select all options that are relevant to you
  </div>
  <div class="nhsuk-checkboxes" data-module="nhsuk-checkboxes">
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="without-heading" name="example" type="checkbox" value="email">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="without-heading">
        Email
      </label>
    </div>
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="without-heading-2" name="example" type="checkbox" value="phone">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="without-heading-2">
        Phone
      </label>
    </div>
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="without-heading-3" name="example" type="checkbox" value="text message">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="without-heading-3">
        Text message
      </label>
    </div>
  </div>
</fieldset>
</div>

Macro

{% from "checkboxes/macro.njk" import checkboxes -%}

{{ checkboxes({
  fieldset: {
    legend: {
      text: "How do you want to be contacted about this?",
      isPageHeading: true,
      size: "l"
    }
  },
  hint: {
    text: "Select all options that are relevant to you"
  },
  idPrefix: "without-heading",
  name: "example",
  items: [
    {
      value: "email",
      text: "Email"
    },
    {
      value: "phone",
      text: "Phone"
    },
    {
      value: "text message",
      text: "Text message"
    }
  ]
}) }}

Checkboxes small without page heading

Open this example in a new tab: Checkboxes small without page heading

How do you want to be contacted about this?

Select all options that are relevant to you
Code

Markup

<div class="nhsuk-form-group">
  <fieldset class="nhsuk-fieldset" aria-describedby="without-heading-hint">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--m">
    <h1 class="nhsuk-fieldset__heading">
      How do you want to be contacted about this?
    </h1>
  </legend>
  <div class="nhsuk-hint" id="without-heading-hint">
    Select all options that are relevant to you
  </div>
  <div class="nhsuk-checkboxes nhsuk-checkboxes--small" data-module="nhsuk-checkboxes">
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="without-heading" name="example" type="checkbox" value="email">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="without-heading">
        Email
      </label>
    </div>
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="without-heading-2" name="example" type="checkbox" value="phone">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="without-heading-2">
        Phone
      </label>
    </div>
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="without-heading-3" name="example" type="checkbox" value="text message">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="without-heading-3">
        Text message
      </label>
    </div>
  </div>
</fieldset>
</div>

Macro

{% from "checkboxes/macro.njk" import checkboxes -%}

{{ checkboxes({
  fieldset: {
    legend: {
      text: "How do you want to be contacted about this?",
      isPageHeading: true,
      size: "m"
    }
  },
  hint: {
    text: "Select all options that are relevant to you"
  },
  idPrefix: "without-heading",
  name: "example",
  items: [
    {
      value: "email",
      text: "Email"
    },
    {
      value: "phone",
      text: "Phone"
    },
    {
      value: "text message",
      text: "Text message"
    }
  ],
  small: true
}) }}

Checkboxes with pre-checked values

Open this example in a new tab: Checkboxes with pre-checked values

How do you want to be contacted about this?

Select all options that are relevant to you
Code

Markup

<div class="nhsuk-form-group">
  <fieldset class="nhsuk-fieldset" aria-describedby="conditional-hint">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--l">
    <h1 class="nhsuk-fieldset__heading">
      How do you want to be contacted about this?
    </h1>
  </legend>
  <div class="nhsuk-hint" id="conditional-hint">
    Select all options that are relevant to you
  </div>
  <div class="nhsuk-checkboxes" data-module="nhsuk-checkboxes">
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="conditional" name="contact" type="checkbox" value="email" checked data-aria-controls="conditional-conditional">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="conditional">
        Email
      </label>
    </div>
    <div class="nhsuk-checkboxes__conditional" id="conditional-conditional">
      <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" spellcheck="false">
</div>
    </div>
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="conditional-2" name="contact" type="checkbox" value="phone" data-aria-controls="conditional-conditional-2">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="conditional-2">
        Phone
      </label>
    </div>
    <div class="nhsuk-checkboxes__conditional nhsuk-checkboxes__conditional--hidden" id="conditional-conditional-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="tel">
</div>
    </div>
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="conditional-3" name="contact" type="checkbox" value="text" checked data-aria-controls="conditional-conditional-3">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="conditional-3">
        Text message
      </label>
    </div>
    <div class="nhsuk-checkboxes__conditional" id="conditional-conditional-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="tel">
</div>
    </div>
  </div>
</fieldset>
</div>

Macro

{% from "checkboxes/macro.njk" import checkboxes -%}

{{ checkboxes({
  fieldset: {
    legend: {
      text: "How do you want to be contacted about this?",
      size: "l",
      isPageHeading: true
    }
  },
  hint: {
    text: "Select all options that are relevant to you"
  },
  idPrefix: "conditional",
  name: "contact",
  values: ["email", "text"],
  items: [
    {
      value: "email",
      text: "Email",
      conditional: {
        html: '<div class="nhsuk-form-group">\n  <label class="nhsuk-label" for="email">\n    Email address\n  </label>\n  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="email" name="email" type="text" spellcheck="false">\n</div>\n'
      }
    },
    {
      value: "phone",
      text: "Phone",
      conditional: {
        html: '<div class="nhsuk-form-group">\n  <label class="nhsuk-label" for="phone">\n    Phone number\n  </label>\n  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="phone" name="phone" type="tel">\n</div>\n'
      }
    },
    {
      value: "text",
      text: "Text message",
      conditional: {
        html: '<div class="nhsuk-form-group">\n  <label class="nhsuk-label" for="mobile">\n    Mobile phone number\n  </label>\n  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="mobile" name="mobile" type="tel">\n</div>\n'
      }
    }
  ]
}) }}

Checkboxes small with pre-checked values

Open this example in a new tab: Checkboxes small with pre-checked values

How do you want to be contacted about this?

Select all options that are relevant to you
Code

Markup

<div class="nhsuk-form-group">
  <fieldset class="nhsuk-fieldset" aria-describedby="conditional-hint">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--m">
    <h1 class="nhsuk-fieldset__heading">
      How do you want to be contacted about this?
    </h1>
  </legend>
  <div class="nhsuk-hint" id="conditional-hint">
    Select all options that are relevant to you
  </div>
  <div class="nhsuk-checkboxes nhsuk-checkboxes--small" data-module="nhsuk-checkboxes">
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="conditional" name="contact" type="checkbox" value="email" checked data-aria-controls="conditional-conditional">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="conditional">
        Email
      </label>
    </div>
    <div class="nhsuk-checkboxes__conditional" id="conditional-conditional">
      <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" spellcheck="false">
</div>
    </div>
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="conditional-2" name="contact" type="checkbox" value="phone" data-aria-controls="conditional-conditional-2">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="conditional-2">
        Phone
      </label>
    </div>
    <div class="nhsuk-checkboxes__conditional nhsuk-checkboxes__conditional--hidden" id="conditional-conditional-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="tel">
</div>
    </div>
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="conditional-3" name="contact" type="checkbox" value="text" checked data-aria-controls="conditional-conditional-3">
      <label class="nhsuk-label nhsuk-checkboxes__label" for="conditional-3">
        Text message
      </label>
    </div>
    <div class="nhsuk-checkboxes__conditional" id="conditional-conditional-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="tel">
</div>
    </div>
  </div>
</fieldset>
</div>

Macro

{% from "checkboxes/macro.njk" import checkboxes -%}

{{ checkboxes({
  fieldset: {
    legend: {
      text: "How do you want to be contacted about this?",
      size: "m",
      isPageHeading: true
    }
  },
  hint: {
    text: "Select all options that are relevant to you"
  },
  idPrefix: "conditional",
  name: "contact",
  values: ["email", "text"],
  items: [
    {
      value: "email",
      text: "Email",
      conditional: {
        html: '<div class="nhsuk-form-group">\n  <label class="nhsuk-label" for="email">\n    Email address\n  </label>\n  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="email" name="email" type="text" spellcheck="false">\n</div>\n'
      }
    },
    {
      value: "phone",
      text: "Phone",
      conditional: {
        html: '<div class="nhsuk-form-group">\n  <label class="nhsuk-label" for="phone">\n    Phone number\n  </label>\n  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="phone" name="phone" type="tel">\n</div>\n'
      }
    },
    {
      value: "text",
      text: "Text message",
      conditional: {
        html: '<div class="nhsuk-form-group">\n  <label class="nhsuk-label" for="mobile">\n    Mobile phone number\n  </label>\n  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="mobile" name="mobile" type="tel">\n</div>\n'
      }
    }
  ],
  small: true
}) }}