Skip to main content

Form elements - Radios

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

Radios updates

Added smaller radios in version 10.1

Made "breaking code changes" to radios in version 10

Open this default radios example in a new tab 
<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>
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
id string false The ID of the radios component.
fieldset object false The fieldset used by the radios component.
hint object false Can be used to add a hint to the radios component.
errorMessage object false Can be used to add an error message to the radios component. The error message component will not display if you use a falsy value for errorMessage, for example false or null.
formGroup object false Additional options for the form group containing the radios component.
formGroup{}.classes string false Classes to add to the form group (for example to show error state for the whole group).
formGroup{}.attributes object false HTML attributes (for example data attributes) to add to the form group.
formGroup{}.beforeInputs object false Content to add before all radio items within the radios component.
formGroup{}.beforeInputs{}.text string true Text to add before all radio items. If html is provided, the text option will be ignored.
formGroup{}.beforeInputs{}.html string true HTML to add before all radio items. If html is provided, the text option will be ignored.
formGroup{}.afterInputs object false Content to add after all radio items within the radios component.
formGroup{}.afterInputs{}.text string true Text to add after all radio items. If html is provided, the text option will be ignored.
formGroup{}.afterInputs{}.html string true HTML to add after all radio items. If html is provided, the text option will be ignored.
idPrefix string false Optional prefix. This is used to prefix the id attribute for each radio input, hint and error message, separated by -. Defaults to the name option value.
name string true Name attribute for the radio items.
items array true The radio items within the radios component.
items[].text string true If html is set, this is not required. Text to use within each radio item label. If html is provided, the text option will be ignored.
items[].html string true If text is set, this is not required. HTML to use within each radio item label. If html is provided, the text option will be ignored.
items[].id string false Specific ID attribute for the radio item. If omitted, then idPrefix string will be applied.
items[].value string true Value for the radio input.
items[].label object false Subset of options for the label used by each radio item within the radios component.
items[].label{}.classes string false Classes to add to the label tag.
items[].label{}.attributes object false HTML attributes (for example data attributes) to add to the label tag.
items[].hint object false Can be used to add a hint to each radio item within the radios component.
items[].divider string false Divider text to separate radio items, for example the text "or".
items[].checked boolean false Whether the radio should be checked when the page loads. Takes precedence over the top-level value option.
items[].conditional object false Provide additional content to reveal when the radio is checked.
items[].conditional{}.html string true The HTML to reveal when the radio is checked.
items[].disabled boolean false If true, radio will be disabled.
items[].attributes object false HTML attributes (for example data attributes) to add to the radio input tag.
value string false The value for the radio which should be checked when the page loads. Use this as an alternative to setting the checked option on each individual item.
classes string false Classes to add to the radios container.
attributes object false HTML attributes (for example data attributes) to add to the radios container. 
{% 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"
    }
  ]
}) }}

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

Position radios to the left of their labels. This makes them easier to find, especially for users of screen magnifiers.

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 based on the visual difference between radios and checkboxes alone. If needed, add a hint explaining this, for example, "Select 1 option".

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 cannot 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. In any case, it's best to beware binary choices.

Order radio options alphabetically by default. In some cases, it's helpful to order them from most-to-least common options, for example, by population size. But be careful, as this can reinforce bias. If in doubt, order alphabetically.

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?". Read more about using fieldset.

Inline radios

If there are only 2 short options, you can either stack the radios vertically or display them horizontally (inline).

On small screens such as mobile devices, the radios will still stack vertically.

