Form elements - Radios

Use radios when you want users to select only 1 option from a list.

Open this default radios example in new window
Copy default radios code 
<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">

      <div class="nhsuk-radios__item">
        <input class="nhsuk-radios__input" id="example-1" name="example" type="radio" value="yes">
        <label class="nhsuk-label nhsuk-radios__label" for="example-1">
          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>
Close default radios code
Nunjucks macro options

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

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

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

Nunjucks arguments for default radios
Name Type Required Description
Name fieldset Type object Required false Description Options for the fieldset component (for example legend).
Name hint Type object Required false Description Options for the hint component (for example text).
Name errorMessage Type object Required false Description Options for the error message component. The error message component will not display if you use a falsy value for `errorMessage`, for example `false` or `null`.
Name idPrefix Type string Required false Description String to prefix id for each radio item if no id is specified on each item. If `idPrefix` is not passed, fallback to using the name attribute instead.
Name name Type string Required true Description Name attribute for each radio item.
Name items Type array Required true Description Array of radio items objects.
Name items[].text Type string Required true Description If `html` is set, this is not required. Text to use within each radio item label. If `html` is provided, the `text` argument will be ignored.
Name items[].html Type string Required true Description If `text` is set, this is not required. HTML to use within each radio item label. If `html` is provided, the `text` argument will be ignored.
Name items[].id Type string Required false Description Specific id attribute for the radio item. If omitted, then `idPrefix` string will be applied.
Name items[].value Type string Required true Description Value for the radio input.
Name items[].hint Type object Required false Description Provide hint to each radio item.
Name items[].divider Type string Required false Description Divider text to separate radio items, for example the text "or".
Name items[].checked Type boolean Required false Description If true, radio will be checked.
Name items[].conditional Type string Required false Description If true, content provided will be revealed when the item is checked.
Name items[].conditional.html Type html Required false Description Provide content for the conditional reveal.
Name classes Type string Required false Description Classes to add to the radio container.
Name attributes Type object Required false Description HTML attributes (for example data attributes) to add to the radio input tag.
Copy default radios code 
{% from 'radios/macro.njk' import radios %}

{{ radios({
  "idPrefix": "example",
  "name": "example",
  "fieldset": {
    "legend": {
      "text": "Are you 18 or over?",
      "classes": "nhsuk-fieldset__legend--l",
      "isPageHeading": true
    }
  },
  "items": [
    {
      "value": "yes",
      "text": "Yes"
    },
    {
      "value": "no",
      "text": "No"
    }
  ]
}) }}
Close default radios code

When to use radios

Use radios if users can only choose 1 option from a list.

When not to use radios

Do not use radios if users might need to select more than 1 option. Use checkboxes instead.

How to use radios

When you're drafting your radio options, beware binary choices. Try testing a 3rd option.

Order radio options alphabetically by default.

Group radios together in a <fieldset> with a <legend> that describes them. You can see an example at the top of this page. This is usually a question, like "Are you 18 or over?".

If you are asking just 1 question per page as we recommend, you can set the contents of the <legend> as the page heading. This is good practice as it means that screen reader users will only hear the contents once.

Read more on the GOV.UK Design System about making labels and legends headings.

Unlike with checkboxes, users can only select 1 option from a list of radios. Do not assume that users will know how many options they can select.

Do not pre-select radio options as this makes it more likely that users will:

  • not realise they’ve missed a question
  • submit the wrong answer

Users can't go back to having no option selected once they have selected an option, without refreshing their browser window. So you should include "None of these" or "I do not know" if they are valid options.

Inline radios

If there are only 2 options, you can either stack the radios or display them inline, like this:

Open this inline radios example in new window
Copy inline radios code 
<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">

      <div class="nhsuk-radios__item">
        <input class="nhsuk-radios__input" id="example-inline-1" name="example-inline" type="radio" value="yes">
        <label class="nhsuk-label nhsuk-radios__label" for="example-inline-1">
          Yes
        </label>
      </div>

      <div class="nhsuk-radios__item">
        <input class="nhsuk-radios__input" id="example-inline-2" name="example-inline" type="radio" value="no">
        <label class="nhsuk-label nhsuk-radios__label" for="example-inline-2">
          No
        </label>
      </div>

    </div>
  </fieldset>

