Skip to main content

This is an internal development app.

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

Radios

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

Radios default

Open this example in a new tab: Radios default

Are you 18 or over?

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">
      Are you 18 or over?
    </h1>
  </legend>
  <div class="nhsuk-radios" data-module="nhsuk-radios">
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="example" name="example" type="radio" value="yes">
      <label class="nhsuk-label nhsuk-radios__label" for="example">
        Yes
      </label>
    </div>
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="example-2" name="example" type="radio" value="no">
      <label class="nhsuk-label nhsuk-radios__label" for="example-2">
        No
      </label>
    </div>
  </div>
</fieldset>
</div>

Macro

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

{{ radios({
  fieldset: {
    legend: {
      text: "Are you 18 or over?",
      size: "l",
      isPageHeading: true
    }
  },
  name: "example",
  items: [
    {
      value: "yes",
      text: "Yes"
    },
    {
      value: "no",
      text: "No"
    }
  ]
}) }}

Radios small default

Open this example in a new tab: Radios small default

Are you 18 or over?

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">
      Are you 18 or over?
    </h1>
  </legend>
  <div class="nhsuk-radios nhsuk-radios--small" data-module="nhsuk-radios">
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="example" name="example" type="radio" value="yes">
      <label class="nhsuk-label nhsuk-radios__label" for="example">
        Yes
      </label>
    </div>
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="example-2" name="example" type="radio" value="no">
      <label class="nhsuk-label nhsuk-radios__label" for="example-2">
        No
      </label>
    </div>
  </div>
</fieldset>
</div>

Macro

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

{{ radios({
  fieldset: {
    legend: {
      text: "Are you 18 or over?",
      size: "m",
      isPageHeading: true
    }
  },
  name: "example",
  items: [
    {
      value: "yes",
      text: "Yes"
    },
    {
      value: "no",
      text: "No"
    }
  ],
  small: true
}) }}

Radios inline

Open this example in a new tab: Radios inline

Are you 18 or over?

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">
      Are you 18 or over?
    </h1>
  </legend>
  <div class="nhsuk-radios nhsuk-radios--inline" data-module="nhsuk-radios">
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="inline" name="example" type="radio" value="yes">
      <label class="nhsuk-label nhsuk-radios__label" for="inline">
        Yes
      </label>
    </div>
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="inline-2" name="example" type="radio" value="no" checked>
      <label class="nhsuk-label nhsuk-radios__label" for="inline-2">
        No
      </label>
    </div>
  </div>
</fieldset>
</div>

Macro

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

{{ radios({
  inline: true,
  fieldset: {
    legend: {
      text: "Are you 18 or over?",
      size: "l",
      isPageHeading: true
    }
  },
  idPrefix: "inline",
  name: "example",
  value: "no",
  items: [
    {
      value: "yes",
      text: "Yes"
    },
    {
      value: "no",
      text: "No"
    }
  ]
}) }}

Radios small inline

Open this example in a new tab: Radios small inline

Are you 18 or over?

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">
      Are you 18 or over?
    </h1>
  </legend>
  <div class="nhsuk-radios nhsuk-radios--small nhsuk-radios--inline" data-module="nhsuk-radios">
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="inline" name="example" type="radio" value="yes">
      <label class="nhsuk-label nhsuk-radios__label" for="inline">
        Yes
      </label>
    </div>
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="inline-2" name="example" type="radio" value="no" checked>
      <label class="nhsuk-label nhsuk-radios__label" for="inline-2">
        No
      </label>
    </div>
  </div>
</fieldset>
</div>

Macro

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

{{ radios({
  inline: true,
  fieldset: {
    legend: {
      text: "Are you 18 or over?",
      size: "m",
      isPageHeading: true
    }
  },
  idPrefix: "inline",
  name: "example",
  value: "no",
  items: [
    {
      value: "yes",
      text: "Yes"
    },
    {
      value: "no",
      text: "No"
    }
  ],
  small: true
}) }}

Radios with size S legend

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

Are you 18 or over?
Code

Markup

<div class="nhsuk-form-group">
  <fieldset class="nhsuk-fieldset">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--s">
    Are you 18 or over?
  </legend>
  <div class="nhsuk-radios" data-module="nhsuk-radios">
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="custom-size" name="example" type="radio" value="yes">
      <label class="nhsuk-label nhsuk-radios__label" for="custom-size">
        Yes
      </label>
    </div>
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="custom-size-2" name="example" type="radio" value="no">
      <label class="nhsuk-label nhsuk-radios__label" for="custom-size-2">
        No
      </label>
    </div>
  </div>
</fieldset>
</div>

Macro

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

{{ radios({
  fieldset: {
    legend: {
      text: "Are you 18 or over?",
      size: "s"
    }
  },
  idPrefix: "custom-size",
  name: "example",
  items: [
    {
      value: "yes",
      text: "Yes"
    },
    {
      value: "no",
      text: "No"
    }
  ]
}) }}

Radios with size M legend

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

Are you 18 or over?
Code

Markup

<div class="nhsuk-form-group">
  <fieldset class="nhsuk-fieldset">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--m">
    Are you 18 or over?
  </legend>
  <div class="nhsuk-radios" data-module="nhsuk-radios">
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="custom-size" name="example" type="radio" value="yes">
      <label class="nhsuk-label nhsuk-radios__label" for="custom-size">
        Yes
      </label>
    </div>
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="custom-size-2" name="example" type="radio" value="no">
      <label class="nhsuk-label nhsuk-radios__label" for="custom-size-2">
        No
      </label>
    </div>
  </div>
</fieldset>
</div>

Macro

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

{{ radios({
  fieldset: {
    legend: {
      text: "Are you 18 or over?",
      size: "m"
    }
  },
  idPrefix: "custom-size",
  name: "example",
  items: [
    {
      value: "yes",
      text: "Yes"
    },
    {
      value: "no",
      text: "No"
    }
  ]
}) }}

Radios with size L legend

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

Are you 18 or over?
Code

Markup

<div class="nhsuk-form-group">
  <fieldset class="nhsuk-fieldset">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--l">
    Are you 18 or over?
  </legend>
  <div class="nhsuk-radios" data-module="nhsuk-radios">
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="custom-size" name="example" type="radio" value="yes">
      <label class="nhsuk-label nhsuk-radios__label" for="custom-size">
        Yes
      </label>
    </div>
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="custom-size-2" name="example" type="radio" value="no">
      <label class="nhsuk-label nhsuk-radios__label" for="custom-size-2">
        No
      </label>
    </div>
  </div>
</fieldset>
</div>

Macro

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

{{ radios({
  fieldset: {
    legend: {
      text: "Are you 18 or over?",
      size: "l"
    }
  },
  idPrefix: "custom-size",
  name: "example",
  items: [
    {
      value: "yes",
      text: "Yes"
    },
    {
      value: "no",
      text: "No"
    }
  ]
}) }}

Radios with size XL legend

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

Are you 18 or over?
Code

Markup

<div class="nhsuk-form-group">
  <fieldset class="nhsuk-fieldset">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--xl">
    Are you 18 or over?
  </legend>
  <div class="nhsuk-radios" data-module="nhsuk-radios">
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="custom-size" name="example" type="radio" value="yes">
      <label class="nhsuk-label nhsuk-radios__label" for="custom-size">
        Yes
      </label>
    </div>
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="custom-size-2" name="example" type="radio" value="no">
      <label class="nhsuk-label nhsuk-radios__label" for="custom-size-2">
        No
      </label>
    </div>
  </div>
</fieldset>
</div>