Open this inline radios example in a new tab 
<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="example-inline" name="example-inline" type="radio" value="yes">
        <label class="nhsuk-label nhsuk-radios__label" for="example-inline">
          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>
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
id string false The ID of the radios component.
fieldset object false The fieldset used by the radios component.
hint object false Can be used to add a hint to the radios component.
errorMessage object false Can be used to add an error message to the radios component. The error message component will not display if you use a falsy value for errorMessage, for example false or null.
formGroup object false Additional options for the form group containing the radios component.
formGroup{}.classes string false Classes to add to the form group (for example to show error state for the whole group).
formGroup{}.attributes object false HTML attributes (for example data attributes) to add to the form group.
formGroup{}.beforeInputs object false Content to add before all radio items within the radios component.
formGroup{}.beforeInputs{}.text string true Text to add before all radio items. If html is provided, the text option will be ignored.
formGroup{}.beforeInputs{}.html string true HTML to add before all radio items. If html is provided, the text option will be ignored.
formGroup{}.afterInputs object false Content to add after all radio items within the radios component.
formGroup{}.afterInputs{}.text string true Text to add after all radio items. If html is provided, the text option will be ignored.
formGroup{}.afterInputs{}.html string true HTML to add after all radio items. If html is provided, the text option will be ignored.
idPrefix string false Optional prefix. This is used to prefix the id attribute for each radio input, hint and error message, separated by -. Defaults to the name option value.
name string true Name attribute for the radio items.
items array true The radio items within the radios component.
items[].text string true If html is set, this is not required. Text to use within each radio item label. If html is provided, the text option will be ignored.
items[].html string true If text is set, this is not required. HTML to use within each radio item label. If html is provided, the text option will be ignored.
items[].id string false Specific ID attribute for the radio item. If omitted, then idPrefix string will be applied.
items[].value string true Value for the radio input.
items[].label object false Subset of options for the label used by each radio item within the radios component.
items[].label{}.classes string false Classes to add to the label tag.
items[].label{}.attributes object false HTML attributes (for example data attributes) to add to the label tag.
items[].hint object false Can be used to add a hint to each radio item within the radios component.
items[].divider string false Divider text to separate radio items, for example the text "or".
items[].checked boolean false Whether the radio should be checked when the page loads. Takes precedence over the top-level value option.
items[].conditional object false Provide additional content to reveal when the radio is checked.
items[].conditional{}.html string true The HTML to reveal when the radio is checked.
items[].disabled boolean false If true, radio will be disabled.
items[].attributes object false HTML attributes (for example data attributes) to add to the radio input tag.
value string false The value for the radio which should be checked when the page loads. Use this as an alternative to setting the checked option on each individual item.
classes string false Classes to add to the radios container.
attributes object false HTML attributes (for example data attributes) to add to the radios container. 
{% 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"
    }
  ]
}) }}

Radios with hints

Use hint text to give users help in context. Read more about hint text.

Open this with hints radios example in a new tab 
<div class="nhsuk-form-group">
  <fieldset class="nhsuk-fieldset" aria-describedby="example-hints-hint">
    <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--l">
      <h1 class="nhsuk-fieldset__heading">
        Do you know your NHS number?
      </h1>
    </legend>
    <div id="example-hints-hint" class="nhsuk-hint">
      This is a 10 digit number, like 485 777 3456, 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="example-hints" name="example-hints" type="radio" value="yes">
        <label class="nhsuk-label nhsuk-radios__label" for="example-hints">
          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>
  </fieldset>