</div>
Close inline radios code
Nunjucks macro options

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

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

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

Nunjucks arguments for inline radios
Name Type Required Description
Name fieldset Type object Required false Description Options for the fieldset component (for example legend).
Name hint Type object Required false Description Options for the hint component (for example text).
Name errorMessage Type object Required false Description Options for the error message component. The error message component will not display if you use a falsy value for `errorMessage`, for example `false` or `null`.
Name idPrefix Type string Required false Description String to prefix id for each radio item if no id is specified on each item. If `idPrefix` is not passed, fallback to using the name attribute instead.
Name name Type string Required true Description Name attribute for each radio item.
Name items Type array Required true Description Array of radio items objects.
Name items[].text Type string Required true Description If `html` is set, this is not required. Text to use within each radio item label. If `html` is provided, the `text` argument will be ignored.
Name items[].html Type string Required true Description If `text` is set, this is not required. HTML to use within each radio item label. If `html` is provided, the `text` argument will be ignored.
Name items[].id Type string Required false Description Specific id attribute for the radio item. If omitted, then `idPrefix` string will be applied.
Name items[].value Type string Required true Description Value for the radio input.
Name items[].hint Type object Required false Description Provide hint to each radio item.
Name items[].divider Type string Required false Description Divider text to separate radio items, for example the text "or".
Name items[].checked Type boolean Required false Description If true, radio will be checked.
Name items[].conditional Type string Required false Description If true, content provided will be revealed when the item is checked.
Name items[].conditional.html Type html Required false Description Provide content for the conditional reveal.
Name classes Type string Required false Description Classes to add to the radio container.
Name attributes Type object Required false Description HTML attributes (for example data attributes) to add to the radio input tag.
Copy inline radios code 
{% from 'radios/macro.njk' import radios %}

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

Radios with hints

Use hint text to give users help in context.

Open this with hints radios example in new window
Copy with hints radios code 
<fieldset class="nhsuk-fieldset">
  <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 nhsuk-u-margin-bottom-2">
    This is a 10 digit number, like 485 777 3456.
  </div>

  <div class="nhsuk-hint">
    You can find it on any letter the NHS has sent you, on a prescription or by logging in to a GP practice online service.
  </div>

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

    <div class="nhsuk-radios">

      <div class="nhsuk-radios__item">
        <input class="nhsuk-radios__input" id="example-hints-1" name="example-hints" type="radio" value="yes">
        <label class="nhsuk-label nhsuk-radios__label" for="example-hints-1">
          Yes, I know my NHS number
        </label>
      </div>

      <div class="nhsuk-radios__item">
        <input class="nhsuk-radios__input" id="example-hints-2" name="example-hints" type="radio" value="no">
        <label class="nhsuk-label nhsuk-radios__label" for="example-hints-2">
          No, I do not know my NHS number
        </label>
      </div>

      <div class="nhsuk-radios__item">
        <input class="nhsuk-radios__input" id="example-hints-3" name="example-hints" type="radio" value="not sure">
        <label class="nhsuk-label nhsuk-radios__label" for="example-hints-3">
          I&#39;m not sure
        </label>
      </div>

    </div>
  </div>

</fieldset>
Close with hints radios code
Nunjucks macro options

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

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

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

Nunjucks arguments for with hints radios
Name Type Required Description
Name fieldset Type object Required false Description Options for the fieldset component (for example legend).
Name hint Type object Required false Description Options for the hint component (for example text).
Name errorMessage Type object Required false Description Options for the error message component. The error message component will not display if you use a falsy value for `errorMessage`, for example `false` or `null`.
Name idPrefix Type string Required false Description String to prefix id for each radio item if no id is specified on each item. If `idPrefix` is not passed, fallback to using the name attribute instead.
Name name Type string Required true Description Name attribute for each radio item.
Name items Type array Required true Description Array of radio items objects.
Name items[].text Type string Required true Description If `html` is set, this is not required. Text to use within each radio item label. If `html` is provided, the `text` argument will be ignored.
Name items[].html Type string Required true Description If `text` is set, this is not required. HTML to use within each radio item label. If `html` is provided, the `text` argument will be ignored.
Name items[].id Type string Required false Description Specific id attribute for the radio item. If omitted, then `idPrefix` string will be applied.
Name items[].value Type string Required true Description Value for the radio input.
Name items[].hint Type object Required false Description Provide hint to each radio item.
Name items[].divider Type string Required false Description Divider text to separate radio items, for example the text "or".
Name items[].checked Type boolean Required false Description If true, radio will be checked.
Name items[].conditional Type string Required false Description If true, content provided will be revealed when the item is checked.
Name items[].conditional.html Type html Required false Description Provide content for the conditional reveal.
Name classes Type string Required false Description Classes to add to the radio container.
Name attributes Type object Required false Description HTML attributes (for example data attributes) to add to the radio input tag.
Copy with hints radios code 
{% from 'radios/macro.njk' import radios %}
{% from 'fieldset/macro.njk' import fieldset %}
{% from 'hint/macro.njk' import hint %}

