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

Phone

Text message

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 reverse default

Open this example in a new tab: Checkboxes reverse default

How do you want to be contacted about this?

Select all options that are relevant to you

Phone

Text message

Code

Markup

<div class="nhsuk-form-group">
  <fieldset class="nhsuk-fieldset" aria-describedby="example-hint">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--reverse nhsuk-fieldset__legend--l">
    <h1 class="nhsuk-fieldset__heading">
      How do you want to be contacted about this?
    </h1>
  </legend>
  <div class="nhsuk-hint nhsuk-hint--reverse" id="example-hint">
    Select all options that are relevant to you
  </div>
  <div class="nhsuk-checkboxes nhsuk-checkboxes--reverse" 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-label--reverse 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-label--reverse 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-label--reverse 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"
    }
  ],
  variant: "reverse"
}) }}

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

Phone

Text message

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 small reverse default

Open this example in a new tab: Checkboxes small reverse default

How do you want to be contacted about this?

Select all options that are relevant to you

Phone

Text message

Code

Markup

<div class="nhsuk-form-group">
  <fieldset class="nhsuk-fieldset" aria-describedby="example-hint">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--reverse nhsuk-fieldset__legend--m">
    <h1 class="nhsuk-fieldset__heading">
      How do you want to be contacted about this?
    </h1>
  </legend>
  <div class="nhsuk-hint nhsuk-hint--reverse" id="example-hint">
    Select all options that are relevant to you
  </div>
  <div class="nhsuk-checkboxes nhsuk-checkboxes--reverse 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-label--reverse 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-label--reverse 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-label--reverse 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,
  variant: "reverse"
}) }}

Checkboxes disabled

Open this example in a new tab: Checkboxes disabled

How do you want to be contacted about this?

Select all options that are relevant to you

Phone

Text message

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" disabled>
      <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" disabled>
      <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" disabled>
      <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",
  disabled: true,
  items: [
    {
      value: "email",
      text: "Email"
    },
    {
      value: "phone",
      text: "Phone"
    },
    {
      value: "text",
      text: "Text message"
    }
  ]
}) }}

Checkboxes reverse disabled

Open this example in a new tab: Checkboxes reverse disabled

How do you want to be contacted about this?

Select all options that are relevant to you

Phone

Text message

Code

Markup

<div class="nhsuk-form-group">
  <fieldset class="nhsuk-fieldset" aria-describedby="example-hint">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--reverse nhsuk-fieldset__legend--l">
    <h1 class="nhsuk-fieldset__heading">
      How do you want to be contacted about this?
    </h1>
  </legend>
  <div class="nhsuk-hint nhsuk-hint--reverse" id="example-hint">
    Select all options that are relevant to you
  </div>
  <div class="nhsuk-checkboxes nhsuk-checkboxes--reverse" data-module="nhsuk-checkboxes">
    <div class="nhsuk-checkboxes__item">
      <input class="nhsuk-checkboxes__input" id="example" name="example" type="checkbox" value="email" disabled>
      <label class="nhsuk-label nhsuk-label--reverse 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" disabled>
      <label class="nhsuk-label nhsuk-label--reverse 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" disabled>
      <label class="nhsuk-label nhsuk-label--reverse 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",
  disabled: true,
  items: [
    {
      value: "email",
      text: "Email"
    },
    {
      value: "phone",
      text: "Phone"
    },
    {
      value: "text",
      text: "Text message"
    }
  ],
  variant: "reverse"
}) }}

Checkboxes small disabled

Open this example in a new tab: Checkboxes small disabled

How do you want to be contacted about this?

Select all options that are relevant to you

Phone

Text message

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" disabled>
      <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" disabled>
      <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" disabled>
      <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",
  disabled: true,
  items: [
    {
      value: "email",
      text: "Email"
    },
    {
      value: "phone",
      text: "Phone"
    },
    {
      value: "text",
      text: "Text message"
    }
  ],
  small: true
}) }}

Checkboxes small reverse disabled

Open this example in a new tab: Checkboxes small reverse disabled

How do you want to be contacted about this?

Select all options that are relevant to you

Phone

Text message

Code

Markup

<div class="nhsuk-form-group">
  <fieldset class="nhsuk-fieldset" aria-describedby="example-hint">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--reverse nhsuk-fieldset__legend--m">
    <h1 class="nhsuk-fieldset__heading">
      How do you want to be contacted about this?
    </h1>
  </legend>
  <div class="nhsuk-hint nhsuk-hint--reverse" id="example-hint">
    Select all options that are relevant to you
  </div>
  <div class="nhsuk-checkboxes nhsuk-checkboxes--reverse 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" disabled>
      <label class="nhsuk-label nhsuk-label--reverse 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" disabled>
      <label class="nhsuk-label nhsuk-label--reverse 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" disabled>
      <label class="nhsuk-label nhsuk-label--reverse 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",
  disabled: true,
  items: [
    {
      value: "email",
      text: "Email"
    },
    {
      value: "phone",
      text: "Phone"
    },
    {
      value: "text",
      text: "Text message"
    }
  ],
  small: true,
  variant: "reverse"
}) }}

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

Phone

Text message

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

Phone

Text message

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

Phone

Text message

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

Phone

Text message

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

Email address

Phone

Phone number

Text message

Mobile 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="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="contact-by-email">
    Email address
  </label>
  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="contact-by-email" name="contact-by-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="contact-by-phone">
    Phone number
  </label>
  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="contact-by-phone" name="contact-by-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="contact-by-text">
    Mobile phone number
  </label>
  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="contact-by-text" name="contact-by-text" 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="contact-by-email">\n    Email address\n  </label>\n  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="contact-by-email" name="contact-by-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="contact-by-phone">\n    Phone number\n  </label>\n  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="contact-by-phone" name="contact-by-phone" type="tel">\n</div>\n'
      }
    },
    {
      value: "text",
      text: "Text message",
      conditional: {
        html: '<div class="nhsuk-form-group">\n  <label class="nhsuk-label" for="contact-by-text">\n    Mobile phone number\n  </label>\n  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="contact-by-text" name="contact-by-text" type="tel">\n</div>\n'
      }
    }
  ]
}) }}

Checkboxes reverse with conditional content

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

How do you want to be contacted about this?

Select all options that are relevant to you

Email address

Phone

Phone number

Text message

Mobile 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--reverse nhsuk-fieldset__legend--l">
    <h1 class="nhsuk-fieldset__heading">
      How do you want to be contacted about this?
    </h1>
  </legend>
  <div class="nhsuk-hint nhsuk-hint--reverse" id="conditional-hint">
    Select all options that are relevant to you
  </div>
  <div class="nhsuk-checkboxes nhsuk-checkboxes--reverse" 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-label--reverse 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 nhsuk-label--reverse" for="contact-by-email">
    Email address
  </label>
  <input class="nhsuk-input nhsuk-input--reverse nhsuk-u-width-two-thirds" id="contact-by-email" name="contact-by-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-label--reverse 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 nhsuk-label--reverse" for="contact-by-phone">
    Phone number
  </label>
  <input class="nhsuk-input nhsuk-input--reverse nhsuk-u-width-two-thirds" id="contact-by-phone" name="contact-by-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-label--reverse 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 nhsuk-label--reverse" for="contact-by-text">
    Mobile phone number
  </label>
  <input class="nhsuk-input nhsuk-input--reverse nhsuk-u-width-two-thirds" id="contact-by-text" name="contact-by-text" 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 nhsuk-label--reverse" for="contact-by-email">\n    Email address\n  </label>\n  <input class="nhsuk-input nhsuk-input--reverse nhsuk-u-width-two-thirds" id="contact-by-email" name="contact-by-email" type="text" spellcheck="false">\n</div>\n'
      }
    },
    {
      value: "phone",
      text: "Phone",
      conditional: {
        html: '<div class="nhsuk-form-group">\n  <label class="nhsuk-label nhsuk-label--reverse" for="contact-by-phone">\n    Phone number\n  </label>\n  <input class="nhsuk-input nhsuk-input--reverse nhsuk-u-width-two-thirds" id="contact-by-phone" name="contact-by-phone" type="tel">\n</div>\n'
      }
    },
    {
      value: "text",
      text: "Text message",
      conditional: {
        html: '<div class="nhsuk-form-group">\n  <label class="nhsuk-label nhsuk-label--reverse" for="contact-by-text">\n    Mobile phone number\n  </label>\n  <input class="nhsuk-input nhsuk-input--reverse nhsuk-u-width-two-thirds" id="contact-by-text" name="contact-by-text" type="tel">\n</div>\n'
      }
    }
  ],
  variant: "reverse"
}) }}

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

