Components

Radios

Use the radios component when users can only select one option from a list.

Open this radios example in a new tab

Which organisation do you work for?

HTML 
<div class="govuk-form-group">
  <fieldset class="govuk-fieldset">
    <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
      <h1 class="govuk-fieldset__heading">
        Which organisation do you work for?
      </h1>
    </legend>
    <div class="govuk-radios" data-module="govuk-radios">
      <div class="govuk-radios__item">
        <input
          class="govuk-radios__input"
          id="organisation-default"
          name="organisation-default"
          type="radio"
          value="royal-navy"
        />
        <label
          class="govuk-label govuk-radios__label"
          for="organisation-default"
        >
          Royal Navy
        </label>
      </div>
      <div class="govuk-radios__item">
        <input
          class="govuk-radios__input"
          id="organisation-default-2"
          name="organisation-default"
          type="radio"
          value="british-army"
        />
        <label
          class="govuk-label govuk-radios__label"
          for="organisation-default-2"
        >
          British Army
        </label>
      </div>
      <div class="govuk-radios__item">
        <input
          class="govuk-radios__input"
          id="organisation-default-3"
          name="organisation-default"
          type="radio"
          value="royal-air-force"
        />
        <label
          class="govuk-label govuk-radios__label"
          for="organisation-default-3"
        >
          Royal Air Force
        </label>
      </div>
      <div class="govuk-radios__item">
        <input
          class="govuk-radios__input"
          id="organisation-default-4"
          name="organisation-default"
          type="radio"
          value="strategic-command"
        />
        <label
          class="govuk-label govuk-radios__label"
          for="organisation-default-4"
        >
          Strategic Command
        </label>
      </div>
    </div>
  </fieldset>
</div>
Nunjucks
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
fieldset object

The fieldset used by the radios component.

See fieldset.
hint object

Can be used to add a hint to the radios component.

See 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 error message.
formGroup object

Additional options for the form group containing the radios component.

See 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.

Name attribute for the radio items.
items array Required.

The radio items within the radios component.

See 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 radio container.
attributes object

HTML attributes (for example data attributes) to add to the radio input tag.
Options for formGroup
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 checkboxes component.

See beforeInputs.
afterInputs object

Content to add after all radio items within the checkboxes component.

See afterInputs.
Options for afterInputs
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 beforeInputs
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 hint
Name Type Description
text string Required.

If html is set, this is not required. Text to use within the hint. 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 the hint. If html is provided, the text option will be ignored.
id string

Optional ID attribute to add to the hint span tag.
classes string

Classes to add to the hint span tag.
attributes object

HTML attributes (for example data attributes) to add to the hint span tag.
Options for items
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.

Value for the radio input.
label object

Subset of options for the label used by each radio item within the radios component.

See label. See label.
hint object

Can be used to add a hint to each radio item within the radios component.

See 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 conditional.
disabled boolean

If true, radio will be disabled.
attributes object

HTML attributes (for example data attributes) to add to the radio input tag.
Options for conditional
Name Type Description
html string Required.

The HTML to reveal when the radio is checked.
Options for label
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 label
Name Type Description
text string Required.

If html is set, this is not required. Text to use within the 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 the label. If html is provided, the text option will be ignored.
for string

The value of the for attribute, the ID of the input the label is associated with.
isPageHeading boolean

Whether the label also acts as the heading for the page.
classes string

Classes to add to the label tag.
attributes object

HTML attributes (for example data attributes) to add to the label tag.

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

{{ modukRadios({
  name: "organisation-default",
  fieldset: {
    legend: {
      text: "Which organisation do you work for?",
      isPageHeading: true,
      classes: "govuk-fieldset__legend--l"
    }
  },
  items: [
    {
      value: "royal-navy",
      text: "Royal Navy"
    },
    {
      value: "british-army",
      text: "British Army"
    },
    {
      value: "royal-air-force",
      text: "Royal Air Force"
    },
    {
      value: "strategic-command",
      text: "Strategic Command"
    }
  ]
}) -}}

See GOV.UK radios component guidance for when not to use this component.

How it works

See GOV.UK radios component guidance for detail on how this component works.

If you’re asking one question on the page

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

Open this radios example in a new tab

Which organisation do you work for?