Macro

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

{{ radios({
  fieldset: {
    legend: {
      text: "Are you 18 or over?",
      size: "xl"
    }
  },
  idPrefix: "custom-size",
  name: "example",
  items: [
    {
      value: "yes",
      text: "Yes"
    },
    {
      value: "no",
      text: "No"
    }
  ]
}) }}

Radios with conditional content

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

How do you want to be contacted about this?

Select 1 option
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 1 option
  </div>
  <div class="nhsuk-radios" data-module="nhsuk-radios">
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="conditional" name="example" type="radio" value="email" data-aria-controls="conditional-conditional">
      <label class="nhsuk-label nhsuk-radios__label" for="conditional">
        Email
      </label>
    </div>
    <div class="nhsuk-radios__conditional nhsuk-radios__conditional--hidden" id="conditional-conditional">
      <div class="nhsuk-form-group">
  <label class="nhsuk-label" for="email">
    Email address
  </label>
  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="email" name="email" type="text" spellcheck="false">
</div>
    </div>
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="conditional-2" name="example" type="radio" value="phone" data-aria-controls="conditional-conditional-2">
      <label class="nhsuk-label nhsuk-radios__label" for="conditional-2">
        Phone
      </label>
    </div>
    <div class="nhsuk-radios__conditional nhsuk-radios__conditional--hidden" id="conditional-conditional-2">
      <div class="nhsuk-form-group">
  <label class="nhsuk-label" for="phone">
    Phone number
  </label>
  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="phone" name="phone" type="tel">
</div>
    </div>
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="conditional-3" name="example" type="radio" value="text" data-aria-controls="conditional-conditional-3">
      <label class="nhsuk-label nhsuk-radios__label" for="conditional-3">
        Text message
      </label>
    </div>
    <div class="nhsuk-radios__conditional nhsuk-radios__conditional--hidden" id="conditional-conditional-3">
      <div class="nhsuk-form-group">
  <label class="nhsuk-label" for="mobile">
    Mobile phone number
  </label>
  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="mobile" name="mobile" type="tel">
</div>
    </div>
  </div>
</fieldset>
</div>

Macro

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

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

Radios small with conditional content

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

How do you want to be contacted about this?

Select 1 option
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 1 option
  </div>
  <div class="nhsuk-radios nhsuk-radios--small" data-module="nhsuk-radios">
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="conditional" name="example" type="radio" value="email" data-aria-controls="conditional-conditional">
      <label class="nhsuk-label nhsuk-radios__label" for="conditional">
        Email
      </label>
    </div>
    <div class="nhsuk-radios__conditional nhsuk-radios__conditional--hidden" id="conditional-conditional">
      <div class="nhsuk-form-group">
  <label class="nhsuk-label" for="email">
    Email address
  </label>
  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="email" name="email" type="text" spellcheck="false">
</div>
    </div>
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="conditional-2" name="example" type="radio" value="phone" data-aria-controls="conditional-conditional-2">
      <label class="nhsuk-label nhsuk-radios__label" for="conditional-2">
        Phone
      </label>
    </div>
    <div class="nhsuk-radios__conditional nhsuk-radios__conditional--hidden" id="conditional-conditional-2">
      <div class="nhsuk-form-group">
  <label class="nhsuk-label" for="phone">
    Phone number
  </label>
  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="phone" name="phone" type="tel">
</div>
    </div>
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="conditional-3" name="example" type="radio" value="text" data-aria-controls="conditional-conditional-3">
      <label class="nhsuk-label nhsuk-radios__label" for="conditional-3">
        Text message
      </label>
    </div>
    <div class="nhsuk-radios__conditional nhsuk-radios__conditional--hidden" id="conditional-conditional-3">
      <div class="nhsuk-form-group">
  <label class="nhsuk-label" for="mobile">
    Mobile phone number
  </label>
  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="mobile" name="mobile" type="tel">
</div>
    </div>
  </div>
</fieldset>
</div>

Macro

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

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

Radios with conditional content, error message

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

How do you want to be contacted about this?

Select 1 option

Error: Select how you prefer to be contacted

Code

Markup

<div class="nhsuk-form-group nhsuk-form-group--error">
  <fieldset class="nhsuk-fieldset" aria-describedby="conditional-hint conditional-error">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--l">
    <h1 class="nhsuk-fieldset__heading">
      How do you want to be contacted about this?
    </h1>
  </legend>
  <div class="nhsuk-hint" id="conditional-hint">
    Select 1 option
  </div>
  <p class="nhsuk-error-message" id="conditional-error">
    <span class="nhsuk-u-visually-hidden">Error:</span> Select how you prefer to be contacted
  </p>
  <div class="nhsuk-radios" data-module="nhsuk-radios">
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="conditional" name="example" type="radio" value="email" data-aria-controls="conditional-conditional">
      <label class="nhsuk-label nhsuk-radios__label" for="conditional">
        Email
      </label>
    </div>
    <div class="nhsuk-radios__conditional nhsuk-radios__conditional--hidden" id="conditional-conditional">
      <div class="nhsuk-form-group">
  <label class="nhsuk-label" for="email">
    Email address
  </label>
  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="email" name="email" type="text" spellcheck="false">
</div>
    </div>
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="conditional-2" name="example" type="radio" value="phone" data-aria-controls="conditional-conditional-2">
      <label class="nhsuk-label nhsuk-radios__label" for="conditional-2">
        Phone
      </label>
    </div>
    <div class="nhsuk-radios__conditional nhsuk-radios__conditional--hidden" id="conditional-conditional-2">
      <div class="nhsuk-form-group">
  <label class="nhsuk-label" for="phone">
    Phone number
  </label>
  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="phone" name="phone" type="tel">
</div>
    </div>
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="conditional-3" name="example" type="radio" value="text" data-aria-controls="conditional-conditional-3">
      <label class="nhsuk-label nhsuk-radios__label" for="conditional-3">
        Text message
      </label>
    </div>
    <div class="nhsuk-radios__conditional nhsuk-radios__conditional--hidden" id="conditional-conditional-3">
      <div class="nhsuk-form-group">
  <label class="nhsuk-label" for="mobile">
    Mobile phone number
  </label>
  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="mobile" name="mobile" type="tel">
</div>
    </div>
  </div>
</fieldset>
</div>

Macro

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

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

Radios small with conditional content, error message

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

How do you want to be contacted about this?

Select 1 option

Error: Select how you prefer to be contacted

Code

Markup

<div class="nhsuk-form-group nhsuk-form-group--error">
  <fieldset class="nhsuk-fieldset" aria-describedby="conditional-hint conditional-error">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--m">
    <h1 class="nhsuk-fieldset__heading">
      How do you want to be contacted about this?
    </h1>
  </legend>
  <div class="nhsuk-hint" id="conditional-hint">
    Select 1 option
  </div>
  <p class="nhsuk-error-message" id="conditional-error">
    <span class="nhsuk-u-visually-hidden">Error:</span> Select how you prefer to be contacted
  </p>
  <div class="nhsuk-radios nhsuk-radios--small" data-module="nhsuk-radios">
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="conditional" name="example" type="radio" value="email" data-aria-controls="conditional-conditional">
      <label class="nhsuk-label nhsuk-radios__label" for="conditional">
        Email
      </label>
    </div>
    <div class="nhsuk-radios__conditional nhsuk-radios__conditional--hidden" id="conditional-conditional">
      <div class="nhsuk-form-group">
  <label class="nhsuk-label" for="email">
    Email address
  </label>
  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="email" name="email" type="text" spellcheck="false">