Email address

Phone

Phone number

Text message

Mobile 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="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="contact-by-email">
    Email address
  </label>
  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="contact-by-email" name="contact-by-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="contact-by-phone">
    Phone number
  </label>
  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="contact-by-phone" name="contact-by-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="contact-by-text">
    Mobile phone number
  </label>
  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="contact-by-text" name="contact-by-text" 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="contact-by-email">\n    Email address\n  </label>\n  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="contact-by-email" name="contact-by-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="contact-by-phone">\n    Phone number\n  </label>\n  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="contact-by-phone" name="contact-by-phone" type="tel">\n</div>\n'
      }
    },
    {
      value: "text",
      text: "Text message",
      conditional: {
        html: '<div class="nhsuk-form-group">\n  <label class="nhsuk-label" for="contact-by-text">\n    Mobile phone number\n  </label>\n  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="contact-by-text" name="contact-by-text" type="tel">\n</div>\n'
      }
    }
  ],
  small: true
}) }}

Checkboxes small reverse with conditional content

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

How do you want to be contacted about this?

Select all options that are relevant to you

Email address

Phone

Phone number

Text message

Mobile 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--reverse nhsuk-fieldset__legend--m">
    <h1 class="nhsuk-fieldset__heading">
      How do you want to be contacted about this?
    </h1>
  </legend>
  <div class="nhsuk-hint nhsuk-hint--reverse" id="conditional-hint">
    Select all options that are relevant to you
  </div>
  <div class="nhsuk-checkboxes nhsuk-checkboxes--reverse 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-label--reverse 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 nhsuk-label--reverse" for="contact-by-email">
    Email address
  </label>
  <input class="nhsuk-input nhsuk-input--reverse nhsuk-u-width-two-thirds" id="contact-by-email" name="contact-by-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-label--reverse 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 nhsuk-label--reverse" for="contact-by-phone">
    Phone number
  </label>
  <input class="nhsuk-input nhsuk-input--reverse nhsuk-u-width-two-thirds" id="contact-by-phone" name="contact-by-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-label--reverse 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 nhsuk-label--reverse" for="contact-by-text">
    Mobile phone number
  </label>
  <input class="nhsuk-input nhsuk-input--reverse nhsuk-u-width-two-thirds" id="contact-by-text" name="contact-by-text" 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 nhsuk-label--reverse" for="contact-by-email">\n    Email address\n  </label>\n  <input class="nhsuk-input nhsuk-input--reverse nhsuk-u-width-two-thirds" id="contact-by-email" name="contact-by-email" type="text" spellcheck="false">\n</div>\n'
      }
    },
    {
      value: "phone",
      text: "Phone",
      conditional: {
        html: '<div class="nhsuk-form-group">\n  <label class="nhsuk-label nhsuk-label--reverse" for="contact-by-phone">\n    Phone number\n  </label>\n  <input class="nhsuk-input nhsuk-input--reverse nhsuk-u-width-two-thirds" id="contact-by-phone" name="contact-by-phone" type="tel">\n</div>\n'
      }
    },
    {
      value: "text",
      text: "Text message",
      conditional: {
        html: '<div class="nhsuk-form-group">\n  <label class="nhsuk-label nhsuk-label--reverse" for="contact-by-text">\n    Mobile phone number\n  </label>\n  <input class="nhsuk-input nhsuk-input--reverse nhsuk-u-width-two-thirds" id="contact-by-text" name="contact-by-text" type="tel">\n</div>\n'
      }
    }
  ],
  small: true,
  variant: "reverse"
}) }}

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

Select how you like to be contacted

Email address

Phone

Phone number Enter your phone number

Text message

Mobile phone number

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>
  <span class="nhsuk-error-message" id="conditional-error">
    <span class="nhsuk-u-visually-hidden">Error:</span> Select how you like to be contacted
  </span>
  <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="contact-by-email">
    Email address
  </label>
  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="contact-by-email" name="contact-by-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 nhsuk-form-group--error">
  <label class="nhsuk-label" for="contact-by-phone">
    Phone number
  </label>
  <span class="nhsuk-error-message" id="contact-by-phone-error">
    <span class="nhsuk-u-visually-hidden">Error:</span> Enter your phone number
  </span>
  <input class="nhsuk-input nhsuk-input--error nhsuk-u-width-two-thirds" id="contact-by-phone" name="contact-by-phone" type="tel" aria-describedby="contact-by-phone-error">
</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="contact-by-text">
    Mobile phone number
  </label>
  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="contact-by-text" name="contact-by-text" 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="contact-by-email">\n    Email address\n  </label>\n  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="contact-by-email" name="contact-by-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="contact-by-phone">\n    Phone number\n  </label>\n  <span class="nhsuk-error-message" id="contact-by-phone-error">\n    <span class="nhsuk-u-visually-hidden">Error:</span> Enter your phone number\n  </span>\n  <input class="nhsuk-input nhsuk-input--error nhsuk-u-width-two-thirds" id="contact-by-phone" name="contact-by-phone" type="tel" aria-describedby="contact-by-phone-error">\n</div>\n'
      }
    },
    {
      value: "text",
      text: "Text message",
      conditional: {
        html: '<div class="nhsuk-form-group">\n  <label class="nhsuk-label" for="contact-by-text">\n    Mobile phone number\n  </label>\n  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="contact-by-text" name="contact-by-text" type="tel">\n</div>\n'
      }
    }
  ]
}) }}

Checkboxes reverse with conditional content, error message

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

How do you want to be contacted about this?

Select all options that are relevant to you

Select how you like to be contacted

Email address

Phone

Phone number Enter your phone number

Text message

Mobile phone number

Code

Markup

<div class="nhsuk-form-group nhsuk-form-group--reverse nhsuk-form-group--error">
  <fieldset class="nhsuk-fieldset" aria-describedby="conditional-hint conditional-error">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--reverse nhsuk-fieldset__legend--l">
    <h1 class="nhsuk-fieldset__heading">
      How do you want to be contacted about this?
    </h1>
  </legend>
  <div class="nhsuk-hint nhsuk-hint--reverse" id="conditional-hint">
    Select all options that are relevant to you
  </div>
  <span class="nhsuk-error-message nhsuk-error-message--reverse" id="conditional-error">
    <span class="nhsuk-u-visually-hidden">Error:</span> Select how you like to be contacted
  </span>
  <div class="nhsuk-checkboxes nhsuk-checkboxes--reverse 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-label--reverse 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 nhsuk-label--reverse" for="contact-by-email">
    Email address
  </label>
  <input class="nhsuk-input nhsuk-input--reverse nhsuk-u-width-two-thirds" id="contact-by-email" name="contact-by-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-label--reverse 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 nhsuk-form-group--reverse nhsuk-form-group--error">
  <label class="nhsuk-label nhsuk-label--reverse" for="contact-by-phone">
    Phone number
  </label>
  <span class="nhsuk-error-message nhsuk-error-message--reverse" id="contact-by-phone-error">
    <span class="nhsuk-u-visually-hidden">Error:</span> Enter your phone number
  </span>
  <input class="nhsuk-input nhsuk-input--reverse nhsuk-input--error nhsuk-u-width-two-thirds" id="contact-by-phone" name="contact-by-phone" type="tel" aria-describedby="contact-by-phone-error">