HTML 
<div class="govuk-form-group">
  <fieldset class="govuk-fieldset">
    <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
      <h1 class="govuk-fieldset__heading">
        Which organisation do you work for?
      </h1>
    </legend>
    <div class="govuk-radios" data-module="govuk-radios">
      <div class="govuk-radios__item">
        <input
          class="govuk-radios__input"
          id="organisation"
          name="organisation"
          type="radio"
          value="royal-navy"
        />
        <label class="govuk-label govuk-radios__label" for="organisation">
          Royal Navy
        </label>
      </div>
      <div class="govuk-radios__item">
        <input
          class="govuk-radios__input"
          id="organisation-2"
          name="organisation"
          type="radio"
          value="british-army"
        />
        <label class="govuk-label govuk-radios__label" for="organisation-2">
          British Army
        </label>
      </div>
      <div class="govuk-radios__item">
        <input
          class="govuk-radios__input"
          id="organisation-3"
          name="organisation"
          type="radio"
          value="royal-air-force"
        />
        <label class="govuk-label govuk-radios__label" for="organisation-3">
          Royal Air Force
        </label>
      </div>
      <div class="govuk-radios__item">
        <input
          class="govuk-radios__input"
          id="organisation-4"
          name="organisation"
          type="radio"
          value="strategic-command"
        />
        <label class="govuk-label govuk-radios__label" for="organisation-4">
          Strategic Command
        </label>
      </div>
    </div>
  </fieldset>
</div>
Nunjucks
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
fieldset object

The fieldset used by the radios component.

See fieldset.
hint object

Can be used to add a hint to the radios component.

See 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 error message.
formGroup object

Additional options for the form group containing the radios component.

See 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.

Name attribute for the radio items.
items array Required.

The radio items within the radios component.

See 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 radio container.
attributes object

HTML attributes (for example data attributes) to add to the radio input tag.
Options for formGroup
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 checkboxes component.

See beforeInputs.
afterInputs object

Content to add after all radio items within the checkboxes component.

See afterInputs.
Options for afterInputs
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 beforeInputs
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 hint
Name Type Description
text string Required.

If html is set, this is not required. Text to use within the hint. 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 the hint. If html is provided, the text option will be ignored.
id string

Optional ID attribute to add to the hint span tag.
classes string

Classes to add to the hint span tag.
attributes object

HTML attributes (for example data attributes) to add to the hint span tag.
Options for items
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.

Value for the radio input.
label object

Subset of options for the label used by each radio item within the radios component.

See label. See label.
hint object

Can be used to add a hint to each radio item within the radios component.

See 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 conditional.
disabled boolean

If true, radio will be disabled.
attributes object

HTML attributes (for example data attributes) to add to the radio input tag.
Options for conditional
Name Type Description
html string Required.

The HTML to reveal when the radio is checked.
Options for label
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 label
Name Type Description
text string Required.

If html is set, this is not required. Text to use within the 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 the label. If html is provided, the text option will be ignored.
for string

The value of the for attribute, the ID of the input the label is associated with.
isPageHeading boolean

Whether the label also acts as the heading for the page.
classes string

Classes to add to the label tag.
attributes object

HTML attributes (for example data attributes) to add to the label tag.

 
{% from "moduk/components/radios/macro.njk" import modukRadios %}

{{ modukRadios({
  name: "organisation",
  fieldset: {
    legend: {
      text: "Which organisation do you work for?",
      isPageHeading: true,
      classes: "govuk-fieldset__legend--l"
    }
  },
  items: [
    {
      value: "royal-navy",
      text: "Royal Navy"
    },
    {
      value: "british-army",
      text: "British Army"
    },
    {
      value: "royal-air-force",
      text: "Royal Air Force"
    },
    {
      value: "strategic-command",
      text: "Strategic Command"
    }
  ]
}) }}

If you’re asking more than one question on the page

If you’re asking more than one question on the page, do not set the contents of the <legend> as the page heading.

Open this radios example in a new tab
Which organisation do you work for?
HTML 
<div class="govuk-form-group">
  <fieldset class="govuk-fieldset">
    <legend class="govuk-fieldset__legend">
      Which organisation do you work for?
    </legend>
    <div class="govuk-radios" data-module="govuk-radios">
      <div class="govuk-radios__item">
        <input
          class="govuk-radios__input"
          id="organisation-not-as-page-heading"
          name="organisation-not-as-page-heading"
          type="radio"
          value="royal-navy"
        />
        <label
          class="govuk-label govuk-radios__label"
          for="organisation-not-as-page-heading"
        >
          Royal Navy
        </label>
      </div>
      <div class="govuk-radios__item">
        <input
          class="govuk-radios__input"
          id="organisation-not-as-page-heading-2"
          name="organisation-not-as-page-heading"
          type="radio"
          value="british-army"
        />
        <label
          class="govuk-label govuk-radios__label"
          for="organisation-not-as-page-heading-2"
        >
          British Army
        </label>
      </div>
      <div class="govuk-radios__item">
        <input
          class="govuk-radios__input"
          id="organisation-not-as-page-heading-3"
          name="organisation-not-as-page-heading"
          type="radio"
          value="royal-air-force"
        />
        <label
          class="govuk-label govuk-radios__label"
          for="organisation-not-as-page-heading-3"
        >
          Royal Air Force
        </label>
      </div>
      <div class="govuk-radios__item">
        <input
          class="govuk-radios__input"
          id="organisation-not-as-page-heading-4"
          name="organisation-not-as-page-heading"
          type="radio"
          value="strategic-command"
        />
        <label
          class="govuk-label govuk-radios__label"
          for="organisation-not-as-page-heading-4"
        >
          Strategic Command
        </label>
      </div>
    </div>
  </fieldset>
