Skip to main content

Form elements – Radios

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

Information: Version 10

Radios updates

Added smaller radios in version 10.1

Made "breaking code changes" to radios in version 10

Open this example in a new tab: radios 
<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.

Primary options
Name Type Description
id string The ID of the radios component.
fieldset object The fieldset used by the radios component. See macro options for fieldset.
hint object Can be used to add a hint to the radios component. See macro options for hint.
errorMessage object 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. See macro options for errorMessage.
formGroup object Additional options for the form group containing the radios component. See macro options for formGroup.
idPrefix string 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 Required. The name attribute for the radio items.
items array Required. The radio items within the radios component. See macro options for items.
value string 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 Classes to add to the radios container.
attributes object HTML attributes (for example data attributes) to add to the radios container.
Options for formGroup object
Name Type Description
classes string Classes to add to the form group (for example to show error state for the whole group).
attributes object HTML attributes (for example data attributes) to add to the form group.
beforeInputs object Content to add before all radio items within the radios component. See macro options for formGroup beforeInputs.
afterInputs object Content to add after all radio items within the radios component. See macro options for formGroup afterInputs.
Options for formGroup beforeInputs object
Name Type Description
text string Required. Text to add before all radio items. If html is provided, the text option will be ignored.
html string Required. HTML to add before all radio items. If html is provided, the text option will be ignored.
Options for formGroup afterInputs object
Name Type Description
text string Required. Text to add after all radio items. If html is provided, the text option will be ignored.
html string Required. HTML to add after all radio items. If html is provided, the text option will be ignored.
Options for items array objects
Name Type Description
text string Required. 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.
html string Required. 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.
id string Specific id attribute for the radio item. If omitted, then idPrefix string will be applied.
value string Required. The value attribute for the radio input.
label object Subset of options for the label used by each radio item within the radios component. See macro options for items label.
hint object Can be used to add a hint to each radio item within the radios component. See macro options for hint.
divider string Divider text to separate radio items, for example the text "or".
checked boolean Whether the radio should be checked when the page loads. Takes precedence over the top-level value option.
conditional object Provide additional content to reveal when the radio is checked. See macro options for items conditional.
disabled boolean If true, radio will be disabled.
classes string Classes to add to the radio input tag.
attributes object HTML attributes (for example data attributes) to add to the radio input tag.
Options for items label component
Name Type Description
classes string Classes to add to the label tag.
attributes object HTML attributes (for example data attributes) to add to the label tag.
Options for items conditional object
Name Type Description
html string Required. The HTML to reveal when the radio is checked. 
{% from "radios/macro.njk" import radios %}