{% call fieldset({
  legend: {
    "text": "Do you know your NHS number?",
    "classes": "nhsuk-fieldset__legend--l",
    "isPageHeading": true
  }
  }) %}
  {{ hint({
    "text": "This is a 10 digit number, like 485 777 3456.",
    "classes": "nhsuk-u-margin-bottom-2"
  }) }}
  {{ hint({
    "text": "You can find it on any letter the NHS has sent you, on a prescription or by logging in to a GP practice online service."
  }) }}
  {{ radios({
    "idPrefix": "example-hints",
    "name": "example-hints",
    "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"
  }
]
}) }}
{% endcall %}
Close with hints radios code

Radio items with hints

You can add hints to radios to give more information about the options.

Open this with hints options radios example in new window
Copy with hints options radios code 
<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">

      <div class="nhsuk-radios__item">
        <input class="nhsuk-radios__input" id="example-hints-1" name="example-hints" type="radio" value="mobile" aria-describedby="example-hints-1-item-hint">
        <label class="nhsuk-label nhsuk-radios__label" for="example-hints-1">
          Yes, I have a mobile phone with signal
        </label>
        <div class="nhsuk-hint nhsuk-radios__hint" id="example-hints-1-item-hint">
          We will text you a 6 digit security code
        </div>
      </div>

      <div class="nhsuk-radios__item">
        <input class="nhsuk-radios__input" id="example-hints-2" name="example-hints" type="radio" value="landline" aria-describedby="example-hints-2-item-hint">
        <label class="nhsuk-label nhsuk-radios__label" for="example-hints-2">
          No, I want to use my landline
        </label>
        <div class="nhsuk-hint nhsuk-radios__hint" id="example-hints-2-item-hint">
          We will call you to give you a 6 digit security code
        </div>
      </div>

    </div>
  </fieldset>

</div>
Close with hints options radios code
Nunjucks macro options

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

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

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

Nunjucks arguments for with hints options radios
Name Type Required Description
Name fieldset Type object Required false Description Options for the fieldset component (for example legend).
Name hint Type object Required false Description Options for the hint component (for example text).
Name errorMessage Type object Required false Description Options for the error message component. The error message component will not display if you use a falsy value for `errorMessage`, for example `false` or `null`.
Name idPrefix Type string Required false Description String to prefix id for each radio item if no id is specified on each item. If `idPrefix` is not passed, fallback to using the name attribute instead.
Name name Type string Required true Description Name attribute for each radio item.
Name items Type array Required true Description Array of radio items objects.
Name items[].text Type string Required true Description If `html` is set, this is not required. Text to use within each radio item label. If `html` is provided, the `text` argument will be ignored.
Name items[].html Type string Required true Description If `text` is set, this is not required. HTML to use within each radio item label. If `html` is provided, the `text` argument will be ignored.
Name items[].id Type string Required false Description Specific id attribute for the radio item. If omitted, then `idPrefix` string will be applied.
Name items[].value Type string Required true Description Value for the radio input.
Name items[].hint Type object Required false Description Provide hint to each radio item.
Name items[].divider Type string Required false Description Divider text to separate radio items, for example the text "or".
Name items[].checked Type boolean Required false Description If true, radio will be checked.
Name items[].conditional Type string Required false Description If true, content provided will be revealed when the item is checked.
Name items[].conditional.html Type html Required false Description Provide content for the conditional reveal.
Name classes Type string Required false Description Classes to add to the radio container.
Name attributes Type object Required false Description HTML attributes (for example data attributes) to add to the radio input tag.
Copy with hints options radios code 
{% from 'radios/macro.njk' import radios %}