</div>
    </div>
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="conditional-2" name="example" type="radio" value="phone" data-aria-controls="conditional-conditional-2">
      <label class="nhsuk-label nhsuk-radios__label" for="conditional-2">
        Phone
      </label>
    </div>
    <div class="nhsuk-radios__conditional nhsuk-radios__conditional--hidden" id="conditional-conditional-2">
      <div class="nhsuk-form-group">
  <label class="nhsuk-label" for="phone">
    Phone number
  </label>
  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="phone" name="phone" type="tel">
</div>
    </div>
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="conditional-3" name="example" type="radio" value="text" data-aria-controls="conditional-conditional-3">
      <label class="nhsuk-label nhsuk-radios__label" for="conditional-3">
        Text message
      </label>
    </div>
    <div class="nhsuk-radios__conditional nhsuk-radios__conditional--hidden" id="conditional-conditional-3">
      <div class="nhsuk-form-group">
  <label class="nhsuk-label" for="mobile">
    Mobile phone number
  </label>
  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="mobile" name="mobile" type="tel">
</div>
    </div>
  </div>
</fieldset>
</div>

Macro

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

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

Radios with conditional content, error message (nested)

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

How do you want to be contacted about this?

Select 1 option

Error: Enter your phone number

Code

Markup

<div class="nhsuk-form-group">
  <fieldset class="nhsuk-fieldset" aria-describedby="conditional-hint">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--l">
    <h1 class="nhsuk-fieldset__heading">
      How do you want to be contacted about this?
    </h1>
  </legend>
  <div class="nhsuk-hint" id="conditional-hint">
    Select 1 option
  </div>
  <div class="nhsuk-radios" data-module="nhsuk-radios">
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="conditional" name="example" type="radio" value="email" data-aria-controls="conditional-conditional">
      <label class="nhsuk-label nhsuk-radios__label" for="conditional">
        Email
      </label>
    </div>
    <div class="nhsuk-radios__conditional nhsuk-radios__conditional--hidden" id="conditional-conditional">
      <div class="nhsuk-form-group">
  <label class="nhsuk-label" for="email">
    Email address
  </label>
  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="email" name="email" type="text" spellcheck="false">
</div>
    </div>
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="conditional-2" name="example" type="radio" value="phone" checked data-aria-controls="conditional-conditional-2">
      <label class="nhsuk-label nhsuk-radios__label" for="conditional-2">
        Phone
      </label>
    </div>
    <div class="nhsuk-radios__conditional" id="conditional-conditional-2">
      <div class="nhsuk-form-group nhsuk-form-group--error">
  <label class="nhsuk-label" for="phone">
    Phone number
  </label>
  <p class="nhsuk-error-message" id="phone-error">
    <span class="nhsuk-u-visually-hidden">Error:</span> Enter your phone number
  </p>
  <input class="nhsuk-input nhsuk-input--error nhsuk-u-width-two-thirds" id="phone" name="phone" type="tel" aria-describedby="phone-error">
</div>
    </div>
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="conditional-3" name="example" type="radio" value="text" data-aria-controls="conditional-conditional-3">
      <label class="nhsuk-label nhsuk-radios__label" for="conditional-3">
        Text message
      </label>
    </div>
    <div class="nhsuk-radios__conditional nhsuk-radios__conditional--hidden" id="conditional-conditional-3">
      <div class="nhsuk-form-group">
  <label class="nhsuk-label" for="mobile">
    Mobile phone number
  </label>
  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="mobile" name="mobile" type="tel">
</div>
    </div>
  </div>
</fieldset>
</div>

Macro

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

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

Radios small with conditional content, error message (nested)

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

How do you want to be contacted about this?

Select 1 option

Error: Enter your phone number

Code

Markup

<div class="nhsuk-form-group">
  <fieldset class="nhsuk-fieldset" aria-describedby="conditional-hint">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--m">
    <h1 class="nhsuk-fieldset__heading">
      How do you want to be contacted about this?
    </h1>
  </legend>
  <div class="nhsuk-hint" id="conditional-hint">
    Select 1 option
  </div>
  <div class="nhsuk-radios nhsuk-radios--small" data-module="nhsuk-radios">
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="conditional" name="example" type="radio" value="email" data-aria-controls="conditional-conditional">
      <label class="nhsuk-label nhsuk-radios__label" for="conditional">
        Email
      </label>
    </div>
    <div class="nhsuk-radios__conditional nhsuk-radios__conditional--hidden" id="conditional-conditional">
      <div class="nhsuk-form-group">
  <label class="nhsuk-label" for="email">
    Email address
  </label>
  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="email" name="email" type="text" spellcheck="false">
</div>
    </div>
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="conditional-2" name="example" type="radio" value="phone" checked data-aria-controls="conditional-conditional-2">
      <label class="nhsuk-label nhsuk-radios__label" for="conditional-2">
        Phone
      </label>
    </div>
    <div class="nhsuk-radios__conditional" id="conditional-conditional-2">
      <div class="nhsuk-form-group nhsuk-form-group--error">
  <label class="nhsuk-label" for="phone">
    Phone number
  </label>
  <p class="nhsuk-error-message" id="phone-error">
    <span class="nhsuk-u-visually-hidden">Error:</span> Enter your phone number
  </p>
  <input class="nhsuk-input nhsuk-input--error nhsuk-u-width-two-thirds" id="phone" name="phone" type="tel" aria-describedby="phone-error">
</div>
    </div>
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="conditional-3" name="example" type="radio" value="text" data-aria-controls="conditional-conditional-3">
      <label class="nhsuk-label nhsuk-radios__label" for="conditional-3">
        Text message
      </label>
    </div>
    <div class="nhsuk-radios__conditional nhsuk-radios__conditional--hidden" id="conditional-conditional-3">
      <div class="nhsuk-form-group">
  <label class="nhsuk-label" for="mobile">
    Mobile phone number
  </label>
  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="mobile" name="mobile" type="tel">
</div>
    </div>
  </div>
</fieldset>
</div>

Macro

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

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

Radios with disabled item

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

Have you changed your name?

This includes changing your last name or spelling your name differently
Code

Markup

<div class="nhsuk-form-group">
  <fieldset class="nhsuk-fieldset" aria-describedby="with-disabled-item-hint">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--l">
    <h1 class="nhsuk-fieldset__heading">
      Have you changed your name?
    </h1>
  </legend>
  <div class="nhsuk-hint" id="with-disabled-item-hint">
    This includes changing your last name or spelling your name differently
  </div>
  <div class="nhsuk-radios" data-module="nhsuk-radios">
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="with-disabled-item" name="example" type="radio" value="yes" disabled>
      <label class="nhsuk-label nhsuk-radios__label" for="with-disabled-item">
        Yes
      </label>
    </div>
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="with-disabled-item-2" name="example" type="radio" value="no" disabled>
      <label class="nhsuk-label nhsuk-radios__label" for="with-disabled-item-2">
        No
      </label>
    </div>
  </div>
</fieldset>
</div>

Macro

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

{{ radios({
  fieldset: {
    legend: {
      text: "Have you changed your name?",
      size: "l",
      isPageHeading: true
    }
  },
  hint: {
    text: "This includes changing your last name or spelling your name differently"
  },
  idPrefix: "with-disabled-item",
  name: "example",
  items: [
    {
      value: "yes",
      text: "Yes",
      disabled: true
    },
    {
      value: "no",
      text: "No",
      disabled: true
    }
  ]
}) }}

Radios small with disabled item

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

Have you changed your name?

This includes changing your last name or spelling your name differently
Code