</div>
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
id string false The ID of the radios component.
fieldset object false The fieldset used by the radios component.
hint object false Can be used to add a hint to the radios component.
errorMessage object false Can be used to add an error message to the radios component. The error message component will not display if you use a falsy value for errorMessage, for example false or null.
formGroup object false Additional options for the form group containing the radios component.
formGroup{}.classes string false Classes to add to the form group (for example to show error state for the whole group).
formGroup{}.attributes object false HTML attributes (for example data attributes) to add to the form group.
formGroup{}.beforeInputs object false Content to add before all radio items within the radios component.
formGroup{}.beforeInputs{}.text string true Text to add before all radio items. If html is provided, the text option will be ignored.
formGroup{}.beforeInputs{}.html string true HTML to add before all radio items. If html is provided, the text option will be ignored.
formGroup{}.afterInputs object false Content to add after all radio items within the radios component.
formGroup{}.afterInputs{}.text string true Text to add after all radio items. If html is provided, the text option will be ignored.
formGroup{}.afterInputs{}.html string true HTML to add after all radio items. If html is provided, the text option will be ignored.
idPrefix string false Optional prefix. This is used to prefix the id attribute for each radio input, hint and error message, separated by -. Defaults to the name option value.
name string true Name attribute for the radio items.
items array true The radio items within the radios component.
items[].text string true If html is set, this is not required. Text to use within each radio item label. If html is provided, the text option will be ignored.
items[].html string true If text is set, this is not required. HTML to use within each radio item label. If html is provided, the text option will be ignored.
items[].id string false Specific ID attribute for the radio item. If omitted, then idPrefix string will be applied.
items[].value string true Value for the radio input.
items[].label object false Subset of options for the label used by each radio item within the radios component.
items[].label{}.classes string false Classes to add to the label tag.
items[].label{}.attributes object false HTML attributes (for example data attributes) to add to the label tag.
items[].hint object false Can be used to add a hint to each radio item within the radios component.
items[].divider string false Divider text to separate radio items, for example the text "or".
items[].checked boolean false Whether the radio should be checked when the page loads. Takes precedence over the top-level value option.
items[].conditional object false Provide additional content to reveal when the radio is checked.
items[].conditional{}.html string true The HTML to reveal when the radio is checked.
items[].disabled boolean false If true, radio will be disabled.
items[].attributes object false HTML attributes (for example data attributes) to add to the radio input tag.
value string false The value for the radio which should be checked when the page loads. Use this as an alternative to setting the checked option on each individual item.
classes string false Classes to add to the radios container.
attributes object false HTML attributes (for example data attributes) to add to the radios container. 
{% from 'radios/macro.njk' import radios %}
{% from 'fieldset/macro.njk' import fieldset %}
{% from 'hint/macro.njk' import hint %}

{{ radios({
  idPrefix: "example-hints",
  name: "example-hints",
  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, that you can find on an NHS letter, prescription or in the NHS App"
  },
  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"
  }
]
}) }}

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 a new tab 
<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="example-hints" name="example-hints" type="radio" value="mobile" aria-describedby="example-hints-item-hint">
        <label class="nhsuk-label nhsuk-radios__label" for="example-hints">
          Yes, I have a mobile phone with signal
        </label>
        <div id="example-hints-item-hint" class="nhsuk-hint nhsuk-radios__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 id="example-hints-2-item-hint" class="nhsuk-hint nhsuk-radios__hint">
          We will call you to give you a 6 digit security code
        </div>
      </div>
    </div>
  </fieldset>