{{ radios({
  idPrefix: "example",
  name: "example",
  fieldset: {
    legend: {
      text: "Are you 18 or over?",
      size: "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 example in a new tab: radios inline 
<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="exampleInline" 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="exampleInline" 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.

Primary options
Name Type Description
id string The ID of the radios component.
fieldset object The fieldset used by the radios component. See macro options for fieldset.
hint object Can be used to add a hint to the radios component. See macro options for hint.
errorMessage object 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. See macro options for errorMessage.
formGroup object Additional options for the form group containing the radios component. See macro options for formGroup.
idPrefix string 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 Required. The name attribute for the radio items.
items array Required. The radio items within the radios component. See macro options for items.
value string 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 Classes to add to the radios container.
attributes object HTML attributes (for example data attributes) to add to the radios container.
Options for formGroup object
Name Type Description
classes string Classes to add to the form group (for example to show error state for the whole group).
attributes object HTML attributes (for example data attributes) to add to the form group.
beforeInputs object Content to add before all radio items within the radios component. See macro options for formGroup beforeInputs.
afterInputs object Content to add after all radio items within the radios component. See macro options for formGroup afterInputs.
Options for formGroup beforeInputs object
Name Type Description
text string Required. Text to add before all radio items. If html is provided, the text option will be ignored.
html string Required. HTML to add before all radio items. If html is provided, the text option will be ignored.
Options for formGroup afterInputs object
Name Type Description
text string Required. Text to add after all radio items. If html is provided, the text option will be ignored.
html string Required. HTML to add after all radio items. If html is provided, the text option will be ignored.
Options for items array objects
Name Type Description
text string Required. 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.
html string Required. 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.
id string Specific id attribute for the radio item. If omitted, then idPrefix string will be applied.
value string Required. The value attribute for the radio input.
label object Subset of options for the label used by each radio item within the radios component. See macro options for items label.
hint object Can be used to add a hint to each radio item within the radios component. See macro options for hint.
divider string Divider text to separate radio items, for example the text "or".
checked boolean Whether the radio should be checked when the page loads. Takes precedence over the top-level value option.
conditional object Provide additional content to reveal when the radio is checked. See macro options for items conditional.
disabled boolean If true, radio will be disabled.
classes string Classes to add to the radio input tag.
attributes object HTML attributes (for example data attributes) to add to the radio input tag.
Options for items label component
Name Type Description
classes string Classes to add to the label tag.
attributes object HTML attributes (for example data attributes) to add to the label tag.
Options for items conditional object
Name Type Description
html string Required. The HTML to reveal when the radio is checked. 
{% from "radios/macro.njk" import radios %}

{{ radios({
  idPrefix: "example-inline",
  name: "exampleInline",
  classes: "nhsuk-radios--inline",
  fieldset: {
    legend: {
      text: "Are you 18 or over?",
      size: "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.

Do not assume that users will know that they can only select 1 option based on the visual difference between radios and checkboxes. If needed, add a hint explaining this, for example, "Select 1 option".

Open this example in a new tab: radios with hints 
<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">
        How do you want to be contacted about this?
      </h1>
    </legend>
    <div id="example-hints-hint" class="nhsuk-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-hints" name="exampleHints" type="radio" value="email">
        <label class="nhsuk-label nhsuk-radios__label" for="example-hints">
          Email
        </label>
      </div>
      <div class="nhsuk-radios__item">
        <input class="nhsuk-radios__input" id="example-hints-2" name="exampleHints" type="radio" value="phone">
        <label class="nhsuk-label nhsuk-radios__label" for="example-hints-2">
          Phone
        </label>
      </div>
      <div class="nhsuk-radios__item">
        <input class="nhsuk-radios__input" id="example-hints-3" name="exampleHints" type="radio" value="text-message">
        <label class="nhsuk-label nhsuk-radios__label" for="example-hints-3">
          Text message
        </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.

Primary options
Name Type Description
id string The ID of the radios component.
fieldset object The fieldset used by the radios component. See macro options for fieldset.
hint object Can be used to add a hint to the radios component. See macro options for hint.
errorMessage object 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. See macro options for errorMessage.
formGroup object Additional options for the form group containing the radios component. See macro options for formGroup.
idPrefix string 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 Required. The name attribute for the radio items.
items array Required. The radio items within the radios component. See macro options for items.
value string 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 Classes to add to the radios container.
attributes object HTML attributes (for example data attributes) to add to the radios container.
Options for formGroup object
Name Type Description
classes string Classes to add to the form group (for example to show error state for the whole group).
attributes object HTML attributes (for example data attributes) to add to the form group.
beforeInputs object Content to add before all radio items within the radios component. See macro options for formGroup beforeInputs.
afterInputs object Content to add after all radio items within the radios component. See macro options for formGroup afterInputs.
Options for formGroup beforeInputs object
Name Type Description
text string Required. Text to add before all radio items. If html is provided, the text option will be ignored.
html string Required. HTML to add before all radio items. If html is provided, the text option will be ignored.
Options for formGroup afterInputs object
Name Type Description
text string Required. Text to add after all radio items. If html is provided, the text option will be ignored.
html string Required. HTML to add after all radio items. If html is provided, the text option will be ignored.
Options for items array objects
Name Type Description
text string Required. 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.
html string Required. 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.
id string Specific id attribute for the radio item. If omitted, then idPrefix string will be applied.
value string Required. The value attribute for the radio input.
label object Subset of options for the label used by each radio item within the radios component. See macro options for items label.
hint object Can be used to add a hint to each radio item within the radios component. See macro options for hint.
divider string Divider text to separate radio items, for example the text "or".
checked boolean Whether the radio should be checked when the page loads. Takes precedence over the top-level value option.
conditional object Provide additional content to reveal when the radio is checked. See macro options for items conditional.
disabled boolean If true, radio will be disabled.
classes string Classes to add to the radio input tag.
attributes object HTML attributes (for example data attributes) to add to the radio input tag.
Options for items label component
Name Type Description
classes string Classes to add to the label tag.
attributes object HTML attributes (for example data attributes) to add to the label tag.
Options for items conditional object
Name Type Description
html string Required. The HTML to reveal when the radio is checked. 
{% from "radios/macro.njk" import radios %}
{% from "fieldset/macro.njk" import fieldset %}
{% from "hint/macro.njk" import hint %}

{{ radios({
  idPrefix: "example-hints",
  name: "exampleHints",
  fieldset: {
    legend: {
      text: "How do you want to be contacted about this?",
      size: "l",
      isPageHeading: true
    }
  },
  hint: {
    text: "Select 1 option"
  },
  items: [
    {
      value: "email",
      text: "Email"
    },
    {
      value: "phone",
      text: "Phone"
    },
    {
      value: "text-message",
      text: "Text message"
    }
  ]
}) }}

Radio items with hints

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

Open this example in a new tab: radios with hints options 
<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="exampleHints" 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="exampleHints" 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.

Primary options
Name Type Description
id string The ID of the radios component.
fieldset object The fieldset used by the radios component. See macro options for fieldset.
hint object Can be used to add a hint to the radios component. See macro options for hint.
errorMessage object 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. See macro options for errorMessage.
formGroup object Additional options for the form group containing the radios component. See macro options for formGroup.
idPrefix string 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 Required. The name attribute for the radio items.
items array Required. The radio items within the radios component. See macro options for items.
value string 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 Classes to add to the radios container.
attributes object HTML attributes (for example data attributes) to add to the radios container.
Options for formGroup object
Name Type Description
classes string Classes to add to the form group (for example to show error state for the whole group).
attributes object HTML attributes (for example data attributes) to add to the form group.
beforeInputs object Content to add before all radio items within the radios component. See macro options for formGroup beforeInputs.
afterInputs object Content to add after all radio items within the radios component. See macro options for formGroup afterInputs.
Options for formGroup beforeInputs object
Name Type Description
text string Required. Text to add before all radio items. If html is provided, the text option will be ignored.
html string Required. HTML to add before all radio items. If html is provided, the text option will be ignored.
Options for formGroup afterInputs object
Name Type Description
text string Required. Text to add after all radio items. If html is provided, the text option will be ignored.
html string Required. HTML to add after all radio items. If html is provided, the text option will be ignored.
Options for items array objects
Name Type Description
text string Required. 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.
html string Required. 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.
id string Specific id attribute for the radio item. If omitted, then idPrefix string will be applied.
value string Required. The value attribute for the radio input.
label object Subset of options for the label used by each radio item within the radios component. See macro options for items label.
hint object Can be used to add a hint to each radio item within the radios component. See macro options for hint.
divider string Divider text to separate radio items, for example the text "or".
checked boolean Whether the radio should be checked when the page loads. Takes precedence over the top-level value option.
conditional object Provide additional content to reveal when the radio is checked. See macro options for items conditional.
disabled boolean If true, radio will be disabled.
classes string Classes to add to the radio input tag.
attributes object HTML attributes (for example data attributes) to add to the radio input tag.
Options for items label component
Name Type Description
classes string Classes to add to the label tag.
attributes object HTML attributes (for example data attributes) to add to the label tag.
Options for items conditional object
Name Type Description
html string Required. The HTML to reveal when the radio is checked. 
{% from "radios/macro.njk" import radios %}

{{ radios({
  idPrefix: "example-hints",
  name: "exampleHints",
  fieldset: {
    legend: {
      text: "Do you have a mobile phone with signal?",
        size: "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 example in a new tab: radios items with a text divider 
<div class="nhsuk-form-group">
  <fieldset class="nhsuk-fieldset" aria-describedby="example-divider-hint">
    <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--l">
      <h1 class="nhsuk-fieldset__heading">
        Have you had all the vaccinations you're eligible for in the UK?
      </h1>
    </legend>
    <div id="example-divider-hint" class="nhsuk-hint">
      You would have got these vaccinations at school, from your GP surgery or another healthcare provider
    </div>
    <div class="nhsuk-radios" data-module="nhsuk-radios">
      <div class="nhsuk-radios__item">
        <input class="nhsuk-radios__input" id="example-divider" name="exampleDivider" type="radio" value="yes">
        <label class="nhsuk-label nhsuk-radios__label" for="example-divider">
          Yes
        </label>
      </div>
      <div class="nhsuk-radios__item">
        <input class="nhsuk-radios__input" id="example-divider-2" name="exampleDivider" type="radio" value="no">
        <label class="nhsuk-label nhsuk-radios__label" for="example-divider-2">
          No
        </label>
      </div>
      <div class="nhsuk-radios__divider">or</div>
      <div class="nhsuk-radios__item">
        <input class="nhsuk-radios__input" id="example-divider-4" name="exampleDivider" type="radio" value="unknown">
        <label class="nhsuk-label nhsuk-radios__label" for="example-divider-4">
          I do not know
        </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.

Primary options
Name Type Description
id string The ID of the radios component.
fieldset object The fieldset used by the radios component. See macro options for fieldset.
hint object Can be used to add a hint to the radios component. See macro options for hint.
errorMessage object 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. See macro options for errorMessage.
formGroup object Additional options for the form group containing the radios component. See macro options for formGroup.
idPrefix string 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 Required. The name attribute for the radio items.
items array Required. The radio items within the radios component. See macro options for items.
value string 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 Classes to add to the radios container.
attributes object HTML attributes (for example data attributes) to add to the radios container.
Options for formGroup object
Name Type Description
classes string Classes to add to the form group (for example to show error state for the whole group).
attributes object HTML attributes (for example data attributes) to add to the form group.
beforeInputs object Content to add before all radio items within the radios component. See macro options for formGroup beforeInputs.
afterInputs object Content to add after all radio items within the radios component. See macro options for formGroup afterInputs.
Options for formGroup beforeInputs object
Name Type Description
text string Required. Text to add before all radio items. If html is provided, the text option will be ignored.
html string Required. HTML to add before all radio items. If html is provided, the text option will be ignored.
Options for formGroup afterInputs object
Name Type Description
text string Required. Text to add after all radio items. If html is provided, the text option will be ignored.
html string Required. HTML to add after all radio items. If html is provided, the text option will be ignored.
Options for items array objects
Name Type Description
text string Required. 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.
html string Required. 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.
id string Specific id attribute for the radio item. If omitted, then idPrefix string will be applied.
value string Required. The value attribute for the radio input.
label object Subset of options for the label used by each radio item within the radios component. See macro options for items label.
hint object Can be used to add a hint to each radio item within the radios component. See macro options for hint.
divider string Divider text to separate radio items, for example the text "or".
checked boolean Whether the radio should be checked when the page loads. Takes precedence over the top-level value option.
conditional object Provide additional content to reveal when the radio is checked. See macro options for items conditional.
disabled boolean If true, radio will be disabled.
classes string Classes to add to the radio input tag.
attributes object HTML attributes (for example data attributes) to add to the radio input tag.
Options for items label component
Name Type Description
classes string Classes to add to the label tag.
attributes object HTML attributes (for example data attributes) to add to the label tag.
Options for items conditional object
Name Type Description
html string Required. The HTML to reveal when the radio is checked. 
{% from "radios/macro.njk" import radios %}

{{ radios({
  idPrefix: "example-divider",
  name: "exampleDivider",
  fieldset: {
    legend: {
      text: "Have you had all the vaccinations you're eligible for in the UK?",
      size: "l",
      isPageHeading: true
    }
  },
  hint: {
    text: "You would have got these vaccinations at school, from your GP surgery or another healthcare provider"
  },
  items: [
    {
      value: "yes",
      text: "Yes"
    },
    {
      value: "no",
      text: "No"
    },
    {
      divider: "or"
    },
    {
      value: "unknown",
      text: "I do not know"
    }
  ]
}) }}

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 example in a new tab: radios conditional 
<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 do you want to be contacted about this?
      </h1>
    </legend>
    <div id="contact-hint" class="nhsuk-hint">
      Select 1 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" data-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" data-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="" data-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.

Primary options
Name Type Description
id string The ID of the radios component.
fieldset object The fieldset used by the radios component. See macro options for fieldset.
hint object Can be used to add a hint to the radios component. See macro options for hint.
errorMessage object 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. See macro options for errorMessage.
formGroup object Additional options for the form group containing the radios component. See macro options for formGroup.
idPrefix string 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 Required. The name attribute for the radio items.
items array Required. The radio items within the radios component. See macro options for items.
value string 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 Classes to add to the radios container.
attributes object HTML attributes (for example data attributes) to add to the radios container.
Options for formGroup object
Name Type Description
classes string Classes to add to the form group (for example to show error state for the whole group).
attributes object HTML attributes (for example data attributes) to add to the form group.
beforeInputs object Content to add before all radio items within the radios component. See macro options for formGroup beforeInputs.
afterInputs object Content to add after all radio items within the radios component. See macro options for formGroup afterInputs.
Options for formGroup beforeInputs object
Name Type Description
text string Required. Text to add before all radio items. If html is provided, the text option will be ignored.
html string Required. HTML to add before all radio items. If html is provided, the text option will be ignored.
Options for formGroup afterInputs object
Name Type Description
text string Required. Text to add after all radio items. If html is provided, the text option will be ignored.
html string Required. HTML to add after all radio items. If html is provided, the text option will be ignored.
Options for items array objects
Name Type Description
text string Required. 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.
html string Required. 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.
id string Specific id attribute for the radio item. If omitted, then idPrefix string will be applied.
value string Required. The value attribute for the radio input.
label object Subset of options for the label used by each radio item within the radios component. See macro options for items label.
hint object Can be used to add a hint to each radio item within the radios component. See macro options for hint.
divider string Divider text to separate radio items, for example the text "or".
checked boolean Whether the radio should be checked when the page loads. Takes precedence over the top-level value option.
conditional object Provide additional content to reveal when the radio is checked. See macro options for items conditional.
disabled boolean If true, radio will be disabled.
classes string Classes to add to the radio input tag.
attributes object HTML attributes (for example data attributes) to add to the radio input tag.
Options for items label component
Name Type Description
classes string Classes to add to the label tag.
attributes object HTML attributes (for example data attributes) to add to the label tag.
Options for items conditional object
Name Type Description
html string Required. The HTML to reveal when the radio is checked. 
{% 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 do you want to be contacted about this?",
      size: "l",
      isPageHeading: true
    }
  },
  hint: {
    text: "Select 1 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 example in a new tab: radios smaller 
<div class="nhsuk-form-group">
  <fieldset class="nhsuk-fieldset">
    <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--m">
      <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.

Primary options
Name Type Description
id string The ID of the radios component.
fieldset object The fieldset used by the radios component. See macro options for fieldset.
hint object Can be used to add a hint to the radios component. See macro options for hint.
errorMessage object 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. See macro options for errorMessage.
formGroup object Additional options for the form group containing the radios component. See macro options for formGroup.
idPrefix string 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 Required. The name attribute for the radio items.
items array Required. The radio items within the radios component. See macro options for items.
value string 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 Classes to add to the radios container.
attributes object HTML attributes (for example data attributes) to add to the radios container.
Options for formGroup object
Name Type Description
classes string Classes to add to the form group (for example to show error state for the whole group).
attributes object HTML attributes (for example data attributes) to add to the form group.
beforeInputs object Content to add before all radio items within the radios component. See macro options for formGroup beforeInputs.
afterInputs object Content to add after all radio items within the radios component. See macro options for formGroup afterInputs.
Options for formGroup beforeInputs object
Name Type Description
text string Required. Text to add before all radio items. If html is provided, the text option will be ignored.
html string Required. HTML to add before all radio items. If html is provided, the text option will be ignored.
Options for formGroup afterInputs object
Name Type Description
text string Required. Text to add after all radio items. If html is provided, the text option will be ignored.
html string Required. HTML to add after all radio items. If html is provided, the text option will be ignored.
Options for items array objects
Name Type Description
text string Required. 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.
html string Required. 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.
id string Specific id attribute for the radio item. If omitted, then idPrefix string will be applied.
value string Required. The value attribute for the radio input.
label object Subset of options for the label used by each radio item within the radios component. See macro options for items label.
hint object Can be used to add a hint to each radio item within the radios component. See macro options for hint.
divider string Divider text to separate radio items, for example the text "or".
checked boolean Whether the radio should be checked when the page loads. Takes precedence over the top-level value option.
conditional object Provide additional content to reveal when the radio is checked. See macro options for items conditional.
disabled boolean If true, radio will be disabled.
classes string Classes to add to the radio input tag.
attributes object HTML attributes (for example data attributes) to add to the radio input tag.
Options for items label component
Name Type Description
classes string Classes to add to the label tag.
attributes object HTML attributes (for example data attributes) to add to the label tag.
Options for items conditional object
Name Type Description
html string Required. The HTML to reveal when the radio is checked. 
{% from 'radios/macro.njk' import radios %}

{{ radios({
  idPrefix: "filter",
  name: "filter",
  fieldset: {
    legend: {
      text: "Filter",
      size: "m",
      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 example in a new tab: radios error message 
<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="exampleError" 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="exampleError" 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.

Primary options
Name Type Description
id string The ID of the radios component.
fieldset object The fieldset used by the radios component. See macro options for fieldset.
hint object Can be used to add a hint to the radios component. See macro options for hint.
errorMessage object 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. See macro options for errorMessage.
formGroup object Additional options for the form group containing the radios component. See macro options for formGroup.
idPrefix string 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 Required. The name attribute for the radio items.
items array Required. The radio items within the radios component. See macro options for items.
value string 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 Classes to add to the radios container.
attributes object HTML attributes (for example data attributes) to add to the radios container.
Options for formGroup object
Name Type Description
classes string Classes to add to the form group (for example to show error state for the whole group).
attributes object HTML attributes (for example data attributes) to add to the form group.
beforeInputs object Content to add before all radio items within the radios component. See macro options for formGroup beforeInputs.
afterInputs object Content to add after all radio items within the radios component. See macro options for formGroup afterInputs.
Options for formGroup beforeInputs object
Name Type Description
text string Required. Text to add before all radio items. If html is provided, the text option will be ignored.
html string Required. HTML to add before all radio items. If html is provided, the text option will be ignored.
Options for formGroup afterInputs object
Name Type Description
text string Required. Text to add after all radio items. If html is provided, the text option will be ignored.
html string Required. HTML to add after all radio items. If html is provided, the text option will be ignored.
Options for items array objects
Name Type Description
text string Required. 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.
html string Required. 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.
id string Specific id attribute for the radio item. If omitted, then idPrefix string will be applied.
value string Required. The value attribute for the radio input.
label object Subset of options for the label used by each radio item within the radios component. See macro options for items label.
hint object Can be used to add a hint to each radio item within the radios component. See macro options for hint.
divider string Divider text to separate radio items, for example the text "or".
checked boolean Whether the radio should be checked when the page loads. Takes precedence over the top-level value option.
conditional object Provide additional content to reveal when the radio is checked. See macro options for items conditional.
disabled boolean If true, radio will be disabled.
classes string Classes to add to the radio input tag.
attributes object HTML attributes (for example data attributes) to add to the radio input tag.
Options for items label component
Name Type Description
classes string Classes to add to the label tag.
attributes object HTML attributes (for example data attributes) to add to the label tag.
Options for items conditional object
Name Type Description
html string Required. The HTML to reveal when the radio is checked. 
{% from "radios/macro.njk" import radios %}

{{ radios({
  idPrefix: "example-error",
  name: "exampleError",
  errorMessage: {
    text: "Select yes if you have changed your name"
  },
  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"
  },
  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: November 2025