Markup

<div class="nhsuk-form-group">
  <fieldset class="nhsuk-fieldset" aria-describedby="with-disabled-item-hint">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--m">
    <h1 class="nhsuk-fieldset__heading">
      Have you changed your name?
    </h1>
  </legend>
  <div class="nhsuk-hint" id="with-disabled-item-hint">
    This includes changing your last name or spelling your name differently
  </div>
  <div class="nhsuk-radios nhsuk-radios--small" data-module="nhsuk-radios">
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="with-disabled-item" name="example" type="radio" value="yes" disabled>
      <label class="nhsuk-label nhsuk-radios__label" for="with-disabled-item">
        Yes
      </label>
    </div>
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="with-disabled-item-2" name="example" type="radio" value="no" disabled>
      <label class="nhsuk-label nhsuk-radios__label" for="with-disabled-item-2">
        No
      </label>
    </div>
  </div>
</fieldset>
</div>

Macro

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

{{ radios({
  fieldset: {
    legend: {
      text: "Have you changed your name?",
      size: "m",
      isPageHeading: true
    }
  },
  hint: {
    text: "This includes changing your last name or spelling your name differently"
  },
  idPrefix: "with-disabled-item",
  name: "example",
  items: [
    {
      value: "yes",
      text: "Yes",
      disabled: true
    },
    {
      value: "no",
      text: "No",
      disabled: true
    }
  ],
  small: true
}) }}

Radios with divider

Open this example in a new tab: Radios with divider

How do you want to sign in?

or
Code

Markup

<div class="nhsuk-form-group">
  <fieldset class="nhsuk-fieldset">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--l">
    <h1 class="nhsuk-fieldset__heading">
      How do you want to sign in?
    </h1>
  </legend>
  <div class="nhsuk-radios" data-module="nhsuk-radios">
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="with-divider" name="example" type="radio" value="nhsuk-login">
      <label class="nhsuk-label nhsuk-radios__label" for="with-divider">
        Use NHS login
      </label>
    </div>
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="with-divider-2" name="example" type="radio" value="government-verify">
      <label class="nhsuk-label nhsuk-radios__label" for="with-divider-2">
        Use GOV.UK Verify
      </label>
    </div>
    <div class="nhsuk-radios__divider">or</div>
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="with-divider-4" name="example" type="radio" value="create-account">
      <label class="nhsuk-label nhsuk-radios__label" for="with-divider-4">
        Create an account
      </label>
    </div>
  </div>
</fieldset>
</div>

Macro

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

{{ radios({
  fieldset: {
    legend: {
      text: "How do you want to sign in?",
      size: "l",
      isPageHeading: true
    }
  },
  idPrefix: "with-divider",
  name: "example",
  items: [
    {
      value: "nhsuk-login",
      text: "Use NHS login"
    },
    {
      value: "government-verify",
      text: "Use GOV.UK Verify"
    },
    {
      divider: "or"
    },
    {
      value: "create-account",
      text: "Create an account"
    }
  ]
}) }}

Radios small with divider

Open this example in a new tab: Radios small with divider

How do you want to sign in?

or
Code

Markup

<div class="nhsuk-form-group">
  <fieldset class="nhsuk-fieldset">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--m">
    <h1 class="nhsuk-fieldset__heading">
      How do you want to sign in?
    </h1>
  </legend>
  <div class="nhsuk-radios nhsuk-radios--small" data-module="nhsuk-radios">
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="with-divider" name="example" type="radio" value="nhsuk-login">
      <label class="nhsuk-label nhsuk-radios__label" for="with-divider">
        Use NHS login
      </label>
    </div>
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="with-divider-2" name="example" type="radio" value="government-verify">
      <label class="nhsuk-label nhsuk-radios__label" for="with-divider-2">
        Use GOV.UK Verify
      </label>
    </div>
    <div class="nhsuk-radios__divider">or</div>
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="with-divider-4" name="example" type="radio" value="create-account">
      <label class="nhsuk-label nhsuk-radios__label" for="with-divider-4">
        Create an account
      </label>
    </div>
  </div>
</fieldset>
</div>

Macro

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

{{ radios({
  fieldset: {
    legend: {
      text: "How do you want to sign in?",
      size: "m",
      isPageHeading: true
    }
  },
  idPrefix: "with-divider",
  name: "example",
  items: [
    {
      value: "nhsuk-login",
      text: "Use NHS login"
    },
    {
      value: "government-verify",
      text: "Use GOV.UK Verify"
    },
    {
      divider: "or"
    },
    {
      value: "create-account",
      text: "Create an account"
    }
  ],
  small: true
}) }}

Radios with error message

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

Have you changed your name?

Error: Select yes if you have changed your name

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">
      Have you changed your name?
    </h1>
  </legend>
  <p class="nhsuk-error-message" id="with-error-message-error">
    <span class="nhsuk-u-visually-hidden">Error:</span> Select yes if you have changed your name
  </p>
  <div class="nhsuk-radios" data-module="nhsuk-radios">
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="with-error-message" name="example" type="radio" value="yes">
      <label class="nhsuk-label nhsuk-radios__label" for="with-error-message">
        Yes
      </label>
    </div>
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="with-error-message-2" name="example" type="radio" value="no">
      <label class="nhsuk-label nhsuk-radios__label" for="with-error-message-2">
        No
      </label>
    </div>
  </div>
</fieldset>
</div>

Macro

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

{{ radios({
  fieldset: {
    legend: {
      text: "Have you changed your name?",
      size: "l",
      isPageHeading: true
    }
  },
  errorMessage: {
    text: "Select yes if you have changed your name"
  },
  idPrefix: "with-error-message",
  name: "example",
  items: [
    {
      value: "yes",
      text: "Yes"
    },
    {
      value: "no",
      text: "No"
    }
  ]
}) }}

Radios small with error message

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

Have you changed your name?

Error: Select yes if you have changed your name

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">
      Have you changed your name?
    </h1>
  </legend>
  <p class="nhsuk-error-message" id="with-error-message-error">
    <span class="nhsuk-u-visually-hidden">Error:</span> Select yes if you have changed your name
  </p>
  <div class="nhsuk-radios nhsuk-radios--small" data-module="nhsuk-radios">
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="with-error-message" name="example" type="radio" value="yes">
      <label class="nhsuk-label nhsuk-radios__label" for="with-error-message">
        Yes
      </label>
    </div>
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="with-error-message-2" name="example" type="radio" value="no">
      <label class="nhsuk-label nhsuk-radios__label" for="with-error-message-2">
        No
      </label>
    </div>
  </div>
</fieldset>
</div>

Macro

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

{{ radios({
  fieldset: {
    legend: {
      text: "Have you changed your name?",
      size: "m",
      isPageHeading: true
    }
  },
  errorMessage: {
    text: "Select yes if you have changed your name"
  },
  idPrefix: "with-error-message",
  name: "example",
  items: [
    {
      value: "yes",
      text: "Yes"
    },
    {
      value: "no",
      text: "No"
    }
  ],
  small: true
}) }}

Radios with hint

Open this example in a new tab: Radios with hint

Do you know your NHS number?