</div>
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
id string false The ID of the radios component.
fieldset object false The fieldset used by the radios component.
hint object false Can be used to add a hint to the radios component.
errorMessage object false Can be used to add an error message to the radios component. The error message component will not display if you use a falsy value for errorMessage, for example false or null.
formGroup object false Additional options for the form group containing the radios component.
formGroup{}.classes string false Classes to add to the form group (for example to show error state for the whole group).
formGroup{}.attributes object false HTML attributes (for example data attributes) to add to the form group.
formGroup{}.beforeInputs object false Content to add before all radio items within the radios component.
formGroup{}.beforeInputs{}.text string true Text to add before all radio items. If html is provided, the text option will be ignored.
formGroup{}.beforeInputs{}.html string true HTML to add before all radio items. If html is provided, the text option will be ignored.
formGroup{}.afterInputs object false Content to add after all radio items within the radios component.
formGroup{}.afterInputs{}.text string true Text to add after all radio items. If html is provided, the text option will be ignored.
formGroup{}.afterInputs{}.html string true HTML to add after all radio items. If html is provided, the text option will be ignored.
idPrefix string false Optional prefix. This is used to prefix the id attribute for each radio input, hint and error message, separated by -. Defaults to the name option value.
name string true Name attribute for the radio items.
items array true The radio items within the radios component.
items[].text string true If html is set, this is not required. Text to use within each radio item label. If html is provided, the text option will be ignored.
items[].html string true If text is set, this is not required. HTML to use within each radio item label. If html is provided, the text option will be ignored.
items[].id string false Specific ID attribute for the radio item. If omitted, then idPrefix string will be applied.
items[].value string true Value for the radio input.
items[].label object false Subset of options for the label used by each radio item within the radios component.
items[].label{}.classes string false Classes to add to the label tag.
items[].label{}.attributes object false HTML attributes (for example data attributes) to add to the label tag.
items[].hint object false Can be used to add a hint to each radio item within the radios component.
items[].divider string false Divider text to separate radio items, for example the text "or".
items[].checked boolean false Whether the radio should be checked when the page loads. Takes precedence over the top-level value option.
items[].conditional object false Provide additional content to reveal when the radio is checked.
items[].conditional{}.html string true The HTML to reveal when the radio is checked.
items[].disabled boolean false If true, radio will be disabled.
items[].attributes object false HTML attributes (for example data attributes) to add to the radio input tag.
value string false The value for the radio which should be checked when the page loads. Use this as an alternative to setting the checked option on each individual item.
classes string false Classes to add to the radios container.
attributes object false HTML attributes (for example data attributes) to add to the radios container. 
{% 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"
      }
    }
  ]
}) }}

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 a new tab 
<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="example-divider" name="example-divider" type="radio" value="nhsuk-login">
        <label class="nhsuk-label nhsuk-radios__label" for="example-divider">
          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>
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
id string false The ID of the radios component.
fieldset object false The fieldset used by the radios component.
hint object false Can be used to add a hint to the radios component.
errorMessage object false Can be used to add an error message to the radios component. The error message component will not display if you use a falsy value for errorMessage, for example false or null.
formGroup object false Additional options for the form group containing the radios component.
formGroup{}.classes string false Classes to add to the form group (for example to show error state for the whole group).
formGroup{}.attributes object false HTML attributes (for example data attributes) to add to the form group.
formGroup{}.beforeInputs object false Content to add before all radio items within the radios component.
formGroup{}.beforeInputs{}.text string true Text to add before all radio items. If html is provided, the text option will be ignored.
formGroup{}.beforeInputs{}.html string true HTML to add before all radio items. If html is provided, the text option will be ignored.
formGroup{}.afterInputs object false Content to add after all radio items within the radios component.
formGroup{}.afterInputs{}.text string true Text to add after all radio items. If html is provided, the text option will be ignored.
formGroup{}.afterInputs{}.html string true HTML to add after all radio items. If html is provided, the text option will be ignored.
idPrefix string false Optional prefix. This is used to prefix the id attribute for each radio input, hint and error message, separated by -. Defaults to the name option value.
name string true Name attribute for the radio items.
items array true The radio items within the radios component.
items[].text string true If html is set, this is not required. Text to use within each radio item label. If html is provided, the text option will be ignored.
items[].html string true If text is set, this is not required. HTML to use within each radio item label. If html is provided, the text option will be ignored.
items[].id string false Specific ID attribute for the radio item. If omitted, then idPrefix string will be applied.
items[].value string true Value for the radio input.
items[].label object false Subset of options for the label used by each radio item within the radios component.
items[].label{}.classes string false Classes to add to the label tag.
items[].label{}.attributes object false HTML attributes (for example data attributes) to add to the label tag.
items[].hint object false Can be used to add a hint to each radio item within the radios component.
items[].divider string false Divider text to separate radio items, for example the text "or".
items[].checked boolean false Whether the radio should be checked when the page loads. Takes precedence over the top-level value option.
items[].conditional object false Provide additional content to reveal when the radio is checked.
items[].conditional{}.html string true The HTML to reveal when the radio is checked.
items[].disabled boolean false If true, radio will be disabled.
items[].attributes object false HTML attributes (for example data attributes) to add to the radio input tag.
value string false The value for the radio which should be checked when the page loads. Use this as an alternative to setting the checked option on each individual item.
classes string false Classes to add to the radios container.
attributes object false HTML attributes (for example data attributes) to add to the radios container. 
{% 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"
    }
  ]
}) }}