</div>
Nunjucks
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
fieldset object

The fieldset used by the radios component.

See fieldset.
hint object

Can be used to add a hint to the radios component.

See 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 error message.
formGroup object

Additional options for the form group containing the radios component.

See 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.

Name attribute for the radio items.
items array Required.

The radio items within the radios component.

See 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 radio container.
attributes object

HTML attributes (for example data attributes) to add to the radio input tag.
Options for formGroup
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 checkboxes component.

See beforeInputs.
afterInputs object

Content to add after all radio items within the checkboxes component.

See afterInputs.
Options for afterInputs
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 beforeInputs
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 hint
Name Type Description
text string Required.

If html is set, this is not required. Text to use within the hint. 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 the hint. If html is provided, the text option will be ignored.
id string

Optional ID attribute to add to the hint span tag.
classes string

Classes to add to the hint span tag.
attributes object

HTML attributes (for example data attributes) to add to the hint span tag.
Options for items
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.

Value for the radio input.
label object

Subset of options for the label used by each radio item within the radios component.

See label. See label.
hint object

Can be used to add a hint to each radio item within the radios component.

See 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 conditional.
disabled boolean

If true, radio will be disabled.
attributes object

HTML attributes (for example data attributes) to add to the radio input tag.
Options for conditional
Name Type Description
html string Required.

The HTML to reveal when the radio is checked.
Options for label
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 label
Name Type Description
text string Required.

If html is set, this is not required. Text to use within the 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 the label. If html is provided, the text option will be ignored.
for string

The value of the for attribute, the ID of the input the label is associated with.
isPageHeading boolean

Whether the label also acts as the heading for the page.
classes string

Classes to add to the label tag.
attributes object

HTML attributes (for example data attributes) to add to the label tag.

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

{{ modukRadios({
  name: "organisation-not-as-page-heading",
  fieldset: {
    legend: {
      text: "Which organisation do you work for?"
    }
  },
  items: [
    {
      value: "royal-navy",
      text: "Royal Navy"
    },
    {
      value: "british-army",
      text: "British Army"
    },
    {
      value: "royal-air-force",
      text: "Royal Air Force"
    },
    {
      value: "strategic-command",
      text: "Strategic Command"
    }
  ]
}) -}}

Inline radios

Open this radios example in a new tab

Have you changed your name?

This includes changing your last name or spelling your name differently.
HTML 
<div class="govuk-form-group">
  <fieldset class="govuk-fieldset" aria-describedby="changed-name-hint">
    <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
      <h1 class="govuk-fieldset__heading">Have you changed your name?</h1>
    </legend>
    <div id="changed-name-hint" class="govuk-hint">
      This includes changing your last name or spelling your name differently.
    </div>
    <div class="govuk-radios govuk-radios--inline" data-module="govuk-radios">
      <div class="govuk-radios__item">
        <input
          class="govuk-radios__input"
          id="changed-name"
          name="changed-name"
          type="radio"
          value="yes"
        />
        <label class="govuk-label govuk-radios__label" for="changed-name">
          Yes
        </label>
      </div>
      <div class="govuk-radios__item">
        <input
          class="govuk-radios__input"
          id="changed-name-2"
          name="changed-name"
          type="radio"
          value="no"
        />
        <label class="govuk-label govuk-radios__label" for="changed-name-2">
          No
        </label>
      </div>
    </div>
  </fieldset>
</div>
Nunjucks
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
fieldset object

The fieldset used by the radios component.

See fieldset.
hint object

Can be used to add a hint to the radios component.

See 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 error message.
formGroup object

Additional options for the form group containing the radios component.

See 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.

Name attribute for the radio items.
items array Required.

The radio items within the radios component.

See 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 radio container.
attributes object

HTML attributes (for example data attributes) to add to the radio input tag.
Options for formGroup
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 checkboxes component.

See beforeInputs.
afterInputs object

Content to add after all radio items within the checkboxes component.

See afterInputs.
Options for afterInputs
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 beforeInputs
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 hint
Name Type Description
text string Required.

If html is set, this is not required. Text to use within the hint. 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 the hint. If html is provided, the text option will be ignored.
id string

Optional ID attribute to add to the hint span tag.
classes string

Classes to add to the hint span tag.
attributes object

HTML attributes (for example data attributes) to add to the hint span tag.
Options for items
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.

Value for the radio input.
label object