This is a 10 digit number (like 999 123 4567) that you can find on an NHS letter, prescription or in the NHS App
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">
      Do you know your NHS number?
    </h1>
  </legend>
  <div class="nhsuk-hint" id="with-hint-hint">
    This is a 10 digit number (like <span class="nhsuk-u-nowrap">999 123 4567</span>) that you can find on an NHS letter, prescription or in the NHS App
  </div>
  <div class="nhsuk-radios" data-module="nhsuk-radios">
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="with-hint" name="example" type="radio" value="yes">
      <label class="nhsuk-label nhsuk-radios__label" for="with-hint">
        Yes, I know my NHS number
      </label>
    </div>
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="with-hint-2" name="example" type="radio" value="no">
      <label class="nhsuk-label nhsuk-radios__label" for="with-hint-2">
        No, I do not know my NHS number
      </label>
    </div>
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="with-hint-3" name="example" type="radio" value="not sure">
      <label class="nhsuk-label nhsuk-radios__label" for="with-hint-3">
        I'm not sure
      </label>
    </div>
  </div>
</fieldset>
</div>

Macro

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

{{ radios({
  fieldset: {
    legend: {
      text: "Do you know your NHS number?",
      size: "l",
      isPageHeading: true
    }
  },
  hint: {
    html: 'This is a 10 digit number (like <span class="nhsuk-u-nowrap">999 123 4567</span>) that you can find on an NHS letter, prescription or in the NHS App'
  },
  idPrefix: "with-hint",
  name: "example",
  items: [
    {
      value: "yes",
      text: "Yes, I know my NHS number"
    },
    {
      value: "no",
      text: "No, I do not know my NHS number"
    },
    {
      value: "not sure",
      text: "I'm not sure"
    }
  ]
}) }}

Radios small with hint

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

Do you know your NHS number?

This is a 10 digit number (like 999 123 4567) that you can find on an NHS letter, prescription or in the NHS App
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">
      Do you know your NHS number?
    </h1>
  </legend>
  <div class="nhsuk-hint" id="with-hint-hint">
    This is a 10 digit number (like <span class="nhsuk-u-nowrap">999 123 4567</span>) that you can find on an NHS letter, prescription or in the NHS App
  </div>
  <div class="nhsuk-radios nhsuk-radios--small" data-module="nhsuk-radios">
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="with-hint" name="example" type="radio" value="yes">
      <label class="nhsuk-label nhsuk-radios__label" for="with-hint">
        Yes, I know my NHS number
      </label>
    </div>
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="with-hint-2" name="example" type="radio" value="no">
      <label class="nhsuk-label nhsuk-radios__label" for="with-hint-2">
        No, I do not know my NHS number
      </label>
    </div>
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="with-hint-3" name="example" type="radio" value="not sure">
      <label class="nhsuk-label nhsuk-radios__label" for="with-hint-3">
        I'm not sure
      </label>
    </div>
  </div>
</fieldset>
</div>

Macro

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

{{ radios({
  fieldset: {
    legend: {
      text: "Do you know your NHS number?",
      size: "m",
      isPageHeading: true
    }
  },
  hint: {
    html: 'This is a 10 digit number (like <span class="nhsuk-u-nowrap">999 123 4567</span>) that you can find on an NHS letter, prescription or in the NHS App'
  },
  idPrefix: "with-hint",
  name: "example",
  items: [
    {
      value: "yes",
      text: "Yes, I know my NHS number"
    },
    {
      value: "no",
      text: "No, I do not know my NHS number"
    },
    {
      value: "not sure",
      text: "I'm not sure"
    }
  ],
  small: true
}) }}

Radios with hint and error

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

Have you changed your name?

This includes changing your last name or spelling your name differently

Error: Select yes if you have changed your name

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">
      Have you changed your name?
    </h1>
  </legend>
  <div class="nhsuk-hint" id="with-hint-error-hint">
    This includes changing your last name or spelling your name differently
  </div>
  <p class="nhsuk-error-message" id="with-hint-error-error">
    <span class="nhsuk-u-visually-hidden">Error:</span> Select yes if you have changed your name
  </p>
  <div class="nhsuk-radios" data-module="nhsuk-radios">
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="with-hint-error" name="example" type="radio" value="yes">
      <label class="nhsuk-label nhsuk-radios__label" for="with-hint-error">
        Yes
      </label>
    </div>
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="with-hint-error-2" name="example" type="radio" value="no">
      <label class="nhsuk-label nhsuk-radios__label" for="with-hint-error-2">
        No
      </label>
    </div>
  </div>
</fieldset>
</div>

Macro

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

{{ radios({
  fieldset: {
    legend: {
      text: "Have you changed your name?",
      size: "l",
      isPageHeading: true
    }
  },
  hint: {
    text: "This includes changing your last name or spelling your name differently"
  },
  errorMessage: {
    text: "Select yes if you have changed your name"
  },
  idPrefix: "with-hint-error",
  name: "example",
  items: [
    {
      value: "yes",
      text: "Yes"
    },
    {
      value: "no",
      text: "No"
    }
  ]
}) }}

Radios small with hint and error

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

Have you changed your name?

This includes changing your last name or spelling your name differently

Error: Select yes if you have changed your name

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">
      Have you changed your name?
    </h1>
  </legend>
  <div class="nhsuk-hint" id="with-hint-error-hint">
    This includes changing your last name or spelling your name differently
  </div>
  <p class="nhsuk-error-message" id="with-hint-error-error">
    <span class="nhsuk-u-visually-hidden">Error:</span> Select yes if you have changed your name
  </p>
  <div class="nhsuk-radios nhsuk-radios--small" data-module="nhsuk-radios">
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="with-hint-error" name="example" type="radio" value="yes">
      <label class="nhsuk-label nhsuk-radios__label" for="with-hint-error">
        Yes
      </label>
    </div>
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="with-hint-error-2" name="example" type="radio" value="no">
      <label class="nhsuk-label nhsuk-radios__label" for="with-hint-error-2">
        No
      </label>
    </div>
  </div>
</fieldset>
</div>

Macro

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

{{ radios({
  fieldset: {
    legend: {
      text: "Have you changed your name?",
      size: "m",
      isPageHeading: true
    }
  },
  hint: {
    text: "This includes changing your last name or spelling your name differently"
  },
  errorMessage: {
    text: "Select yes if you have changed your name"
  },
  idPrefix: "with-hint-error",
  name: "example",
  items: [
    {
      value: "yes",
      text: "Yes"
    },
    {
      value: "no",
      text: "No"
    }
  ],
  small: true
}) }}

Radios with hints on items

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

Do you have a mobile phone with signal?

We will text you a 6 digit security code
We will call you to give you a 6 digit security code
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">
      Do you have a mobile phone with signal?
    </h1>
  </legend>
  <div class="nhsuk-radios" data-module="nhsuk-radios">
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="with-hint-item" name="example" type="radio" value="mobile" aria-describedby="with-hint-item-item-hint">
      <label class="nhsuk-label nhsuk-radios__label" for="with-hint-item">
        Yes, I have a mobile phone with signal
      </label>
      <div class="nhsuk-hint nhsuk-radios__hint" id="with-hint-item-item-hint">
        We will text you a 6 digit security code
      </div>
    </div>
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="with-hint-item-2" name="example" type="radio" value="landline" aria-describedby="with-hint-item-2-item-hint">
      <label class="nhsuk-label nhsuk-radios__label" for="with-hint-item-2">
        No, I want to use my landline
      </label>
      <div class="nhsuk-hint nhsuk-radios__hint" id="with-hint-item-2-item-hint">
        We will call you to give you a 6 digit security code
      </div>
    </div>
  </div>
</fieldset>
</div>

Macro

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