</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-label--reverse 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 nhsuk-label--reverse" for="contact-by-text">
    Mobile phone number
  </label>
  <input class="nhsuk-input nhsuk-input--reverse nhsuk-u-width-two-thirds" id="contact-by-text" name="contact-by-text" 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 nhsuk-label--reverse" for="contact-by-email">\n    Email address\n  </label>\n  <input class="nhsuk-input nhsuk-input--reverse nhsuk-u-width-two-thirds" id="contact-by-email" name="contact-by-email" type="text" spellcheck="false">\n</div>\n'
      }
    },
    {
      value: "phone",
      text: "Phone",
      conditional: {
        html: '<div class="nhsuk-form-group nhsuk-form-group--reverse nhsuk-form-group--error">\n  <label class="nhsuk-label nhsuk-label--reverse" for="contact-by-phone">\n    Phone number\n  </label>\n  <span class="nhsuk-error-message nhsuk-error-message--reverse" id="contact-by-phone-error">\n    <span class="nhsuk-u-visually-hidden">Error:</span> Enter your phone number\n  </span>\n  <input class="nhsuk-input nhsuk-input--reverse nhsuk-input--error nhsuk-u-width-two-thirds" id="contact-by-phone" name="contact-by-phone" type="tel" aria-describedby="contact-by-phone-error">\n</div>\n'
      }
    },
    {
      value: "text",
      text: "Text message",
      conditional: {
        html: '<div class="nhsuk-form-group">\n  <label class="nhsuk-label nhsuk-label--reverse" for="contact-by-text">\n    Mobile phone number\n  </label>\n  <input class="nhsuk-input nhsuk-input--reverse nhsuk-u-width-two-thirds" id="contact-by-text" name="contact-by-text" type="tel">\n</div>\n'
      }
    }
  ],
  variant: "reverse"
}) }}

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

Select how you like to be contacted

Email address

Phone

Phone number Enter your phone number

Text message

Mobile phone number

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>
  <span class="nhsuk-error-message" id="conditional-error">
    <span class="nhsuk-u-visually-hidden">Error:</span> Select how you like to be contacted
  </span>
  <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="contact-by-email">
    Email address
  </label>
  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="contact-by-email" name="contact-by-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 nhsuk-form-group--error">
  <label class="nhsuk-label" for="contact-by-phone">
    Phone number
  </label>
  <span class="nhsuk-error-message" id="contact-by-phone-error">
    <span class="nhsuk-u-visually-hidden">Error:</span> Enter your phone number
  </span>
  <input class="nhsuk-input nhsuk-input--error nhsuk-u-width-two-thirds" id="contact-by-phone" name="contact-by-phone" type="tel" aria-describedby="contact-by-phone-error">
</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="contact-by-text">
    Mobile phone number
  </label>
  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="contact-by-text" name="contact-by-text" 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="contact-by-email">\n    Email address\n  </label>\n  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="contact-by-email" name="contact-by-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="contact-by-phone">\n    Phone number\n  </label>\n  <span class="nhsuk-error-message" id="contact-by-phone-error">\n    <span class="nhsuk-u-visually-hidden">Error:</span> Enter your phone number\n  </span>\n  <input class="nhsuk-input nhsuk-input--error nhsuk-u-width-two-thirds" id="contact-by-phone" name="contact-by-phone" type="tel" aria-describedby="contact-by-phone-error">\n</div>\n'
      }
    },
    {
      value: "text",
      text: "Text message",
      conditional: {
        html: '<div class="nhsuk-form-group">\n  <label class="nhsuk-label" for="contact-by-text">\n    Mobile phone number\n  </label>\n  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="contact-by-text" name="contact-by-text" type="tel">\n</div>\n'
      }
    }
  ],
  small: true
}) }}

Checkboxes small reverse with conditional content, error message

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

How do you want to be contacted about this?

Select all options that are relevant to you

Select how you like to be contacted

Email address

Phone

Phone number Enter your phone number

Text message

Mobile phone number

Code

Markup

<div class="nhsuk-form-group nhsuk-form-group--reverse nhsuk-form-group--error">
  <fieldset class="nhsuk-fieldset" aria-describedby="conditional-hint conditional-error">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--reverse nhsuk-fieldset__legend--m">
    <h1 class="nhsuk-fieldset__heading">
      How do you want to be contacted about this?
    </h1>
  </legend>
  <div class="nhsuk-hint nhsuk-hint--reverse" id="conditional-hint">
    Select all options that are relevant to you
  </div>
  <span class="nhsuk-error-message nhsuk-error-message--reverse" id="conditional-error">
    <span class="nhsuk-u-visually-hidden">Error:</span> Select how you like to be contacted
  </span>
  <div class="nhsuk-checkboxes nhsuk-checkboxes--reverse 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-label--reverse 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 nhsuk-label--reverse" for="contact-by-email">
    Email address
  </label>
  <input class="nhsuk-input nhsuk-input--reverse nhsuk-u-width-two-thirds" id="contact-by-email" name="contact-by-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-label--reverse 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 nhsuk-form-group--reverse nhsuk-form-group--error">
  <label class="nhsuk-label nhsuk-label--reverse" for="contact-by-phone">
    Phone number
  </label>
  <span class="nhsuk-error-message nhsuk-error-message--reverse" id="contact-by-phone-error">
    <span class="nhsuk-u-visually-hidden">Error:</span> Enter your phone number
  </span>
  <input class="nhsuk-input nhsuk-input--reverse nhsuk-input--error nhsuk-u-width-two-thirds" id="contact-by-phone" name="contact-by-phone" type="tel" aria-describedby="contact-by-phone-error">
</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-label--reverse 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 nhsuk-label--reverse" for="contact-by-text">
    Mobile phone number
  </label>
  <input class="nhsuk-input nhsuk-input--reverse nhsuk-u-width-two-thirds" id="contact-by-text" name="contact-by-text" 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 nhsuk-label--reverse" for="contact-by-email">\n    Email address\n  </label>\n  <input class="nhsuk-input nhsuk-input--reverse nhsuk-u-width-two-thirds" id="contact-by-email" name="contact-by-email" type="text" spellcheck="false">\n</div>\n'
      }
    },
    {
      value: "phone",
      text: "Phone",
      conditional: {
        html: '<div class="nhsuk-form-group nhsuk-form-group--reverse nhsuk-form-group--error">\n  <label class="nhsuk-label nhsuk-label--reverse" for="contact-by-phone">\n    Phone number\n  </label>\n  <span class="nhsuk-error-message nhsuk-error-message--reverse" id="contact-by-phone-error">\n    <span class="nhsuk-u-visually-hidden">Error:</span> Enter your phone number\n  </span>\n  <input class="nhsuk-input nhsuk-input--reverse nhsuk-input--error nhsuk-u-width-two-thirds" id="contact-by-phone" name="contact-by-phone" type="tel" aria-describedby="contact-by-phone-error">\n</div>\n'
      }
    },
    {
      value: "text",
      text: "Text message",
      conditional: {
        html: '<div class="nhsuk-form-group">\n  <label class="nhsuk-label nhsuk-label--reverse" for="contact-by-text">\n    Mobile phone number\n  </label>\n  <input class="nhsuk-input nhsuk-input--reverse nhsuk-u-width-two-thirds" id="contact-by-text" name="contact-by-text" type="tel">\n</div>\n'
      }
    }
  ],
  small: true,
  variant: "reverse"
}) }}

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