Subset of options for the label used by each radio item within the radios component.

See label. See label.
hint object

Can be used to add a hint to each radio item within the radios component.

See 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 conditional.
disabled boolean

If true, radio will be disabled.
attributes object

HTML attributes (for example data attributes) to add to the radio input tag.
Options for conditional
Name Type Description
html string Required.

The HTML to reveal when the radio is checked.
Options for label
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 label
Name Type Description
text string Required.

If html is set, this is not required. Text to use within the 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 the label. If html is provided, the text option will be ignored.
for string

The value of the for attribute, the ID of the input the label is associated with.
isPageHeading boolean

Whether the label also acts as the heading for the page.
classes string

Classes to add to the label tag.
attributes object

HTML attributes (for example data attributes) to add to the label tag.

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

{{ modukRadios({
  classes: "govuk-radios--inline",
  name: "changed-name",
  fieldset: {
    legend: {
      text: "Have you changed your name?",
      isPageHeading: true,
      classes: "govuk-fieldset__legend--l"
    }
  },
  hint: {
    text: "This includes changing your last name or spelling your name differently."
  },
  items: [
    {
      value: "yes",
      text: "Yes"
    },
    {
      value: "no",
      text: "No"
    }
  ]
}) -}}

Radio items with hints

Open this radios example in a new tab

How do you want to sign in?

You need an account to use this service.
You’ll need a registered USB security key.
You’ll need access to your two-factor authentication device.
HTML 
<div class="govuk-form-group">
  <fieldset class="govuk-fieldset" aria-describedby="sign-in-with-hint-hint">
    <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
      <h1 class="govuk-fieldset__heading">How do you want to sign in?</h1>
    </legend>
    <div id="sign-in-with-hint-hint" class="govuk-hint">
      You need an account to use this service.
    </div>
    <div class="govuk-radios" data-module="govuk-radios">
      <div class="govuk-radios__item">
        <input
          class="govuk-radios__input"
          id="sign-in-with-hint"
          name="sign-in-with-hint"
          type="radio"
          value="biometric"
          aria-describedby="sign-in-with-hint-item-hint"
        />
        <label class="govuk-label govuk-radios__label" for="sign-in-with-hint">
          Sign in with a security key
        </label>
        <div
          id="sign-in-with-hint-item-hint"
          class="govuk-hint govuk-radios__hint"
        >
          You’ll need a registered USB security key.
        </div>
      </div>
      <div class="govuk-radios__item">
        <input
          class="govuk-radios__input"
          id="sign-in-with-hint-2"
          name="sign-in-with-hint"
          type="radio"
          value="userpass"
          aria-describedby="sign-in-with-hint-2-item-hint"
        />
        <label
          class="govuk-label govuk-radios__label"
          for="sign-in-with-hint-2"
        >
          Sign in with a username and password
        </label>
        <div
          id="sign-in-with-hint-2-item-hint"
          class="govuk-hint govuk-radios__hint"
        >
          You’ll need access to your two-factor authentication device.
        </div>
      </div>
    </div>
  </fieldset>
</div>
Nunjucks
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
fieldset object

The fieldset used by the radios component.

See fieldset.
hint object

Can be used to add a hint to the radios component.

See 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 error message.
formGroup object

Additional options for the form group containing the radios component.

See 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.

Name attribute for the radio items.
items array Required.

The radio items within the radios component.

See 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 radio container.
attributes object

HTML attributes (for example data attributes) to add to the radio input tag.
Options for formGroup
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 checkboxes component.

See beforeInputs.
afterInputs object

Content to add after all radio items within the checkboxes component.

See afterInputs.
Options for afterInputs
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 beforeInputs
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 hint
Name Type Description
text string Required.

If html is set, this is not required. Text to use within the hint. 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 the hint. If html is provided, the text option will be ignored.
id string

Optional ID attribute to add to the hint span tag.
classes string

Classes to add to the hint span tag.
attributes object

HTML attributes (for example data attributes) to add to the hint span tag.
Options for items
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.

Value for the radio input.
label object

Subset of options for the label used by each radio item within the radios component.

See label. See label.
hint object

Can be used to add a hint to each radio item within the radios component.

See 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 conditional.
disabled boolean

If true, radio will be disabled.
attributes object

HTML attributes (for example data attributes) to add to the radio input tag.
Options for conditional
Name Type Description
html string Required.

The HTML to reveal when the radio is checked.
Options for label
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 label
Name Type Description
text string Required.

If html is set, this is not required. Text to use within the 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 the label. If html is provided, the text option will be ignored.
for string

The value of the for attribute, the ID of the input the label is associated with.
isPageHeading boolean

Whether the label also acts as the heading for the page.
classes string

Classes to add to the label tag.
attributes object

HTML attributes (for example data attributes) to add to the label tag.

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