{{ radios({
  fieldset: {
    legend: {
      text: "Do you have a mobile phone with signal?",
      size: "l",
      isPageHeading: true
    }
  },
  idPrefix: "with-hint-item",
  name: "example",
  items: [
    {
      value: "mobile",
      text: "Yes, I have a mobile phone with signal",
      hint: {
        text: "We will text you a 6 digit security code"
      }
    },
    {
      value: "landline",
      text: "No, I want to use my landline",
      hint: {
        text: "We will call you to give you a 6 digit security code"
      }
    }
  ]
}) }}

Radios small with hints on items

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

Do you have a mobile phone with signal?

We will text you a 6 digit security code
We will call you to give you a 6 digit security code
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">
      Do you have a mobile phone with signal?
    </h1>
  </legend>
  <div class="nhsuk-radios nhsuk-radios--small" data-module="nhsuk-radios">
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="with-hint-item" name="example" type="radio" value="mobile" aria-describedby="with-hint-item-item-hint">
      <label class="nhsuk-label nhsuk-radios__label" for="with-hint-item">
        Yes, I have a mobile phone with signal
      </label>
      <div class="nhsuk-hint nhsuk-radios__hint" id="with-hint-item-item-hint">
        We will text you a 6 digit security code
      </div>
    </div>
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="with-hint-item-2" name="example" type="radio" value="landline" aria-describedby="with-hint-item-2-item-hint">
      <label class="nhsuk-label nhsuk-radios__label" for="with-hint-item-2">
        No, I want to use my landline
      </label>
      <div class="nhsuk-hint nhsuk-radios__hint" id="with-hint-item-2-item-hint">
        We will call you to give you a 6 digit security code
      </div>
    </div>
  </div>
</fieldset>
</div>

Macro

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

{{ radios({
  fieldset: {
    legend: {
      text: "Do you have a mobile phone with signal?",
      size: "m",
      isPageHeading: true
    }
  },
  idPrefix: "with-hint-item",
  name: "example",
  items: [
    {
      value: "mobile",
      text: "Yes, I have a mobile phone with signal",
      hint: {
        text: "We will text you a 6 digit security code"
      }
    },
    {
      value: "landline",
      text: "No, I want to use my landline",
      hint: {
        text: "We will call you to give you a 6 digit security code"
      }
    }
  ],
  small: true
}) }}

Radios with long text

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

Venenatis Condimentum

Code

Markup

<div class="nhsuk-form-group">
  <fieldset class="nhsuk-fieldset">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--l">
    <h1 class="nhsuk-fieldset__heading">
      Venenatis Condimentum
    </h1>
  </legend>
  <div class="nhsuk-radios" data-module="nhsuk-radios">
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="with-long-text" name="example" type="radio" value="nullam">
      <label class="nhsuk-label nhsuk-radios__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-radios__item">
      <input class="nhsuk-radios__input" id="with-long-text-2" name="example" type="radio" value="aenean">
      <label class="nhsuk-label nhsuk-radios__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-radios__item">
      <input class="nhsuk-radios__input" id="with-long-text-3" name="example" type="radio" value="fusce">
      <label class="nhsuk-label nhsuk-radios__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 "radios/macro.njk" import radios -%}

{{ radios({
  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."
    }
  ]
}) }}

Radios small with long text

Open this example in a new tab: Radios 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-radios nhsuk-radios--small" data-module="nhsuk-radios">
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="with-long-text" name="example" type="radio" value="nullam">
      <label class="nhsuk-label nhsuk-radios__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-radios__item">
      <input class="nhsuk-radios__input" id="with-long-text-2" name="example" type="radio" value="aenean">
      <label class="nhsuk-label nhsuk-radios__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-radios__item">
      <input class="nhsuk-radios__input" id="with-long-text-3" name="example" type="radio" value="fusce">
      <label class="nhsuk-label nhsuk-radios__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 "radios/macro.njk" import radios -%}

{{ radios({
  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
}) }}

Radios with nested conditional radios

Open this example in a new tab: Radios with nested conditional radios

How do you want to be contacted about this?

Select 1 option
How do you want to be contacted about this?
Select 1 option
Code

Markup

<div class="nhsuk-form-group">
  <fieldset class="nhsuk-fieldset" aria-describedby="conditional-nested-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-nested-hint">
    Select 1 option
  </div>
  <div class="nhsuk-radios" data-module="nhsuk-radios">
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="conditional-nested" name="example-outer" type="radio" value="no-conditional">
      <label class="nhsuk-label nhsuk-radios__label" for="conditional-nested">
        No conditional
      </label>
    </div>
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="conditional-nested-2" name="example-outer" type="radio" value="nested" data-aria-controls="conditional-conditional-nested-2">
      <label class="nhsuk-label nhsuk-radios__label" for="conditional-nested-2">
        Nested conditional
      </label>
    </div>
    <div class="nhsuk-radios__conditional nhsuk-radios__conditional--hidden" id="conditional-conditional-nested-2">
      <div class="nhsuk-form-group">
  <fieldset class="nhsuk-fieldset" aria-describedby="example-inner-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="example-inner-hint">
    Select 1 option
  </div>
  <div class="nhsuk-radios" data-module="nhsuk-radios">
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="example-inner" name="example-inner" type="radio" value="email" data-aria-controls="conditional-example-inner">
      <label class="nhsuk-label nhsuk-radios__label" for="example-inner">
        Email
      </label>
    </div>
    <div class="nhsuk-radios__conditional nhsuk-radios__conditional--hidden" id="conditional-example-inner">
      <div class="nhsuk-form-group">
  <label class="nhsuk-label" for="email">
    Email address
  </label>
  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="email" name="email" type="text" spellcheck="false">
</div>
    </div>
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="example-inner-2" name="example-inner" type="radio" value="phone" data-aria-controls="conditional-example-inner-2">
      <label class="nhsuk-label nhsuk-radios__label" for="example-inner-2">
        Phone
      </label>
    </div>
    <div class="nhsuk-radios__conditional nhsuk-radios__conditional--hidden" id="conditional-example-inner-2">
      <div class="nhsuk-form-group">
  <label class="nhsuk-label" for="phone">
    Phone number
  </label>
  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="phone" name="phone" type="tel">
</div>
    </div>
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="example-inner-3" name="example-inner" type="radio" value="text" data-aria-controls="conditional-example-inner-3">
      <label class="nhsuk-label nhsuk-radios__label" for="example-inner-3">
        Text message
      </label>
    </div>
    <div class="nhsuk-radios__conditional nhsuk-radios__conditional--hidden" id="conditional-example-inner-3">
      <div class="nhsuk-form-group">
  <label class="nhsuk-label" for="mobile">
    Mobile phone number
  </label>
  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="mobile" name="mobile" type="tel">
</div>
    </div>
  </div>
</fieldset>
</div>
    </div>
  </div>
</fieldset>
</div>

Macro

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