Conditionally revealing a related question

You can add a conditionally revealing question to radios, so users only see the question 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 a new tab 
<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 id="contact-hint" class="nhsuk-hint">
      Select one option
    </div>
    <div class="nhsuk-radios" data-module="nhsuk-radios">
      <div class="nhsuk-radios__item">
        <input class="nhsuk-radios__input" id="contact" name="contact" type="radio" value="email" aria-controls="conditional-contact">
        <label class="nhsuk-label nhsuk-radios__label" for="contact">
          Email
        </label>
      </div>
      <div class="nhsuk-radios__conditional nhsuk-radios__conditional--hidden" id="conditional-contact">
        <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">
        <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="" aria-controls="conditional-contact-3">
        <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>
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
id string false The ID of the radios component.
fieldset object false The fieldset used by the radios component.
hint object false Can be used to add a hint to the radios component.
errorMessage object false Can be used to add an error message to the radios component. The error message component will not display if you use a falsy value for errorMessage, for example false or null.
formGroup object false Additional options for the form group containing the radios component.
formGroup{}.classes string false Classes to add to the form group (for example to show error state for the whole group).
formGroup{}.attributes object false HTML attributes (for example data attributes) to add to the form group.
formGroup{}.beforeInputs object false Content to add before all radio items within the radios component.
formGroup{}.beforeInputs{}.text string true Text to add before all radio items. If html is provided, the text option will be ignored.
formGroup{}.beforeInputs{}.html string true HTML to add before all radio items. If html is provided, the text option will be ignored.
formGroup{}.afterInputs object false Content to add after all radio items within the radios component.
formGroup{}.afterInputs{}.text string true Text to add after all radio items. If html is provided, the text option will be ignored.
formGroup{}.afterInputs{}.html string true HTML to add after all radio items. If html is provided, the text option will be ignored.
idPrefix string false Optional prefix. This is used to prefix the id attribute for each radio input, hint and error message, separated by -. Defaults to the name option value.
name string true Name attribute for the radio items.
items array true The radio items within the radios component.
items[].text string true If html is set, this is not required. Text to use within each radio item label. If html is provided, the text option will be ignored.
items[].html string true If text is set, this is not required. HTML to use within each radio item label. If html is provided, the text option will be ignored.
items[].id string false Specific ID attribute for the radio item. If omitted, then idPrefix string will be applied.
items[].value string true Value for the radio input.
items[].label object false Subset of options for the label used by each radio item within the radios component.
items[].label{}.classes string false Classes to add to the label tag.
items[].label{}.attributes object false HTML attributes (for example data attributes) to add to the label tag.
items[].hint object false Can be used to add a hint to each radio item within the radios component.
items[].divider string false Divider text to separate radio items, for example the text "or".
items[].checked boolean false Whether the radio should be checked when the page loads. Takes precedence over the top-level value option.
items[].conditional object false Provide additional content to reveal when the radio is checked.
items[].conditional{}.html string true The HTML to reveal when the radio is checked.
items[].disabled boolean false If true, radio will be disabled.
items[].attributes object false HTML attributes (for example data attributes) to add to the radio input tag.
value string false The value for the radio which should be checked when the page loads. Use this as an alternative to setting the checked option on each individual item.
classes string false Classes to add to the radios container.
attributes object false HTML attributes (for example data attributes) to add to the radios container. 
{% 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
      }
    }
  ]
}) }}

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 questions to inline radios.

Only conditionally reveal questions. Do not show or hide anything that is not a question.

Known issues

Users are not always notified when a conditionally revealed question is shown or hidden. This fails WCAG 2.2 success criterion 4.1.2 name, role, value (W3C)

However, GOV.UK found that screen reader users did not have difficulty answering a conditionally revealed question as long as it's simple. It confused users when they conditionally revealed complicated questions, particularly questions with more than 1 part.