Email address

Phone

Phone number Enter your phone number

Text message

Mobile 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="contact-by-email">
    Email address
  </label>
  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="contact-by-email" name="contact-by-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="contact-by-phone">
    Phone number
  </label>
  <span class="nhsuk-error-message" id="contact-by-phone-error">
    <span class="nhsuk-u-visually-hidden">Error:</span> Enter your phone number
  </span>
  <input class="nhsuk-input nhsuk-input--error nhsuk-u-width-two-thirds" id="contact-by-phone" name="contact-by-phone" type="tel" aria-describedby="contact-by-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="contact-by-text">
    Mobile phone number
  </label>
  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="contact-by-text" name="contact-by-text" 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="contact-by-email">\n    Email address\n  </label>\n  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="contact-by-email" name="contact-by-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="contact-by-phone">\n    Phone number\n  </label>\n  <span class="nhsuk-error-message" id="contact-by-phone-error">\n    <span class="nhsuk-u-visually-hidden">Error:</span> Enter your phone number\n  </span>\n  <input class="nhsuk-input nhsuk-input--error nhsuk-u-width-two-thirds" id="contact-by-phone" name="contact-by-phone" type="tel" aria-describedby="contact-by-phone-error">\n</div>\n'
      }
    },
    {
      value: "text",
      text: "Text message",
      conditional: {
        html: '<div class="nhsuk-form-group">\n  <label class="nhsuk-label" for="contact-by-text">\n    Mobile phone number\n  </label>\n  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="contact-by-text" name="contact-by-text" type="tel">\n</div>\n'
      }
    }
  ]
}) }}

Checkboxes reverse with conditional content, error message (nested)

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

How do you want to be contacted about this?

Select all options that are relevant to you

Email address

Phone

Phone number Enter your phone number

Text message

Mobile 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--reverse nhsuk-fieldset__legend--l">
    <h1 class="nhsuk-fieldset__heading">
      How do you want to be contacted about this?
    </h1>
  </legend>
  <div class="nhsuk-hint nhsuk-hint--reverse" id="conditional-hint">
    Select all options that are relevant to you
  </div>
  <div class="nhsuk-checkboxes nhsuk-checkboxes--reverse" 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-label--reverse 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 nhsuk-label--reverse" for="contact-by-email">
    Email address
  </label>
  <input class="nhsuk-input nhsuk-input--reverse nhsuk-u-width-two-thirds" id="contact-by-email" name="contact-by-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-label--reverse 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--reverse nhsuk-form-group--error">
  <label class="nhsuk-label nhsuk-label--reverse" for="contact-by-phone">
    Phone number
  </label>
  <span class="nhsuk-error-message nhsuk-error-message--reverse" id="contact-by-phone-error">
    <span class="nhsuk-u-visually-hidden">Error:</span> Enter your phone number
  </span>
  <input class="nhsuk-input nhsuk-input--reverse nhsuk-input--error nhsuk-u-width-two-thirds" id="contact-by-phone" name="contact-by-phone" type="tel" aria-describedby="contact-by-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-label--reverse 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 nhsuk-label--reverse" for="contact-by-text">
    Mobile phone number
  </label>
  <input class="nhsuk-input nhsuk-input--reverse nhsuk-u-width-two-thirds" id="contact-by-text" name="contact-by-text" 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 nhsuk-label--reverse" for="contact-by-email">\n    Email address\n  </label>\n  <input class="nhsuk-input nhsuk-input--reverse nhsuk-u-width-two-thirds" id="contact-by-email" name="contact-by-email" type="text" spellcheck="false">\n</div>\n'
      }
    },
    {
      value: "phone",
      text: "Phone",
      conditional: {
        html: '<div class="nhsuk-form-group nhsuk-form-group--reverse nhsuk-form-group--error">\n  <label class="nhsuk-label nhsuk-label--reverse" for="contact-by-phone">\n    Phone number\n  </label>\n  <span class="nhsuk-error-message nhsuk-error-message--reverse" id="contact-by-phone-error">\n    <span class="nhsuk-u-visually-hidden">Error:</span> Enter your phone number\n  </span>\n  <input class="nhsuk-input nhsuk-input--reverse nhsuk-input--error nhsuk-u-width-two-thirds" id="contact-by-phone" name="contact-by-phone" type="tel" aria-describedby="contact-by-phone-error">\n</div>\n'
      }
    },
    {
      value: "text",
      text: "Text message",
      conditional: {
        html: '<div class="nhsuk-form-group">\n  <label class="nhsuk-label nhsuk-label--reverse" for="contact-by-text">\n    Mobile phone number\n  </label>\n  <input class="nhsuk-input nhsuk-input--reverse nhsuk-u-width-two-thirds" id="contact-by-text" name="contact-by-text" type="tel">\n</div>\n'
      }
    }
  ],
  variant: "reverse"
}) }}

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

Email address

Phone

Phone number Enter your phone number

Text message

Mobile 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="contact-by-email">
    Email address
  </label>
  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="contact-by-email" name="contact-by-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="contact-by-phone">
    Phone number
  </label>
  <span class="nhsuk-error-message" id="contact-by-phone-error">
    <span class="nhsuk-u-visually-hidden">Error:</span> Enter your phone number
  </span>
  <input class="nhsuk-input nhsuk-input--error nhsuk-u-width-two-thirds" id="contact-by-phone" name="contact-by-phone" type="tel" aria-describedby="contact-by-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="contact-by-text">
    Mobile phone number
  </label>
  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="contact-by-text" name="contact-by-text" 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="contact-by-email">\n    Email address\n  </label>\n  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="contact-by-email" name="contact-by-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="contact-by-phone">\n    Phone number\n  </label>\n  <span class="nhsuk-error-message" id="contact-by-phone-error">\n    <span class="nhsuk-u-visually-hidden">Error:</span> Enter your phone number\n  </span>\n  <input class="nhsuk-input nhsuk-input--error nhsuk-u-width-two-thirds" id="contact-by-phone" name="contact-by-phone" type="tel" aria-describedby="contact-by-phone-error">\n</div>\n'
      }
    },
    {
      value: "text",
      text: "Text message",
      conditional: {
        html: '<div class="nhsuk-form-group">\n  <label class="nhsuk-label" for="contact-by-text">\n    Mobile phone number\n  </label>\n  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="contact-by-text" name="contact-by-text" type="tel">\n</div>\n'
      }
    }
  ],
  small: true
}) }}

Checkboxes small reverse with conditional content, error message (nested)

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

How do you want to be contacted about this?

Select all options that are relevant to you

Email address

Phone

Phone number Enter your phone number

Text message