{{ radios({
  fieldset: {
    legend: {
      text: "How do you want to be contacted about this?",
      size: "l",
      isPageHeading: true
    }
  },
  hint: {
    text: "Select 1 option"
  },
  idPrefix: "conditional-nested",
  name: "example-outer",
  items: [
    {
      value: "no-conditional",
      text: "No conditional"
    },
    {
      value: "nested",
      text: "Nested conditional",
      conditional: {
        html: '<div class="nhsuk-form-group">\n  <fieldset class="nhsuk-fieldset" aria-describedby="example-inner-hint">\n  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--s">\n    How do you want to be contacted about this?\n  </legend>\n  <div class="nhsuk-hint" id="example-inner-hint">\n    Select 1 option\n  </div>\n  <div class="nhsuk-radios" data-module="nhsuk-radios">\n    <div class="nhsuk-radios__item">\n      <input class="nhsuk-radios__input" id="example-inner" name="example-inner" type="radio" value="email" data-aria-controls="conditional-example-inner">\n      <label class="nhsuk-label nhsuk-radios__label" for="example-inner">\n        Email\n      </label>\n    </div>\n    <div class="nhsuk-radios__conditional nhsuk-radios__conditional--hidden" id="conditional-example-inner">\n      <div class="nhsuk-form-group">\n  <label class="nhsuk-label" for="email">\n    Email address\n  </label>\n  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="email" name="email" type="text" spellcheck="false">\n</div>\n    </div>\n    <div class="nhsuk-radios__item">\n      <input class="nhsuk-radios__input" id="example-inner-2" name="example-inner" type="radio" value="phone" data-aria-controls="conditional-example-inner-2">\n      <label class="nhsuk-label nhsuk-radios__label" for="example-inner-2">\n        Phone\n      </label>\n    </div>\n    <div class="nhsuk-radios__conditional nhsuk-radios__conditional--hidden" id="conditional-example-inner-2">\n      <div class="nhsuk-form-group">\n  <label class="nhsuk-label" for="phone">\n    Phone number\n  </label>\n  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="phone" name="phone" type="tel">\n</div>\n    </div>\n    <div class="nhsuk-radios__item">\n      <input class="nhsuk-radios__input" id="example-inner-3" name="example-inner" type="radio" value="text" data-aria-controls="conditional-example-inner-3">\n      <label class="nhsuk-label nhsuk-radios__label" for="example-inner-3">\n        Text message\n      </label>\n    </div>\n    <div class="nhsuk-radios__conditional nhsuk-radios__conditional--hidden" id="conditional-example-inner-3">\n      <div class="nhsuk-form-group">\n  <label class="nhsuk-label" for="mobile">\n    Mobile phone number\n  </label>\n  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="mobile" name="mobile" type="tel">\n</div>\n    </div>\n  </div>\n</fieldset>\n</div>\n'
      }
    }
  ]
}) }}

Radios small with nested conditional radios

Open this example in a new tab: Radios small with nested conditional radios

How do you want to be contacted about this?

Select 1 option
How do you want to be contacted about this?
Select 1 option
Code

Markup

<div class="nhsuk-form-group">
  <fieldset class="nhsuk-fieldset" aria-describedby="conditional-nested-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-nested-hint">
    Select 1 option
  </div>
  <div class="nhsuk-radios nhsuk-radios--small" data-module="nhsuk-radios">
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="conditional-nested" name="example-outer" type="radio" value="no-conditional">
      <label class="nhsuk-label nhsuk-radios__label" for="conditional-nested">
        No conditional
      </label>
    </div>
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="conditional-nested-2" name="example-outer" type="radio" value="nested" data-aria-controls="conditional-conditional-nested-2">
      <label class="nhsuk-label nhsuk-radios__label" for="conditional-nested-2">
        Nested conditional
      </label>
    </div>
    <div class="nhsuk-radios__conditional nhsuk-radios__conditional--hidden" id="conditional-conditional-nested-2">
      <div class="nhsuk-form-group">
  <fieldset class="nhsuk-fieldset" aria-describedby="example-inner-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="example-inner-hint">
    Select 1 option
  </div>
  <div class="nhsuk-radios" data-module="nhsuk-radios">
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="example-inner" name="example-inner" type="radio" value="email" data-aria-controls="conditional-example-inner">
      <label class="nhsuk-label nhsuk-radios__label" for="example-inner">
        Email
      </label>
    </div>
    <div class="nhsuk-radios__conditional nhsuk-radios__conditional--hidden" id="conditional-example-inner">
      <div class="nhsuk-form-group">
  <label class="nhsuk-label" for="email">
    Email address
  </label>
  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="email" name="email" type="text" spellcheck="false">
</div>
    </div>
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="example-inner-2" name="example-inner" type="radio" value="phone" data-aria-controls="conditional-example-inner-2">
      <label class="nhsuk-label nhsuk-radios__label" for="example-inner-2">
        Phone
      </label>
    </div>
    <div class="nhsuk-radios__conditional nhsuk-radios__conditional--hidden" id="conditional-example-inner-2">
      <div class="nhsuk-form-group">
  <label class="nhsuk-label" for="phone">
    Phone number
  </label>
  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="phone" name="phone" type="tel">
</div>
    </div>
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="example-inner-3" name="example-inner" type="radio" value="text" data-aria-controls="conditional-example-inner-3">
      <label class="nhsuk-label nhsuk-radios__label" for="example-inner-3">
        Text message
      </label>
    </div>
    <div class="nhsuk-radios__conditional nhsuk-radios__conditional--hidden" id="conditional-example-inner-3">
      <div class="nhsuk-form-group">
  <label class="nhsuk-label" for="mobile">
    Mobile phone number
  </label>
  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="mobile" name="mobile" type="tel">
</div>
    </div>
  </div>
</fieldset>
</div>
    </div>
  </div>
</fieldset>
</div>

Macro

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

{{ radios({
  fieldset: {
    legend: {
      text: "How do you want to be contacted about this?",
      size: "m",
      isPageHeading: true
    }
  },
  hint: {
    text: "Select 1 option"
  },
  idPrefix: "conditional-nested",
  name: "example-outer",
  items: [
    {
      value: "no-conditional",
      text: "No conditional"
    },
    {
      value: "nested",
      text: "Nested conditional",
      conditional: {
        html: '<div class="nhsuk-form-group">\n  <fieldset class="nhsuk-fieldset" aria-describedby="example-inner-hint">\n  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--s">\n    How do you want to be contacted about this?\n  </legend>\n  <div class="nhsuk-hint" id="example-inner-hint">\n    Select 1 option\n  </div>\n  <div class="nhsuk-radios" data-module="nhsuk-radios">\n    <div class="nhsuk-radios__item">\n      <input class="nhsuk-radios__input" id="example-inner" name="example-inner" type="radio" value="email" data-aria-controls="conditional-example-inner">\n      <label class="nhsuk-label nhsuk-radios__label" for="example-inner">\n        Email\n      </label>\n    </div>\n    <div class="nhsuk-radios__conditional nhsuk-radios__conditional--hidden" id="conditional-example-inner">\n      <div class="nhsuk-form-group">\n  <label class="nhsuk-label" for="email">\n    Email address\n  </label>\n  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="email" name="email" type="text" spellcheck="false">\n</div>\n    </div>\n    <div class="nhsuk-radios__item">\n      <input class="nhsuk-radios__input" id="example-inner-2" name="example-inner" type="radio" value="phone" data-aria-controls="conditional-example-inner-2">\n      <label class="nhsuk-label nhsuk-radios__label" for="example-inner-2">\n        Phone\n      </label>\n    </div>\n    <div class="nhsuk-radios__conditional nhsuk-radios__conditional--hidden" id="conditional-example-inner-2">\n      <div class="nhsuk-form-group">\n  <label class="nhsuk-label" for="phone">\n    Phone number\n  </label>\n  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="phone" name="phone" type="tel">\n</div>\n    </div>\n    <div class="nhsuk-radios__item">\n      <input class="nhsuk-radios__input" id="example-inner-3" name="example-inner" type="radio" value="text" data-aria-controls="conditional-example-inner-3">\n      <label class="nhsuk-label nhsuk-radios__label" for="example-inner-3">\n        Text message\n      </label>\n    </div>\n    <div class="nhsuk-radios__conditional nhsuk-radios__conditional--hidden" id="conditional-example-inner-3">\n      <div class="nhsuk-form-group">\n  <label class="nhsuk-label" for="mobile">\n    Mobile phone number\n  </label>\n  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="mobile" name="mobile" type="tel">\n</div>\n    </div>\n  </div>\n</fieldset>\n</div>\n'
      }
    }
  ],
  small: true
}) }}