Smaller radios

Open this smaller radios example in a new tab 
<div class="nhsuk-form-group">
  <fieldset class="nhsuk-fieldset">
    <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--s">
      <h1 class="nhsuk-fieldset__heading">
        Filter
      </h1>
    </legend>
    <div class="nhsuk-radios nhsuk-radios--small" data-module="nhsuk-radios">
      <div class="nhsuk-radios__item">
        <input class="nhsuk-radios__input" id="filter" name="filter" type="radio" value="monthly">
        <label class="nhsuk-label nhsuk-radios__label" for="filter">
          Monthly
        </label>
      </div>
      <div class="nhsuk-radios__item">
        <input class="nhsuk-radios__input" id="filter-2" name="filter" type="radio" value="yearly">
        <label class="nhsuk-label nhsuk-radios__label" for="filter-2">
          Yearly
        </label>
      </div>
    </div>
  </fieldset>
</div>
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 smaller radios
Name Type Required Description
id string false The ID of the radios component.
fieldset object false The fieldset used by the radios component.
hint object false Can be used to add a hint to the radios component.
errorMessage object false Can be used to add an error message to the radios component. The error message component will not display if you use a falsy value for errorMessage, for example false or null.
formGroup object false Additional options for the form group containing the radios component.
formGroup{}.classes string false Classes to add to the form group (for example to show error state for the whole group).
formGroup{}.attributes object false HTML attributes (for example data attributes) to add to the form group.
formGroup{}.beforeInputs object false Content to add before all radio items within the radios component.
formGroup{}.beforeInputs{}.text string true Text to add before all radio items. If html is provided, the text option will be ignored.
formGroup{}.beforeInputs{}.html string true HTML to add before all radio items. If html is provided, the text option will be ignored.
formGroup{}.afterInputs object false Content to add after all radio items within the radios component.
formGroup{}.afterInputs{}.text string true Text to add after all radio items. If html is provided, the text option will be ignored.
formGroup{}.afterInputs{}.html string true HTML to add after all radio items. If html is provided, the text option will be ignored.
idPrefix string false Optional prefix. This is used to prefix the id attribute for each radio input, hint and error message, separated by -. Defaults to the name option value.
name string true Name attribute for the radio items.
items array true The radio items within the radios component.
items[].text string true If html is set, this is not required. Text to use within each radio item label. If html is provided, the text option will be ignored.
items[].html string true If text is set, this is not required. HTML to use within each radio item label. If html is provided, the text option will be ignored.
items[].id string false Specific ID attribute for the radio item. If omitted, then idPrefix string will be applied.
items[].value string true Value for the radio input.
items[].label object false Subset of options for the label used by each radio item within the radios component.
items[].label{}.classes string false Classes to add to the label tag.
items[].label{}.attributes object false HTML attributes (for example data attributes) to add to the label tag.
items[].hint object false Can be used to add a hint to each radio item within the radios component.
items[].divider string false Divider text to separate radio items, for example the text "or".
items[].checked boolean false Whether the radio should be checked when the page loads. Takes precedence over the top-level value option.
items[].conditional object false Provide additional content to reveal when the radio is checked.
items[].conditional{}.html string true The HTML to reveal when the radio is checked.
items[].disabled boolean false If true, radio will be disabled.
items[].attributes object false HTML attributes (for example data attributes) to add to the radio input tag.
value string false The value for the radio which should be checked when the page loads. Use this as an alternative to setting the checked option on each individual item.
classes string false Classes to add to the radios container.
attributes object false HTML attributes (for example data attributes) to add to the radios container. 
{% from 'radios/macro.njk' import radios %}

{{ radios({
  idPrefix: "filter",
  name: "filter",
  fieldset: {
    legend: {
      text: "Filter",
      classes: "nhsuk-fieldset__legend--s",
      isPageHeading: true
    }
  },
  classes: "nhsuk-radios--small",
  items: [
    {
      value: "monthly",
      text: "Monthly"
    },
    {
      value: "yearly",
      text: "Yearly"
    }
  ]
}) }}