Mobile 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--reverse nhsuk-fieldset__legend--m">
    <h1 class="nhsuk-fieldset__heading">
      How do you want to be contacted about this?
    </h1>
  </legend>
  <div class="nhsuk-hint nhsuk-hint--reverse" id="conditional-hint">
    Select all options that are relevant to you
  </div>
  <div class="nhsuk-checkboxes nhsuk-checkboxes--reverse 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-label--reverse 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 nhsuk-label--reverse" for="contact-by-email">
    Email address
  </label>
  <input class="nhsuk-input nhsuk-input--reverse nhsuk-u-width-two-thirds" id="contact-by-email" name="contact-by-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-label--reverse 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--reverse nhsuk-form-group--error">
  <label class="nhsuk-label nhsuk-label--reverse" for="contact-by-phone">
    Phone number
  </label>
  <span class="nhsuk-error-message nhsuk-error-message--reverse" id="contact-by-phone-error">
    <span class="nhsuk-u-visually-hidden">Error:</span> Enter your phone number
  </span>
  <input class="nhsuk-input nhsuk-input--reverse nhsuk-input--error nhsuk-u-width-two-thirds" id="contact-by-phone" name="contact-by-phone" type="tel" aria-describedby="contact-by-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-label--reverse 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 nhsuk-label--reverse" for="contact-by-text">
    Mobile phone number
  </label>
  <input class="nhsuk-input nhsuk-input--reverse nhsuk-u-width-two-thirds" id="contact-by-text" name="contact-by-text" 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 nhsuk-label--reverse" for="contact-by-email">\n    Email address\n  </label>\n  <input class="nhsuk-input nhsuk-input--reverse nhsuk-u-width-two-thirds" id="contact-by-email" name="contact-by-email" type="text" spellcheck="false">\n</div>\n'
      }
    },
    {
      value: "phone",
      text: "Phone",
      conditional: {
        html: '<div class="nhsuk-form-group nhsuk-form-group--reverse nhsuk-form-group--error">\n  <label class="nhsuk-label nhsuk-label--reverse" for="contact-by-phone">\n    Phone number\n  </label>\n  <span class="nhsuk-error-message nhsuk-error-message--reverse" id="contact-by-phone-error">\n    <span class="nhsuk-u-visually-hidden">Error:</span> Enter your phone number\n  </span>\n  <input class="nhsuk-input nhsuk-input--reverse nhsuk-input--error nhsuk-u-width-two-thirds" id="contact-by-phone" name="contact-by-phone" type="tel" aria-describedby="contact-by-phone-error">\n</div>\n'
      }
    },
    {
      value: "text",
      text: "Text message",
      conditional: {
        html: '<div class="nhsuk-form-group">\n  <label class="nhsuk-label nhsuk-label--reverse" for="contact-by-text">\n    Mobile phone number\n  </label>\n  <input class="nhsuk-input nhsuk-input--reverse nhsuk-u-width-two-thirds" id="contact-by-text" name="contact-by-text" type="tel">\n</div>\n'
      }
    }
  ],
  small: true,
  variant: "reverse"
}) }}

Checkboxes with disabled item

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

Red

Green

Blue

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 reverse with disabled item

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

Red

Green

Blue

Code

Markup

<div class="nhsuk-form-group">
  <div class="nhsuk-checkboxes nhsuk-checkboxes--reverse" 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-label--reverse 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-label--reverse 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-label--reverse 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
    }
  ],
  variant: "reverse"
}) }}

Checkboxes small with disabled item

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

Red

Green

Blue

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 small reverse with disabled item

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

Red

Green

Blue

Code

Markup

<div class="nhsuk-form-group">
  <div class="nhsuk-checkboxes nhsuk-checkboxes--reverse 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-label--reverse 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-label--reverse 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-label--reverse 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,
  variant: "reverse"
}) }}

Checkboxes with error message

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

How do you want to be contacted about this?

Select how you want to be contacted

Phone

Text message

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>
  <span class="nhsuk-error-message" id="with-error-message-error">
    <span class="nhsuk-u-visually-hidden">Error:</span> Select how you want to be contacted
  </span>
  <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 reverse with error message

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

How do you want to be contacted about this?

Select how you want to be contacted

Phone

Text message

Code

Markup

<div class="nhsuk-form-group nhsuk-form-group--reverse nhsuk-form-group--error">
  <fieldset class="nhsuk-fieldset" aria-describedby="with-error-message-error">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--reverse nhsuk-fieldset__legend--l">
    <h1 class="nhsuk-fieldset__heading">
      How do you want to be contacted about this?
    </h1>
  </legend>
  <span class="nhsuk-error-message nhsuk-error-message--reverse" id="with-error-message-error">
    <span class="nhsuk-u-visually-hidden">Error:</span> Select how you want to be contacted
  </span>
  <div class="nhsuk-checkboxes nhsuk-checkboxes--reverse 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-label--reverse 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-label--reverse 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-label--reverse 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"
    }
  ],
  variant: "reverse"
}) }}

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?

Select how you want to be contacted

Phone

Text message

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>
  <span class="nhsuk-error-message" id="with-error-message-error">
    <span class="nhsuk-u-visually-hidden">Error:</span> Select how you want to be contacted
  </span>
  <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 small reverse with error message

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

How do you want to be contacted about this?

Select how you want to be contacted

Phone

Text message

Code

Markup

<div class="nhsuk-form-group nhsuk-form-group--reverse nhsuk-form-group--error">
  <fieldset class="nhsuk-fieldset" aria-describedby="with-error-message-error">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--reverse nhsuk-fieldset__legend--m">
    <h1 class="nhsuk-fieldset__heading">
      How do you want to be contacted about this?
    </h1>
  </legend>
  <span class="nhsuk-error-message nhsuk-error-message--reverse" id="with-error-message-error">
    <span class="nhsuk-u-visually-hidden">Error:</span> Select how you want to be contacted
  </span>
  <div class="nhsuk-checkboxes nhsuk-checkboxes--reverse 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-label--reverse 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-label--reverse 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-label--reverse 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,
  variant: "reverse"
}) }}

Checkboxes with error message and hint

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

How do you want to be contacted about this?

Select all options that are relevant to you

Select how you want to be contacted

Phone

Text message

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>
  <span class="nhsuk-error-message" id="with-hint-error-error">
    <span class="nhsuk-u-visually-hidden">Error:</span> Select how you want to be contacted
  </span>
  <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 reverse with error message and hint

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

How do you want to be contacted about this?

Select all options that are relevant to you

Select how you want to be contacted

Phone

Text message

Code

Markup

<div class="nhsuk-form-group nhsuk-form-group--reverse 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--reverse nhsuk-fieldset__legend--l">
    <h1 class="nhsuk-fieldset__heading">
      How do you want to be contacted about this?
    </h1>
  </legend>
  <div class="nhsuk-hint nhsuk-hint--reverse" id="with-hint-error-hint">
    Select all options that are relevant to you
  </div>
  <span class="nhsuk-error-message nhsuk-error-message--reverse" id="with-hint-error-error">
    <span class="nhsuk-u-visually-hidden">Error:</span> Select how you want to be contacted
  </span>
  <div class="nhsuk-checkboxes nhsuk-checkboxes--reverse 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-label--reverse 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-label--reverse 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-label--reverse 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"
    }
  ],
  variant: "reverse"
}) }}

Checkboxes small with error message and hint

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

How do you want to be contacted about this?

Select all options that are relevant to you

Select how you want to be contacted

Phone

Text message

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>
  <span class="nhsuk-error-message" id="with-hint-error-error">
    <span class="nhsuk-u-visually-hidden">Error:</span> Select how you want to be contacted
  </span>
  <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 small reverse with error message and hint

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

How do you want to be contacted about this?

Select all options that are relevant to you

Select how you want to be contacted

Phone

Text message

Code

Markup