Radios without fieldset

Open this example in a new tab: Radios without fieldset

Code

Markup

<div class="nhsuk-form-group">
  <div class="nhsuk-radios" id="without-fieldset" data-module="nhsuk-radios">
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="colours" name="colours" type="radio" value="red">
      <label class="nhsuk-label nhsuk-radios__label" for="colours">
        Red
      </label>
    </div>
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="colours-2" name="colours" type="radio" value="green">
      <label class="nhsuk-label nhsuk-radios__label" for="colours-2">
        Green
      </label>
    </div>
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="colours-3" name="colours" type="radio" value="blue">
      <label class="nhsuk-label nhsuk-radios__label" for="colours-3">
        Blue
      </label>
    </div>
  </div>
</div>

Macro

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

{{ radios({
  fieldset: null,
  id: "without-fieldset",
  name: "colours",
  items: [
    {
      value: "red",
      text: "Red"
    },
    {
      value: "green",
      text: "Green"
    },
    {
      value: "blue",
      text: "Blue"
    }
  ]
}) }}

Radios small without fieldset

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

Code

Markup

<div class="nhsuk-form-group">
  <div class="nhsuk-radios nhsuk-radios--small" id="without-fieldset" data-module="nhsuk-radios">
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="colours" name="colours" type="radio" value="red">
      <label class="nhsuk-label nhsuk-radios__label" for="colours">
        Red
      </label>
    </div>
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="colours-2" name="colours" type="radio" value="green">
      <label class="nhsuk-label nhsuk-radios__label" for="colours-2">
        Green
      </label>
    </div>
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="colours-3" name="colours" type="radio" value="blue">
      <label class="nhsuk-label nhsuk-radios__label" for="colours-3">
        Blue
      </label>
    </div>
  </div>
</div>

Macro

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

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

Radios without page heading

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

Are you 18 or over?

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">
      Are you 18 or over?
    </h1>
  </legend>
  <div class="nhsuk-radios" data-module="nhsuk-radios">
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="without-heading" name="example" type="radio" value="yes">
      <label class="nhsuk-label nhsuk-radios__label" for="without-heading">
        Yes
      </label>
    </div>
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="without-heading-2" name="example" type="radio" value="no">
      <label class="nhsuk-label nhsuk-radios__label" for="without-heading-2">
        No
      </label>
    </div>
  </div>
</fieldset>
</div>

Macro

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

{{ radios({
  fieldset: {
    legend: {
      text: "Are you 18 or over?",
      isPageHeading: true,
      size: "l"
    }
  },
  idPrefix: "without-heading",
  name: "example",
  items: [
    {
      value: "yes",
      text: "Yes"
    },
    {
      value: "no",
      text: "No"
    }
  ]
}) }}

Radios small without page heading

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

Are you 18 or over?

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">
      Are you 18 or over?
    </h1>
  </legend>
  <div class="nhsuk-radios nhsuk-radios--small" data-module="nhsuk-radios">
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="without-heading" name="example" type="radio" value="yes">
      <label class="nhsuk-label nhsuk-radios__label" for="without-heading">
        Yes
      </label>
    </div>
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="without-heading-2" name="example" type="radio" value="no">
      <label class="nhsuk-label nhsuk-radios__label" for="without-heading-2">
        No
      </label>
    </div>
  </div>
</fieldset>
</div>

Macro

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

{{ radios({
  fieldset: {
    legend: {
      text: "Are you 18 or over?",
      isPageHeading: true,
      size: "m"
    }
  },
  idPrefix: "without-heading",
  name: "example",
  items: [
    {
      value: "yes",
      text: "Yes"
    },
    {
      value: "no",
      text: "No"
    }
  ],
  small: true
}) }}

Radios with pre-checked value

Open this example in a new tab: Radios with pre-checked value

How do you want to be contacted about this?

Select 1 option
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 1 option
  </div>
  <div class="nhsuk-radios" data-module="nhsuk-radios">
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="conditional" name="example" type="radio" value="email" checked data-aria-controls="conditional-conditional">
      <label class="nhsuk-label nhsuk-radios__label" for="conditional">
        Email
      </label>
    </div>
    <div class="nhsuk-radios__conditional" id="conditional-conditional">
      <div class="nhsuk-form-group">
  <label class="nhsuk-label" for="email">
    Email address
  </label>
  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="email" name="email" type="text" spellcheck="false">
</div>
    </div>
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="conditional-2" name="example" type="radio" value="phone" data-aria-controls="conditional-conditional-2">
      <label class="nhsuk-label nhsuk-radios__label" for="conditional-2">
        Phone
      </label>
    </div>
    <div class="nhsuk-radios__conditional nhsuk-radios__conditional--hidden" id="conditional-conditional-2">
      <div class="nhsuk-form-group">
  <label class="nhsuk-label" for="phone">
    Phone number
  </label>
  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="phone" name="phone" type="tel">
</div>
    </div>
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="conditional-3" name="example" type="radio" value="text" data-aria-controls="conditional-conditional-3">
      <label class="nhsuk-label nhsuk-radios__label" for="conditional-3">
        Text message
      </label>
    </div>
    <div class="nhsuk-radios__conditional nhsuk-radios__conditional--hidden" id="conditional-conditional-3">
      <div class="nhsuk-form-group">
  <label class="nhsuk-label" for="mobile">
    Mobile phone number
  </label>
  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="mobile" name="mobile" type="tel">
</div>
    </div>
  </div>
</fieldset>
</div>

Macro

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

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

Radios small with pre-checked value

Open this example in a new tab: Radios small with pre-checked value

How do you want to be contacted about this?

Select 1 option
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 1 option
  </div>
  <div class="nhsuk-radios nhsuk-radios--small" data-module="nhsuk-radios">
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="conditional" name="example" type="radio" value="email" checked data-aria-controls="conditional-conditional">
      <label class="nhsuk-label nhsuk-radios__label" for="conditional">
        Email
      </label>
    </div>
    <div class="nhsuk-radios__conditional" id="conditional-conditional">
      <div class="nhsuk-form-group">
  <label class="nhsuk-label" for="email">
    Email address
  </label>
  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="email" name="email" type="text" spellcheck="false">
</div>
    </div>
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="conditional-2" name="example" type="radio" value="phone" data-aria-controls="conditional-conditional-2">
      <label class="nhsuk-label nhsuk-radios__label" for="conditional-2">
        Phone
      </label>
    </div>
    <div class="nhsuk-radios__conditional nhsuk-radios__conditional--hidden" id="conditional-conditional-2">
      <div class="nhsuk-form-group">
  <label class="nhsuk-label" for="phone">
    Phone number
  </label>
  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="phone" name="phone" type="tel">
</div>
    </div>
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="conditional-3" name="example" type="radio" value="text" data-aria-controls="conditional-conditional-3">
      <label class="nhsuk-label nhsuk-radios__label" for="conditional-3">
        Text message
      </label>
    </div>
    <div class="nhsuk-radios__conditional nhsuk-radios__conditional--hidden" id="conditional-conditional-3">
      <div class="nhsuk-form-group">
  <label class="nhsuk-label" for="mobile">
    Mobile phone number
  </label>
  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="mobile" name="mobile" type="tel">
</div>
    </div>
  </div>
</fieldset>
</div>

Macro

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

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