{{ modukRadios({
  name: "sign-in-with-hint",
  fieldset: {
    legend: {
      text: "How do you want to sign in?",
      isPageHeading: true,
      classes: "govuk-fieldset__legend--l"
    }
  },
  hint: {
    text: "You need an account to use this service."
  },
  items: [
    {
      value: "biometric",
      text: "Sign in with a security key",
      hint: {
        text: "You’ll need a registered USB security key."
      }
    },
    {
      value: "userpass",
      text: "Sign in with a username and password",
      hint: {
        text: "You’ll need access to your two-factor authentication device."
      }
    }
  ]
}) -}}

Radio items with a text divider

Open this radios example in a new tab

How do you want to sign in?

or
HTML 
<div class="govuk-form-group">
  <fieldset class="govuk-fieldset">
    <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
      <h1 class="govuk-fieldset__heading">How do you want to sign in?</h1>
    </legend>
    <div class="govuk-radios" data-module="govuk-radios">
      <div class="govuk-radios__item">
        <input
          class="govuk-radios__input"
          id="with-divider-option"
          name="with-divider-option"
          type="radio"
          value="biometric"
        />
        <label
          class="govuk-label govuk-radios__label"
          for="with-divider-option"
        >
          Sign in with a security key
        </label>
      </div>
      <div class="govuk-radios__item">
        <input
          class="govuk-radios__input"
          id="with-divider-option-2"
          name="with-divider-option"
          type="radio"
          value="userpass"
        />
        <label
          class="govuk-label govuk-radios__label"
          for="with-divider-option-2"
        >
          Sign in with a username and password
        </label>
      </div>
      <div class="govuk-radios__divider">or</div>
      <div class="govuk-radios__item">
        <input
          class="govuk-radios__input"
          id="with-divider-option-4"
          name="with-divider-option"
          type="radio"
          value="register"
        />
        <label
          class="govuk-label govuk-radios__label"
          for="with-divider-option-4"
        >
          Register for a new account
        </label>
      </div>
    </div>
  </fieldset>
</div>
Nunjucks
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
fieldset object

The fieldset used by the radios component.

See fieldset.
hint object

Can be used to add a hint to the radios component.

See 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 error message.
formGroup object

Additional options for the form group containing the radios component.

See 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.

Name attribute for the radio items.
items array Required.

The radio items within the radios component.

See 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 radio container.
attributes object

HTML attributes (for example data attributes) to add to the radio input tag.
Options for formGroup
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 checkboxes component.

See beforeInputs.
afterInputs object

Content to add after all radio items within the checkboxes component.

See afterInputs.
Options for afterInputs
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 beforeInputs
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 hint
Name Type Description
text string Required.

If html is set, this is not required. Text to use within the hint. 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 the hint. If html is provided, the text option will be ignored.
id string

Optional ID attribute to add to the hint span tag.
classes string

Classes to add to the hint span tag.
attributes object

HTML attributes (for example data attributes) to add to the hint span tag.
Options for items
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.

Value for the radio input.
label object

Subset of options for the label used by each radio item within the radios component.

See label. See label.
hint object

Can be used to add a hint to each radio item within the radios component.

See 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 conditional.
disabled boolean

If true, radio will be disabled.
attributes object

HTML attributes (for example data attributes) to add to the radio input tag.
Options for conditional
Name Type Description
html string Required.

The HTML to reveal when the radio is checked.
Options for label
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 label
Name Type Description
text string Required.

If html is set, this is not required. Text to use within the 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 the label. If html is provided, the text option will be ignored.
for string

The value of the for attribute, the ID of the input the label is associated with.
isPageHeading boolean

Whether the label also acts as the heading for the page.
classes string

Classes to add to the label tag.
attributes object

HTML attributes (for example data attributes) to add to the label tag.

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

{{ modukRadios({
  name: "with-divider-option",
  fieldset: {
    legend: {
      text: "How do you want to sign in?",
      isPageHeading: true,
      classes: "govuk-fieldset__legend--l"
    }
  },
  items: [
    {
      value: "biometric",
      text: "Sign in with a security key"
    },
    {
      value: "userpass",
      text: "Sign in with a username and password"
    },
    {
      divider: "or"
    },
    {
      value: "register",
      text: "Register for a new account"
    }
  ]
}) -}}
Open this radios example in a new tab

How would you like to be contacted?