<div class="nhsuk-form-group nhsuk-form-group--reverse 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--reverse nhsuk-fieldset__legend--m">
    <h1 class="nhsuk-fieldset__heading">
      How do you want to be contacted about this?
    </h1>
  </legend>
  <div class="nhsuk-hint nhsuk-hint--reverse" id="with-hint-error-hint">
    Select all options that are relevant to you
  </div>
  <span class="nhsuk-error-message nhsuk-error-message--reverse" id="with-hint-error-error">
    <span class="nhsuk-u-visually-hidden">Error:</span> Select how you want to be contacted
  </span>
  <div class="nhsuk-checkboxes nhsuk-checkboxes--reverse 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-label--reverse 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-label--reverse 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-label--reverse 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,
  variant: "reverse"
}) }}

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

British

Irish

Citizen of another country

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 reverse with hint

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

What is your nationality?

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

British

Irish

Citizen of another country

Code

Markup

<div class="nhsuk-form-group">
  <fieldset class="nhsuk-fieldset" aria-describedby="with-hint-hint">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--reverse nhsuk-fieldset__legend--l">
    <h1 class="nhsuk-fieldset__heading">
      What is your nationality?
    </h1>
  </legend>
  <div class="nhsuk-hint nhsuk-hint--reverse" id="with-hint-hint">
    If you have dual nationality, select all options that are relevant to you
  </div>
  <div class="nhsuk-checkboxes nhsuk-checkboxes--reverse" 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-label--reverse 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-label--reverse 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-label--reverse 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"
    }
  ],
  variant: "reverse"
}) }}

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

British

Irish

Citizen of another country

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 small reverse with hint

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

What is your nationality?

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

British

Irish

Citizen of another country

Code

Markup

<div class="nhsuk-form-group">
  <fieldset class="nhsuk-fieldset" aria-describedby="with-hint-hint">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--reverse nhsuk-fieldset__legend--m">
    <h1 class="nhsuk-fieldset__heading">
      What is your nationality?
    </h1>
  </legend>
  <div class="nhsuk-hint nhsuk-hint--reverse" id="with-hint-hint">
    If you have dual nationality, select all options that are relevant to you
  </div>
  <div class="nhsuk-checkboxes nhsuk-checkboxes--reverse 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-label--reverse 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-label--reverse 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-label--reverse 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,
  variant: "reverse"
}) }}

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

British

including English, Scottish, Welsh and Northern Irish

Irish

Citizen of another country

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 reverse with hints on items

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

What is your nationality?

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

British

including English, Scottish, Welsh and Northern Irish

Irish

Citizen of another country

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--reverse nhsuk-fieldset__legend--l">
    <h1 class="nhsuk-fieldset__heading">
      What is your nationality?
    </h1>
  </legend>
  <div class="nhsuk-hint nhsuk-hint--reverse" 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--reverse" 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-label--reverse nhsuk-checkboxes__label" for="with-hint-item">
        British
      </label>
      <div class="nhsuk-hint nhsuk-hint--reverse 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-label--reverse 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-label--reverse 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"
    }
  ],
  variant: "reverse"
}) }}

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

British

including English, Scottish, Welsh and Northern Irish

Irish

Citizen of another country

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 small reverse with hints on items

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

What is your nationality?

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

British

including English, Scottish, Welsh and Northern Irish

Irish

Citizen of another country

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--reverse nhsuk-fieldset__legend--m">
    <h1 class="nhsuk-fieldset__heading">
      What is your nationality?
    </h1>
  </legend>
  <div class="nhsuk-hint nhsuk-hint--reverse" 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--reverse 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-label--reverse nhsuk-checkboxes__label" for="with-hint-item">
        British
      </label>
      <div class="nhsuk-hint nhsuk-hint--reverse 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-label--reverse 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-label--reverse 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,
  variant: "reverse"
}) }}

Checkboxes with long text

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

Venenatis Condimentum

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.

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.

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.

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 reverse with long text

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

Venenatis Condimentum

Code

Markup

<div class="nhsuk-form-group">
  <fieldset class="nhsuk-fieldset">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--reverse nhsuk-fieldset__legend--l">
    <h1 class="nhsuk-fieldset__heading">
      Venenatis Condimentum
    </h1>
  </legend>
  <div class="nhsuk-checkboxes nhsuk-checkboxes--reverse" 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-label--reverse 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-label--reverse 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-label--reverse 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."
    }
  ],
  variant: "reverse"
}) }}

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 small reverse with long text

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

Venenatis Condimentum

Code

Markup

<div class="nhsuk-form-group">
  <fieldset class="nhsuk-fieldset">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--reverse nhsuk-fieldset__legend--m">
    <h1 class="nhsuk-fieldset__heading">
      Venenatis Condimentum
    </h1>
  </legend>
  <div class="nhsuk-checkboxes nhsuk-checkboxes--reverse 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-label--reverse 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-label--reverse 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-label--reverse 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,
  variant: "reverse"
}) }}

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?

Phone

Text message

None of the above

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 reverse with "none of the above" option

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

How do you want to be contacted about this?

Phone

Text message

None of the above

Code

Markup

<div class="nhsuk-form-group">
  <fieldset class="nhsuk-fieldset">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--reverse nhsuk-fieldset__legend--l">
    <h1 class="nhsuk-fieldset__heading">
      How do you want to be contacted about this?
    </h1>
  </legend>
  <div class="nhsuk-checkboxes nhsuk-checkboxes--reverse" 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-label--reverse 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-label--reverse 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-label--reverse 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-label--reverse 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
    }
  ],
  variant: "reverse"
}) }}

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?

Phone

Text message

None of the above

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 small reverse with "none of the above" option

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

How do you want to be contacted about this?

Phone

Text message

None of the above

Code

Markup

<div class="nhsuk-form-group">
  <fieldset class="nhsuk-fieldset">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--reverse 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--reverse 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-label--reverse 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-label--reverse 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-label--reverse 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-label--reverse 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,
  variant: "reverse"
}) }}

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?

Email address

Phone

Phone number

Text message

Mobile phone number

None of the above

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="contact-by-email">
    Email address
  </label>
  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="contact-by-email" name="contact-by-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="contact-by-phone">
    Phone number
  </label>
  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="contact-by-phone" name="contact-by-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="contact-by-text">
    Mobile phone number
  </label>
  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="contact-by-text" name="contact-by-text" 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="contact-by-email">\n    Email address\n  </label>\n  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="contact-by-email" name="contact-by-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="contact-by-phone">\n    Phone number\n  </label>\n  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="contact-by-phone" name="contact-by-phone" type="tel">\n</div>\n'
      }
    },
    {
      value: "text",
      text: "Text message",
      conditional: {
        html: '<div class="nhsuk-form-group">\n  <label class="nhsuk-label" for="contact-by-text">\n    Mobile phone number\n  </label>\n  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="contact-by-text" name="contact-by-text" type="tel">\n</div>\n'
      }
    },
    {
      divider: "or"
    },
    {
      value: "none",
      text: "None of the above",
      exclusive: true
    }
  ]
}) }}

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

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

How do you want to be contacted about this?

Email address

Phone

Phone number

Text message

Mobile phone number

None of the above

Code

Markup