Use standard-sized radios in most cases.

You can use small radios where you need something less visually prominent. For example, on:

  • a page of search results where users need to see and change search filters without distracting them from the results
  • on information-dense screens in services designed for repeat use, like staff-facing systems

Error messages

Display an error message if the user has not:

  • selected any radios
  • answered a conditionally revealed question

Style error messages like this:

Open this error message radios example in a new tab 
<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 id="example-error-hint" class="nhsuk-hint">
      This includes changing your last name or spelling your name differently
    </div>
    <span id="example-error-error" class="nhsuk-error-message">
      <span class="nhsuk-u-visually-hidden">Error:</span> Select yes if you have changed your name
    </span>
    <div class="nhsuk-radios" data-module="nhsuk-radios">
      <div class="nhsuk-radios__item">
        <input class="nhsuk-radios__input" id="example-error" name="example-error" type="radio" value="yes">
        <label class="nhsuk-label nhsuk-radios__label" for="example-error">
          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>
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
id string false The ID of the radios component.
fieldset object false The fieldset used by the radios component.
hint object false Can be used to add a hint to the radios component.
errorMessage object false Can be used to add an error message to the radios component. The error message component will not display if you use a falsy value for errorMessage, for example false or null.
formGroup object false Additional options for the form group containing the radios component.
formGroup{}.classes string false Classes to add to the form group (for example to show error state for the whole group).
formGroup{}.attributes object false HTML attributes (for example data attributes) to add to the form group.
formGroup{}.beforeInputs object false Content to add before all radio items within the radios component.
formGroup{}.beforeInputs{}.text string true Text to add before all radio items. If html is provided, the text option will be ignored.
formGroup{}.beforeInputs{}.html string true HTML to add before all radio items. If html is provided, the text option will be ignored.
formGroup{}.afterInputs object false Content to add after all radio items within the radios component.
formGroup{}.afterInputs{}.text string true Text to add after all radio items. If html is provided, the text option will be ignored.
formGroup{}.afterInputs{}.html string true HTML to add after all radio items. If html is provided, the text option will be ignored.
idPrefix string false Optional prefix. This is used to prefix the id attribute for each radio input, hint and error message, separated by -. Defaults to the name option value.
name string true Name attribute for the radio items.
items array true The radio items within the radios component.
items[].text string true If html is set, this is not required. Text to use within each radio item label. If html is provided, the text option will be ignored.
items[].html string true If text is set, this is not required. HTML to use within each radio item label. If html is provided, the text option will be ignored.
items[].id string false Specific ID attribute for the radio item. If omitted, then idPrefix string will be applied.
items[].value string true Value for the radio input.
items[].label object false Subset of options for the label used by each radio item within the radios component.
items[].label{}.classes string false Classes to add to the label tag.
items[].label{}.attributes object false HTML attributes (for example data attributes) to add to the label tag.
items[].hint object false Can be used to add a hint to each radio item within the radios component.
items[].divider string false Divider text to separate radio items, for example the text "or".
items[].checked boolean false Whether the radio should be checked when the page loads. Takes precedence over the top-level value option.
items[].conditional object false Provide additional content to reveal when the radio is checked.
items[].conditional{}.html string true The HTML to reveal when the radio is checked.
items[].disabled boolean false If true, radio will be disabled.
items[].attributes object false HTML attributes (for example data attributes) to add to the radio input tag.
value string false The value for the radio which should be checked when the page loads. Use this as an alternative to setting the checked option on each individual item.
classes string false Classes to add to the radios container.
attributes object false HTML attributes (for example data attributes) to add to the radios container. 
{% 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"
    }
  ]
}) }}

Follow:

Research

Our checkboxes are based on the GOV.UK design system. Read a GOV.UK blog post about their updates to radios and checkboxes.

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.

Feed back or share insights on GitHub

Read more about how to feed back or share insights.

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

Updated: October 2025