Select one option.
HTML 
<div class="govuk-form-group">
  <fieldset class="govuk-fieldset" aria-describedby="contact-hint">
    <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
      <h1 class="govuk-fieldset__heading">
        How would you like to be contacted?
      </h1>
    </legend>
    <div id="contact-hint" class="govuk-hint">Select one option.</div>
    <div class="govuk-radios" data-module="govuk-radios">
      <div class="govuk-radios__item">
        <input
          class="govuk-radios__input"
          id="contact"
          name="contact"
          type="radio"
          value="email"
          checked
          data-aria-controls="conditional-contact"
        />
        <label class="govuk-label govuk-radios__label" for="contact">
          Email
        </label>
      </div>
      <div class="govuk-radios__conditional" id="conditional-contact">
        <div class="govuk-form-group">
          <label class="govuk-label" for="contact-by-email">
            Email address
          </label>
          <input
            class="govuk-input govuk-!-width-one-third"
            id="contact-by-email"
            name="contact-by-email"
            type="email"
            spellcheck="false"
            autocomplete="email"
          />
        </div>
      </div>
      <div class="govuk-radios__item">
        <input
          class="govuk-radios__input"
          id="contact-2"
          name="contact"
          type="radio"
          value="phone"
          data-aria-controls="conditional-contact-2"
        />
        <label class="govuk-label govuk-radios__label" for="contact-2">
          Phone
        </label>
      </div>
      <div
        class="govuk-radios__conditional govuk-radios__conditional--hidden"
        id="conditional-contact-2"
      >
        <div class="govuk-form-group">
          <label class="govuk-label" for="contact-by-phone">
            Phone number
          </label>
          <input
            class="govuk-input govuk-!-width-one-third"
            id="contact-by-phone"
            name="contact-by-phone"
            type="tel"
            autocomplete="tel"
          />
        </div>
      </div>
      <div class="govuk-radios__item">
        <input
          class="govuk-radios__input"
          id="contact-3"
          name="contact"
          type="radio"
          value="text message"
          data-aria-controls="conditional-contact-3"
        />
        <label class="govuk-label govuk-radios__label" for="contact-3">
          Text message
        </label>
      </div>
      <div
        class="govuk-radios__conditional govuk-radios__conditional--hidden"
        id="conditional-contact-3"
      >
        <div class="govuk-form-group">
          <label class="govuk-label" for="contact-by-text">
            Mobile phone number
          </label>
          <input
            class="govuk-input govuk-!-width-one-third"
            id="contact-by-text"
            name="contact-by-text"
            type="tel"
            autocomplete="tel"
          />
        </div>
      </div>
    </div>
  </fieldset>
</div>
Nunjucks
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
fieldset object

The fieldset used by the radios component.

See fieldset.
hint object

Can be used to add a hint to the radios component.

See 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 error message.
formGroup object

Additional options for the form group containing the radios component.

See 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.

Name attribute for the radio items.
items array Required.

The radio items within the radios component.

See 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 radio container.
attributes object

HTML attributes (for example data attributes) to add to the radio input tag.
Options for formGroup
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 checkboxes component.

See beforeInputs.
afterInputs object

Content to add after all radio items within the checkboxes component.

See afterInputs.
Options for afterInputs
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 beforeInputs
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 hint
Name Type Description
text string Required.

If html is set, this is not required. Text to use within the hint. 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 the hint. If html is provided, the text option will be ignored.
id string

Optional ID attribute to add to the hint span tag.
classes string

Classes to add to the hint span tag.
attributes object

HTML attributes (for example data attributes) to add to the hint span tag.
Options for items
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.

Value for the radio input.
label object

Subset of options for the label used by each radio item within the radios component.

See label. See label.
hint object

Can be used to add a hint to each radio item within the radios component.

See 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 conditional.
disabled boolean

If true, radio will be disabled.
attributes object

HTML attributes (for example data attributes) to add to the radio input tag.
Options for conditional
Name Type Description
html string Required.

The HTML to reveal when the radio is checked.
Options for label
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 label
Name Type Description
text string Required.

If html is set, this is not required. Text to use within the 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 the label. If html is provided, the text option will be ignored.
for string

The value of the for attribute, the ID of the input the label is associated with.
isPageHeading boolean

Whether the label also acts as the heading for the page.
classes string

Classes to add to the label tag.
attributes object

HTML attributes (for example data attributes) to add to the label tag.

 
{% from "moduk/components/radios/macro.njk" import modukRadios -%}
{% from "moduk/components/input/macro.njk" import modukInput -%}

{% set emailHtml %}
{{- modukInput({
  id: "contact-by-email",
  name: "contact-by-email",
  type: "email",
  autocomplete: "email",
  spellcheck: false,
  classes: "govuk-!-width-one-third",
  label: {
    text: "Email address"
  }
}) -}}
{% endset -%}

{% set phoneHtml %}
{{- modukInput({
  id: "contact-by-phone",
  name: "contact-by-phone",
  type: "tel",
  autocomplete: "tel",
  classes: "govuk-!-width-one-third",
  label: {
    text: "Phone number"
  }
}) -}}
{% endset -%}