{{ radios({
  "idPrefix": "example-hints",
  "name": "example-hints",
  "fieldset": {
    "legend": {
      "text": "Do you have a mobile phone with signal?",
        "classes": "nhsuk-fieldset__legend--l",
      "isPageHeading": true
    }
  },
  "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"
      }
    }
  ]
}) }}
Close with hints options radios code

Radio items with a text divider

If 1 or more of your radio options is different from the others, it can help users if you separate them using a text divider. The text is usually the word "or".

Open this items with a text divider radios example in new window
Copy items with a text divider radios code 
<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">

      <div class="nhsuk-radios__item">
        <input class="nhsuk-radios__input" id="example-divider-1" name="example-divider" type="radio" value="nhsuk-login">
        <label class="nhsuk-label nhsuk-radios__label" for="example-divider-1">
          Use NHS login
        </label>
      </div>

      <div class="nhsuk-radios__item">
        <input class="nhsuk-radios__input" id="example-divider-2" name="example-divider" type="radio" value="government-verify">
        <label class="nhsuk-label nhsuk-radios__label" for="example-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="example-divider-4" name="example-divider" type="radio" value="create-account">
        <label class="nhsuk-label nhsuk-radios__label" for="example-divider-4">
          Create an account
        </label>
      </div>

    </div>
  </fieldset>

</div>
Close items with a text divider radios code
Nunjucks macro options

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

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

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

Nunjucks arguments for items with a text divider radios
Name Type Required Description
Name fieldset Type object Required false Description Options for the fieldset component (for example legend).
Name hint Type object Required false Description Options for the hint component (for example text).
Name errorMessage Type object Required false Description Options for the error message component. The error message component will not display if you use a falsy value for `errorMessage`, for example `false` or `null`.
Name idPrefix Type string Required false Description String to prefix id for each radio item if no id is specified on each item. If `idPrefix` is not passed, fallback to using the name attribute instead.
Name name Type string Required true Description Name attribute for each radio item.
Name items Type array Required true Description Array of radio items objects.
Name items[].text Type string Required true Description If `html` is set, this is not required. Text to use within each radio item label. If `html` is provided, the `text` argument will be ignored.
Name items[].html Type string Required true Description If `text` is set, this is not required. HTML to use within each radio item label. If `html` is provided, the `text` argument will be ignored.
Name items[].id Type string Required false Description Specific id attribute for the radio item. If omitted, then `idPrefix` string will be applied.
Name items[].value Type string Required true Description Value for the radio input.
Name items[].hint Type object Required false Description Provide hint to each radio item.
Name items[].divider Type string Required false Description Divider text to separate radio items, for example the text "or".
Name items[].checked Type boolean Required false Description If true, radio will be checked.
Name items[].conditional Type string Required false Description If true, content provided will be revealed when the item is checked.
Name items[].conditional.html Type html Required false Description Provide content for the conditional reveal.
Name classes Type string Required false Description Classes to add to the radio container.
Name attributes Type object Required false Description HTML attributes (for example data attributes) to add to the radio input tag.
Copy items with a text divider radios code 
{% from 'radios/macro.njk' import radios %}

{{ radios({
  "idPrefix": "example-divider",
  "name": "example-divider",
  "fieldset": {
    "legend": {
      "text": "How do you want to sign in?",
      "classes": "nhsuk-fieldset__legend--l",
      "isPageHeading": true
    }
  },
  "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"
    }
  ]
}) }}
Close items with a text divider radios code

Conditionally revealing content

You can add conditionally revealing content to radios, so users only see content when it’s relevant to them.

For example, you could reveal an email address input only when a user chooses to be contacted by email.