<div class="nhsuk-form-group">
  <fieldset class="nhsuk-fieldset">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--reverse nhsuk-fieldset__legend--l">
    <h1 class="nhsuk-fieldset__heading">
      How do you want to be contacted about this?
    </h1>
  </legend>
  <div class="nhsuk-checkboxes nhsuk-checkboxes--reverse" 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-label--reverse 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 nhsuk-label--reverse" for="contact-by-email">
    Email address
  </label>
  <input class="nhsuk-input nhsuk-input--reverse nhsuk-u-width-two-thirds" id="contact-by-email" name="contact-by-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-label--reverse 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 nhsuk-label--reverse" for="contact-by-phone">
    Phone number
  </label>
  <input class="nhsuk-input nhsuk-input--reverse nhsuk-u-width-two-thirds" id="contact-by-phone" name="contact-by-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-label--reverse 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 nhsuk-label--reverse" for="contact-by-text">
    Mobile phone number
  </label>
  <input class="nhsuk-input nhsuk-input--reverse nhsuk-u-width-two-thirds" id="contact-by-text" name="contact-by-text" 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-label--reverse 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 nhsuk-label--reverse" for="contact-by-email">\n    Email address\n  </label>\n  <input class="nhsuk-input nhsuk-input--reverse nhsuk-u-width-two-thirds" id="contact-by-email" name="contact-by-email" type="text" spellcheck="false">\n</div>\n'
      }
    },
    {
      value: "phone",
      text: "Phone",
      conditional: {
        html: '<div class="nhsuk-form-group">\n  <label class="nhsuk-label nhsuk-label--reverse" for="contact-by-phone">\n    Phone number\n  </label>\n  <input class="nhsuk-input nhsuk-input--reverse nhsuk-u-width-two-thirds" id="contact-by-phone" name="contact-by-phone" type="tel">\n</div>\n'
      }
    },
    {
      value: "text",
      text: "Text message",
      conditional: {
        html: '<div class="nhsuk-form-group">\n  <label class="nhsuk-label nhsuk-label--reverse" for="contact-by-text">\n    Mobile phone number\n  </label>\n  <input class="nhsuk-input nhsuk-input--reverse nhsuk-u-width-two-thirds" id="contact-by-text" name="contact-by-text" type="tel">\n</div>\n'
      }
    },
    {
      divider: "or"
    },
    {
      value: "none",
      text: "None of the above",
      exclusive: true
    }
  ],
  variant: "reverse"
}) }}

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?

Email address

Phone

Phone number

Text message

Mobile phone number

None of the above

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="contact-by-email">
    Email address
  </label>
  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="contact-by-email" name="contact-by-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="contact-by-phone">
    Phone number
  </label>
  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="contact-by-phone" name="contact-by-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="contact-by-text">
    Mobile phone number
  </label>
  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="contact-by-text" name="contact-by-text" 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="contact-by-email">\n    Email address\n  </label>\n  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="contact-by-email" name="contact-by-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="contact-by-phone">\n    Phone number\n  </label>\n  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="contact-by-phone" name="contact-by-phone" type="tel">\n</div>\n'
      }
    },
    {
      value: "text",
      text: "Text message",
      conditional: {
        html: '<div class="nhsuk-form-group">\n  <label class="nhsuk-label" for="contact-by-text">\n    Mobile phone number\n  </label>\n  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="contact-by-text" name="contact-by-text" type="tel">\n</div>\n'
      }
    },
    {
      divider: "or"
    },
    {
      value: "none",
      text: "None of the above",
      exclusive: true
    }
  ],
  small: true
}) }}

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

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

How do you want to be contacted about this?

Email address

Phone

Phone number

Text message

Mobile phone number

None of the above

Code

Markup

<div class="nhsuk-form-group">
  <fieldset class="nhsuk-fieldset">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--reverse 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--reverse 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-label--reverse 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 nhsuk-label--reverse" for="contact-by-email">
    Email address
  </label>
  <input class="nhsuk-input nhsuk-input--reverse nhsuk-u-width-two-thirds" id="contact-by-email" name="contact-by-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-label--reverse 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 nhsuk-label--reverse" for="contact-by-phone">
    Phone number
  </label>
  <input class="nhsuk-input nhsuk-input--reverse nhsuk-u-width-two-thirds" id="contact-by-phone" name="contact-by-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-label--reverse 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 nhsuk-label--reverse" for="contact-by-text">
    Mobile phone number
  </label>
  <input class="nhsuk-input nhsuk-input--reverse nhsuk-u-width-two-thirds" id="contact-by-text" name="contact-by-text" 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-label--reverse 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 nhsuk-label--reverse" for="contact-by-email">\n    Email address\n  </label>\n  <input class="nhsuk-input nhsuk-input--reverse nhsuk-u-width-two-thirds" id="contact-by-email" name="contact-by-email" type="text" spellcheck="false">\n</div>\n'
      }
    },
    {
      value: "phone",
      text: "Phone",
      conditional: {
        html: '<div class="nhsuk-form-group">\n  <label class="nhsuk-label nhsuk-label--reverse" for="contact-by-phone">\n    Phone number\n  </label>\n  <input class="nhsuk-input nhsuk-input--reverse nhsuk-u-width-two-thirds" id="contact-by-phone" name="contact-by-phone" type="tel">\n</div>\n'
      }
    },
    {
      value: "text",
      text: "Text message",
      conditional: {
        html: '<div class="nhsuk-form-group">\n  <label class="nhsuk-label nhsuk-label--reverse" for="contact-by-text">\n    Mobile phone number\n  </label>\n  <input class="nhsuk-input nhsuk-input--reverse nhsuk-u-width-two-thirds" id="contact-by-text" name="contact-by-text" type="tel">\n</div>\n'
      }
    },
    {
      divider: "or"
    },
    {
      value: "none",
      text: "None of the above",
      exclusive: true
    }
  ],
  small: true,
  variant: "reverse"
}) }}

Checkboxes without fieldset

Open this example in a new tab: Checkboxes without fieldset

Red

Green

Blue

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">
      <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"
    }
  ]
}) }}

Checkboxes reverse without fieldset

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

Red

Green

Blue

Code

Markup

<div class="nhsuk-form-group">
  <div class="nhsuk-checkboxes nhsuk-checkboxes--reverse" 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-label--reverse 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-label--reverse 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">
      <label class="nhsuk-label nhsuk-label--reverse 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"
    }
  ],
  variant: "reverse"
}) }}

Checkboxes small without fieldset

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

Red

Green

Blue

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">
      <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"
    }
  ],
  small: true
}) }}

Checkboxes small reverse without fieldset

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

Red

Green

Blue

Code

Markup

<div class="nhsuk-form-group">
  <div class="nhsuk-checkboxes nhsuk-checkboxes--reverse 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-label--reverse 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-label--reverse 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">
      <label class="nhsuk-label nhsuk-label--reverse 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"
    }
  ],
  small: true,
  variant: "reverse"
}) }}

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

Phone

Text message

Code

Markup

<div class="nhsuk-form-group">
  <fieldset class="nhsuk-fieldset" aria-describedby="without-heading-hint">
  <legend class="nhsuk-fieldset__legend">
    How do you want to be contacted about this?
  </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: false
    }
  },
  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 reverse without page heading

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

How do you want to be contacted about this?

Select all options that are relevant to you

Phone

Text message

Code

Markup

<div class="nhsuk-form-group">
  <fieldset class="nhsuk-fieldset" aria-describedby="without-heading-hint">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--reverse">
    How do you want to be contacted about this?
  </legend>
  <div class="nhsuk-hint nhsuk-hint--reverse" id="without-heading-hint">
    Select all options that are relevant to you
  </div>
  <div class="nhsuk-checkboxes nhsuk-checkboxes--reverse" 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-label--reverse 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-label--reverse 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-label--reverse 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: false
    }
  },
  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"
    }
  ],
  variant: "reverse"
}) }}

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

Phone

Text message

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">
    How do you want to be contacted about this?
  </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: false,
      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 small reverse without page heading

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

How do you want to be contacted about this?

Select all options that are relevant to you

Phone