{% set textHtml %}
{{- modukInput({
  id: "contact-by-text",
  name: "contact-by-text",
  type: "tel",
  autocomplete: "tel",
  classes: "govuk-!-width-one-third",
  label: {
    text: "Mobile phone number"
  }
}) -}}
{% endset -%}

{{ modukRadios({
  name: "contact",
  fieldset: {
    legend: {
      text: "How would you like to be contacted?",
      isPageHeading: true,
      classes: "govuk-fieldset__legend--l"
    }
  },
  hint: {
    text: "Select one option."
  },
  items: [
    {
      value: "email",
      text: "Email",
      checked: true,
      conditional: {
        html: emailHtml
      }
    },
    {
      value: "phone",
      text: "Phone",
      conditional: {
        html: phoneHtml
      }
    },
    {
      value: "text message",
      text: "Text message",
      conditional: {
        html: textHtml
      }
    }
  ]
}) -}}

Smaller radios

Open this radios example in a new tab

Organisation

HTML 
<div class="govuk-form-group">
  <fieldset class="govuk-fieldset">
    <legend class="govuk-fieldset__legend govuk-fieldset__legend--m">
      <h1 class="govuk-fieldset__heading">Organisation</h1>
    </legend>
    <div class="govuk-radios govuk-radios--small" data-module="govuk-radios">
      <div class="govuk-radios__item">
        <input
          class="govuk-radios__input"
          id="organisation-small"
          name="organisation-small"
          type="radio"
          value="royal-navy"
        />
        <label class="govuk-label govuk-radios__label" for="organisation-small">
          Royal Navy
        </label>
      </div>
      <div class="govuk-radios__item">
        <input
          class="govuk-radios__input"
          id="organisation-small-2"
          name="organisation-small"
          type="radio"
          value="british-army"
        />
        <label
          class="govuk-label govuk-radios__label"
          for="organisation-small-2"
        >
          British Army
        </label>
      </div>
      <div class="govuk-radios__item">
        <input
          class="govuk-radios__input"
          id="organisation-small-3"
          name="organisation-small"
          type="radio"
          value="royal-air-force"
        />
        <label
          class="govuk-label govuk-radios__label"
          for="organisation-small-3"
        >
          Royal Air Force
        </label>
      </div>
      <div class="govuk-radios__item">
        <input
          class="govuk-radios__input"
          id="organisation-small-4"
          name="organisation-small"
          type="radio"
          value="strategic-command"
        />
        <label
          class="govuk-label govuk-radios__label"
          for="organisation-small-4"
        >
          Strategic Command
        </label>
      </div>
    </div>
  </fieldset>
</div>
Nunjucks
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
fieldset object

The fieldset used by the radios component.

See fieldset.
hint object

Can be used to add a hint to the radios component.

See 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 error message.
formGroup object

Additional options for the form group containing the radios component.

See 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.

Name attribute for the radio items.
items array Required.

The radio items within the radios component.

See 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 radio container.
attributes object

HTML attributes (for example data attributes) to add to the radio input tag.
Options for formGroup
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 checkboxes component.

See beforeInputs.
afterInputs object

Content to add after all radio items within the checkboxes component.

See afterInputs.
Options for afterInputs
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 beforeInputs
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 hint
Name Type Description
text string Required.

If html is set, this is not required. Text to use within the hint. 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 the hint. If html is provided, the text option will be ignored.
id string

Optional ID attribute to add to the hint span tag.
classes string

Classes to add to the hint span tag.
attributes object

HTML attributes (for example data attributes) to add to the hint span tag.
Options for items
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.

Value for the radio input.
label object

Subset of options for the label used by each radio item within the radios component.

See label. See label.
hint object

Can be used to add a hint to each radio item within the radios component.

See 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 conditional.
disabled boolean

If true, radio will be disabled.
attributes object

HTML attributes (for example data attributes) to add to the radio input tag.
Options for conditional
Name Type Description
html string Required.

The HTML to reveal when the radio is checked.
Options for label
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 label
Name Type Description
text string Required.

If html is set, this is not required. Text to use within the 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 the label. If html is provided, the text option will be ignored.
for string

The value of the for attribute, the ID of the input the label is associated with.
isPageHeading boolean

Whether the label also acts as the heading for the page.
classes string

Classes to add to the label tag.
attributes object

HTML attributes (for example data attributes) to add to the label tag.

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

{{ modukRadios({
  name: "organisation-small",
  classes: "govuk-radios--small",
  fieldset: {
    legend: {
      text: "Organisation",
      isPageHeading: true,
      classes: "govuk-fieldset__legend--m"
    }
  },
  items: [
    {
      value: "royal-navy",
      text: "Royal Navy"
    },
    {
      value: "british-army",
      text: "British Army"
    },
    {
      value: "royal-air-force",
      text: "Royal Air Force"
    },
    {
      value: "strategic-command",
      text: "Strategic Command"
    }
  ]
}) -}}