Open this conditional radios example in new window
Copy conditional radios code 
<div class="nhsuk-form-group">

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

    <div class="nhsuk-hint" id="contact-hint">
      Select one option
    </div>

    <div class="nhsuk-radios nhsuk-radios--conditional">

      <div class="nhsuk-radios__item">
        <input class="nhsuk-radios__input" id="contact-1" name="contact" type="radio" value="email" aria-controls="conditional-contact-1" aria-expanded="false">
        <label class="nhsuk-label nhsuk-radios__label" for="contact-1">
          Email
        </label>
      </div>

      <div class="nhsuk-radios__conditional nhsuk-radios__conditional--hidden" id="conditional-contact-1">

        <div class="nhsuk-form-group">
          <label class="nhsuk-label" for="email">
            Email address
          </label>
          <input class="nhsuk-input nhsuk-u-width-two-thirds" id="email" name="email" type="text">
        </div>

      </div>

      <div class="nhsuk-radios__item">
        <input class="nhsuk-radios__input" id="contact-2" name="contact" type="radio" value="phone" aria-controls="conditional-contact-2" aria-expanded="false">
        <label class="nhsuk-label nhsuk-radios__label" for="contact-2">
          Phone
        </label>
      </div>

      <div class="nhsuk-radios__conditional nhsuk-radios__conditional--hidden" id="conditional-contact-2">

        <div class="nhsuk-form-group">
          <label class="nhsuk-label" for="phone">
            Phone number
          </label>
          <input class="nhsuk-input nhsuk-u-width-two-thirds" id="phone" name="phone" type="text">
        </div>

      </div>

      <div class="nhsuk-radios__item">
        <input class="nhsuk-radios__input" id="contact-3" name="contact" type="radio" value="text" aria-controls="conditional-contact-3" aria-expanded="false">
        <label class="nhsuk-label nhsuk-radios__label" for="contact-3">
          Text message
        </label>
      </div>

      <div class="nhsuk-radios__conditional nhsuk-radios__conditional--hidden" id="conditional-contact-3">

        <div class="nhsuk-form-group">
          <label class="nhsuk-label" for="mobile">
            Mobile phone number
          </label>
          <input class="nhsuk-input nhsuk-u-width-two-thirds" id="mobile" name="mobile" type="text">
        </div>

      </div>

    </div>
  </fieldset>

</div>
Close conditional radios code
Nunjucks macro options

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

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

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

Nunjucks arguments for conditional radios
Name Type Required Description
Name fieldset Type object Required false Description Options for the fieldset component (for example legend).
Name hint Type object Required false Description Options for the hint component (for example text).
Name errorMessage Type object Required false Description Options for the error message component. The error message component will not display if you use a falsy value for `errorMessage`, for example `false` or `null`.
Name idPrefix Type string Required false Description String to prefix id for each radio item if no id is specified on each item. If `idPrefix` is not passed, fallback to using the name attribute instead.
Name name Type string Required true Description Name attribute for each radio item.
Name items Type array Required true Description Array of radio items objects.
Name items[].text Type string Required true Description If `html` is set, this is not required. Text to use within each radio item label. If `html` is provided, the `text` argument will be ignored.
Name items[].html Type string Required true Description If `text` is set, this is not required. HTML to use within each radio item label. If `html` is provided, the `text` argument will be ignored.
Name items[].id Type string Required false Description Specific id attribute for the radio item. If omitted, then `idPrefix` string will be applied.
Name items[].value Type string Required true Description Value for the radio input.
Name items[].hint Type object Required false Description Provide hint to each radio item.
Name items[].divider Type string Required false Description Divider text to separate radio items, for example the text "or".
Name items[].checked Type boolean Required false Description If true, radio will be checked.
Name items[].conditional Type string Required false Description If true, content provided will be revealed when the item is checked.
Name items[].conditional.html Type html Required false Description Provide content for the conditional reveal.
Name classes Type string Required false Description Classes to add to the radio container.
Name attributes Type object Required false Description HTML attributes (for example data attributes) to add to the radio input tag.
Copy conditional radios code 
{% from 'radios/macro.njk' import radios %}
{% from 'input/macro.njk' import input %}

{% set emailHtml %}
  {{ input({
    id: "email",
    name: "email",
    classes: "nhsuk-u-width-two-thirds",
    label: {
      text: "Email address"
    }
  }) }}
{% endset -%}

{% set phoneHtml %}
  {{ input({
    id: "phone",
    name: "phone",
    classes: "nhsuk-u-width-two-thirds",
    label: {
      text: "Phone number"
    }
  }) }}
{% endset -%}