Text message

Code

Markup

<div class="nhsuk-form-group">
  <fieldset class="nhsuk-fieldset" aria-describedby="without-heading-hint">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--reverse nhsuk-fieldset__legend--m">
    How do you want to be contacted about this?
  </legend>
  <div class="nhsuk-hint nhsuk-hint--reverse" id="without-heading-hint">
    Select all options that are relevant to you
  </div>
  <div class="nhsuk-checkboxes nhsuk-checkboxes--reverse 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-label--reverse 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-label--reverse 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-label--reverse 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: false,
      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,
  variant: "reverse"
}) }}

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

Email address

Phone

Phone number

Text message

Mobile 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="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="contact-by-email">
    Email address
  </label>
  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="contact-by-email" name="contact-by-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="contact-by-phone">
    Phone number
  </label>
  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="contact-by-phone" name="contact-by-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="contact-by-text">
    Mobile phone number
  </label>
  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="contact-by-text" name="contact-by-text" 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="contact-by-email">\n    Email address\n  </label>\n  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="contact-by-email" name="contact-by-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="contact-by-phone">\n    Phone number\n  </label>\n  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="contact-by-phone" name="contact-by-phone" type="tel">\n</div>\n'
      }
    },
    {
      value: "text",
      text: "Text message",
      conditional: {
        html: '<div class="nhsuk-form-group">\n  <label class="nhsuk-label" for="contact-by-text">\n    Mobile phone number\n  </label>\n  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="contact-by-text" name="contact-by-text" type="tel">\n</div>\n'
      }
    }
  ]
}) }}

Checkboxes reverse with pre-checked values

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

How do you want to be contacted about this?

Select all options that are relevant to you

Email address

Phone

Phone number

Text message

Mobile 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--reverse nhsuk-fieldset__legend--l">
    <h1 class="nhsuk-fieldset__heading">
      How do you want to be contacted about this?
    </h1>
  </legend>
  <div class="nhsuk-hint nhsuk-hint--reverse" id="conditional-hint">
    Select all options that are relevant to you
  </div>
  <div class="nhsuk-checkboxes nhsuk-checkboxes--reverse" 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-label--reverse 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 nhsuk-label--reverse" for="contact-by-email">
    Email address
  </label>
  <input class="nhsuk-input nhsuk-input--reverse nhsuk-u-width-two-thirds" id="contact-by-email" name="contact-by-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-label--reverse 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 nhsuk-label--reverse" for="contact-by-phone">
    Phone number
  </label>
  <input class="nhsuk-input nhsuk-input--reverse nhsuk-u-width-two-thirds" id="contact-by-phone" name="contact-by-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-label--reverse 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 nhsuk-label--reverse" for="contact-by-text">
    Mobile phone number
  </label>
  <input class="nhsuk-input nhsuk-input--reverse nhsuk-u-width-two-thirds" id="contact-by-text" name="contact-by-text" 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 nhsuk-label--reverse" for="contact-by-email">\n    Email address\n  </label>\n  <input class="nhsuk-input nhsuk-input--reverse nhsuk-u-width-two-thirds" id="contact-by-email" name="contact-by-email" type="text" spellcheck="false">\n</div>\n'
      }
    },
    {
      value: "phone",
      text: "Phone",
      conditional: {
        html: '<div class="nhsuk-form-group">\n  <label class="nhsuk-label nhsuk-label--reverse" for="contact-by-phone">\n    Phone number\n  </label>\n  <input class="nhsuk-input nhsuk-input--reverse nhsuk-u-width-two-thirds" id="contact-by-phone" name="contact-by-phone" type="tel">\n</div>\n'
      }
    },
    {
      value: "text",
      text: "Text message",
      conditional: {
        html: '<div class="nhsuk-form-group">\n  <label class="nhsuk-label nhsuk-label--reverse" for="contact-by-text">\n    Mobile phone number\n  </label>\n  <input class="nhsuk-input nhsuk-input--reverse nhsuk-u-width-two-thirds" id="contact-by-text" name="contact-by-text" type="tel">\n</div>\n'
      }
    }
  ],
  variant: "reverse"
}) }}

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

Email address

Phone

Phone number

Text message

Mobile 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="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="contact-by-email">
    Email address
  </label>
  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="contact-by-email" name="contact-by-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="contact-by-phone">
    Phone number
  </label>
  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="contact-by-phone" name="contact-by-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="contact-by-text">
    Mobile phone number
  </label>
  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="contact-by-text" name="contact-by-text" 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="contact-by-email">\n    Email address\n  </label>\n  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="contact-by-email" name="contact-by-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="contact-by-phone">\n    Phone number\n  </label>\n  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="contact-by-phone" name="contact-by-phone" type="tel">\n</div>\n'
      }
    },
    {
      value: "text",
      text: "Text message",
      conditional: {
        html: '<div class="nhsuk-form-group">\n  <label class="nhsuk-label" for="contact-by-text">\n    Mobile phone number\n  </label>\n  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="contact-by-text" name="contact-by-text" type="tel">\n</div>\n'
      }
    }
  ],
  small: true
}) }}

Checkboxes small reverse with pre-checked values

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

How do you want to be contacted about this?

Select all options that are relevant to you

Email address

Phone

Phone number

Text message

Mobile 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--reverse nhsuk-fieldset__legend--m">
    <h1 class="nhsuk-fieldset__heading">
      How do you want to be contacted about this?
    </h1>
  </legend>
  <div class="nhsuk-hint nhsuk-hint--reverse" id="conditional-hint">
    Select all options that are relevant to you
  </div>
  <div class="nhsuk-checkboxes nhsuk-checkboxes--reverse 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-label--reverse 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 nhsuk-label--reverse" for="contact-by-email">
    Email address
  </label>
  <input class="nhsuk-input nhsuk-input--reverse nhsuk-u-width-two-thirds" id="contact-by-email" name="contact-by-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-label--reverse 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 nhsuk-label--reverse" for="contact-by-phone">
    Phone number
  </label>
  <input class="nhsuk-input nhsuk-input--reverse nhsuk-u-width-two-thirds" id="contact-by-phone" name="contact-by-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-label--reverse 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 nhsuk-label--reverse" for="contact-by-text">
    Mobile phone number
  </label>
  <input class="nhsuk-input nhsuk-input--reverse nhsuk-u-width-two-thirds" id="contact-by-text" name="contact-by-text" 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 nhsuk-label--reverse" for="contact-by-email">\n    Email address\n  </label>\n  <input class="nhsuk-input nhsuk-input--reverse nhsuk-u-width-two-thirds" id="contact-by-email" name="contact-by-email" type="text" spellcheck="false">\n</div>\n'
      }
    },
    {
      value: "phone",
      text: "Phone",
      conditional: {
        html: '<div class="nhsuk-form-group">\n  <label class="nhsuk-label nhsuk-label--reverse" for="contact-by-phone">\n    Phone number\n  </label>\n  <input class="nhsuk-input nhsuk-input--reverse nhsuk-u-width-two-thirds" id="contact-by-phone" name="contact-by-phone" type="tel">\n</div>\n'
      }
    },
    {
      value: "text",
      text: "Text message",
      conditional: {
        html: '<div class="nhsuk-form-group">\n  <label class="nhsuk-label nhsuk-label--reverse" for="contact-by-text">\n    Mobile phone number\n  </label>\n  <input class="nhsuk-input nhsuk-input--reverse nhsuk-u-width-two-thirds" id="contact-by-text" name="contact-by-text" type="tel">\n</div>\n'
      }
    }
  ],
  small: true,
  variant: "reverse"
}) }}