Error messages

Open this radios example in a new tab

Which organisation do you work for?

Error: Select an organisation

HTML 
<div class="govuk-form-group govuk-form-group--error">
  <fieldset
    class="govuk-fieldset"
    aria-describedby="organisation-with-error-error"
  >
    <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
      <h1 class="govuk-fieldset__heading">
        Which organisation do you work for?
      </h1>
    </legend>
    <p id="organisation-with-error-error" class="govuk-error-message">
      <span class="govuk-visually-hidden">Error:</span> Select an organisation
    </p>
    <div class="govuk-radios" data-module="govuk-radios">
      <div class="govuk-radios__item">
        <input
          class="govuk-radios__input"
          id="organisation-with-error"
          name="organisation-with-error"
          type="radio"
          value="royal-navy"
        />
        <label
          class="govuk-label govuk-radios__label"
          for="organisation-with-error"
        >
          Royal Navy
        </label>
      </div>
      <div class="govuk-radios__item">
        <input
          class="govuk-radios__input"
          id="organisation-with-error-2"
          name="organisation-with-error"
          type="radio"
          value="british-army"
        />
        <label
          class="govuk-label govuk-radios__label"
          for="organisation-with-error-2"
        >
          British Army
        </label>
      </div>
      <div class="govuk-radios__item">
        <input
          class="govuk-radios__input"
          id="organisation-with-error-3"
          name="organisation-with-error"
          type="radio"
          value="royal-air-force"
        />
        <label
          class="govuk-label govuk-radios__label"
          for="organisation-with-error-3"
        >
          Royal Air Force
        </label>
      </div>
      <div class="govuk-radios__item">
        <input
          class="govuk-radios__input"
          id="organisation-with-error-4"
          name="organisation-with-error"
          type="radio"
          value="strategic-command"
        />
        <label
          class="govuk-label govuk-radios__label"
          for="organisation-with-error-4"
        >
          Strategic Command
        </label>
      </div>
    </div>
  </fieldset>
</div>
Nunjucks
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
fieldset object

The fieldset used by the radios component.

See fieldset.
hint object

Can be used to add a hint to the radios component.

See 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 error message.
formGroup object

Additional options for the form group containing the radios component.

See 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.

Name attribute for the radio items.
items array Required.

The radio items within the radios component.

See 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 radio container.
attributes object

HTML attributes (for example data attributes) to add to the radio input tag.
Options for formGroup
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 checkboxes component.

See beforeInputs.
afterInputs object

Content to add after all radio items within the checkboxes component.

See afterInputs.
Options for afterInputs
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 beforeInputs
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 hint
Name Type Description
text string Required.

If html is set, this is not required. Text to use within the hint. 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 the hint. If html is provided, the text option will be ignored.
id string

Optional ID attribute to add to the hint span tag.
classes string

Classes to add to the hint span tag.
attributes object

HTML attributes (for example data attributes) to add to the hint span tag.
Options for items
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.

Value for the radio input.
label object

Subset of options for the label used by each radio item within the radios component.

See label. See label.
hint object

Can be used to add a hint to each radio item within the radios component.

See 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 conditional.
disabled boolean

If true, radio will be disabled.
attributes object

HTML attributes (for example data attributes) to add to the radio input tag.
Options for conditional
Name Type Description
html string Required.

The HTML to reveal when the radio is checked.
Options for label
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 label
Name Type Description
text string Required.

If html is set, this is not required. Text to use within the 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 the label. If html is provided, the text option will be ignored.
for string

The value of the for attribute, the ID of the input the label is associated with.
isPageHeading boolean

Whether the label also acts as the heading for the page.
classes string

Classes to add to the label tag.
attributes object

HTML attributes (for example data attributes) to add to the label tag.

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

{{ modukRadios({
  name: "organisation-with-error",
  fieldset: {
    legend: {
      text: "Which organisation do you work for?",
      isPageHeading: true,
      classes: "govuk-fieldset__legend--l"
    }
  },
  errorMessage: {
    text: "Select an organisation"
  },
  items: [
    {
      value: "royal-navy",
      text: "Royal Navy"
    },
    {
      value: "british-army",
      text: "British Army"
    },
    {
      value: "royal-air-force",
      text: "Royal Air Force"
    },
    {
      value: "strategic-command",
      text: "Strategic Command"
    }
  ]
}) -}}

Changes from the GOV.UK version

MOD.UK Design System components are closely based on GOV.UK Design System components.

For this component we’ve changed the font.

Have you tested this component?

Let us know how we could improve this component or share your user research findings.

Email the MOD.UK Design System team at design-system@digital.mod.uk

Need help?

Email the MOD.UK Design System team at design-system@digital.mod.uk if you have questions or feedback.