{% set mobileHtml %}
  {{ input({
    id: "mobile",
    name: "mobile",
    classes: "nhsuk-u-width-two-thirds",
    label: {
      text: "Mobile phone number"
    }
  }) }}
{% endset -%}

{{ radios({
  "idPrefix": "contact",
  "name": "contact",
  "fieldset": {
    "legend": {
      "text": "How would you prefer to be contacted?",
      "classes": "nhsuk-fieldset__legend--l",
      "isPageHeading": "true"
    }
  },
  "hint": {
    "text": "Select one option"
  },
  "items": [
    {
      "value": "email",
      "text": "Email",
      "conditional": {
        "html": emailHtml
      }
    },
    {
      "value": "phone",
      "text": "Phone",
      "conditional": {
        "html": phoneHtml
      }
    },
    {
      "value": "text",
      "text": "Text message",
      "conditional": {
        "html": mobileHtml
      }
    }
  ]
}) }}
Close conditional radios code

Keep it simple. If you need to add a lot of content, consider showing it on the next page in the process instead.

Do not use this component to add conditionally revealing content to inline radios.

Error messages

Style error messages like this:

Open this error message radios example in new window
Copy error message radios code 
<div class="nhsuk-form-group nhsuk-form-group--error">

  <fieldset class="nhsuk-fieldset" aria-describedby="example-error-hint example-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="example-error-hint">
      This includes changing your last name or spelling your name differently.
    </div>

    <span class="nhsuk-error-message" id="example-error-error">
      <span class="nhsuk-u-visually-hidden">Error:</span> Select yes if you have changed your name
    </span>

    <div class="nhsuk-radios">

      <div class="nhsuk-radios__item">
        <input class="nhsuk-radios__input" id="example-error-1" name="example-error" type="radio" value="yes">
        <label class="nhsuk-label nhsuk-radios__label" for="example-error-1">
          Yes
        </label>
      </div>

      <div class="nhsuk-radios__item">
        <input class="nhsuk-radios__input" id="example-error-2" name="example-error" type="radio" value="no">
        <label class="nhsuk-label nhsuk-radios__label" for="example-error-2">
          No
        </label>
      </div>

    </div>
  </fieldset>

</div>
Close error message radios code
Nunjucks macro options

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

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

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

Nunjucks arguments for error message radios
Name Type Required Description
Name fieldset Type object Required false Description Options for the fieldset component (for example legend).
Name hint Type object Required false Description Options for the hint component (for example text).
Name errorMessage Type object Required false Description Options for the error message component. The error message component will not display if you use a falsy value for `errorMessage`, for example `false` or `null`.
Name idPrefix Type string Required false Description String to prefix id for each radio item if no id is specified on each item. If `idPrefix` is not passed, fallback to using the name attribute instead.
Name name Type string Required true Description Name attribute for each radio item.
Name items Type array Required true Description Array of radio items objects.
Name items[].text Type string Required true Description If `html` is set, this is not required. Text to use within each radio item label. If `html` is provided, the `text` argument will be ignored.
Name items[].html Type string Required true Description If `text` is set, this is not required. HTML to use within each radio item label. If `html` is provided, the `text` argument will be ignored.
Name items[].id Type string Required false Description Specific id attribute for the radio item. If omitted, then `idPrefix` string will be applied.
Name items[].value Type string Required true Description Value for the radio input.
Name items[].hint Type object Required false Description Provide hint to each radio item.
Name items[].divider Type string Required false Description Divider text to separate radio items, for example the text "or".
Name items[].checked Type boolean Required false Description If true, radio will be checked.
Name items[].conditional Type string Required false Description If true, content provided will be revealed when the item is checked.
Name items[].conditional.html Type html Required false Description Provide content for the conditional reveal.
Name classes Type string Required false Description Classes to add to the radio container.
Name attributes Type object Required false Description HTML attributes (for example data attributes) to add to the radio input tag.
Copy error message radios code 
{% from 'radios/macro.njk' import radios %}

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

Follow:

Help us improve this guidance

Share insights or feedback and take part in the discussion. We use GitHub as a collaboration space. All the information on it is open to the public.

Feedback or share insights on GitHub

Read more about how to feedback or share insights.

If you have any questions, get in touch with the service manual team.

Updated: September 2020