Form elements - Radios

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

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

  <fieldset class="hs2-fieldset">
    <legend class="hs2-fieldset__legend hs2-fieldset__legend--l">
      <h1 class="hs2-fieldset__heading">
        Are you 18 or over?
      </h1>
    </legend>

    <div class="hs2-radios">

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

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

    </div>
  </fieldset>

</div>
Close default radios code
Nunjucks macro options

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

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

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

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

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

When to use radios

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

When not to use radios

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

How to use radios

Order radio options alphabetically by default.

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

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

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

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

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

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

Inline radios

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

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

  <fieldset class="hs2-fieldset">
    <legend class="hs2-fieldset__legend hs2-fieldset__legend--l">
      <h1 class="hs2-fieldset__heading">
        Are you 18 or over?
      </h1>
    </legend>

    <div class="hs2-radios hs2-radios--inline">

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

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

    </div>
  </fieldset>

</div>
Close inline radios code
Nunjucks macro options

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

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

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

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

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

Radios with hints

Open this with hints radios example in new window
Copy with hints radios code 
<fieldset class="hs2-fieldset">
  <legend class="hs2-fieldset__legend hs2-fieldset__legend--l">
    <h1 class="hs2-fieldset__heading">
      Do you know your incident number?
    </h1>
  </legend>

  <div class="hs2-hint hs2-u-margin-bottom-2">
    This is a 10 digit number, like 485 777 3456.
  </div>

  <div class="hs2-hint">
    You can find it in the email that HS2 has sent you when you reported the incident.
  </div>

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

    <div class="hs2-radios">

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

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

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

    </div>
  </div>

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

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

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

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

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

{% call fieldset({
  legend: {
    "text": "Do you know your incident number?",
    "classes": "hs2-fieldset__legend--l",
    "isPageHeading": true
  }
  }) %}
  {{ hint({
    "text": "This is a 10 digit number, like 485 777 3456.",
    "classes": "hs2-u-margin-bottom-2"
  }) }}
  {{ hint({
    "text": "You can find it in the email that HS2 has sent you when you reported the incident."
  }) }}
  {{ radios({
    "idPrefix": "example-hints",
    "name": "example-hints",
    "items": [
  {
    "value": "yes",
    "text": "Yes, I know my incident number"
  },
  {
    "value": "no",
    "text": "No, I do not know my incident number"
  },
  {
    "value": "not sure",
    "text": "I'm not sure"
  }
]
}) }}
{% endcall %}
Close with hints radios code

Radio items with hints

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

Open this with hints options radios example in new window
Copy with hints options radios code 
<div class="hs2-form-group">

  <fieldset class="hs2-fieldset">
    <legend class="hs2-fieldset__legend hs2-fieldset__legend--l">
      <h1 class="hs2-fieldset__heading">
        How do you want to sign in?
      </h1>
    </legend>

    <div class="hs2-radios">

      <div class="hs2-radios__item">
        <input class="hs2-radios__input" id="example-hints-1" name="example-hints" type="radio" value="gateway" aria-describedby="example-hints-1-item-hint">
        <label class="hs2-label hs2-radios__label" for="example-hints-1">
          Sign in with HS2 login
        </label>
        <div class="hs2-hint hs2-radios__hint" id="example-hints-1-item-hint">
          You&#39;ll have a user ID if you&#39;ve registered for the HS2 App.
        </div>
      </div>

      <div class="hs2-radios__item">
        <input class="hs2-radios__input" id="example-hints-2" name="example-hints" type="radio" value="verify" aria-describedby="example-hints-2-item-hint">
        <label class="hs2-label hs2-radios__label" for="example-hints-2">
          Sign in with GOV.UK Verify
        </label>
        <div class="hs2-hint hs2-radios__hint" id="example-hints-2-item-hint">
          You&#39;ll have an account if you&#39;ve already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity.
        </div>
      </div>

    </div>
  </fieldset>

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

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

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

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

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

{{ radios({
  "idPrefix": "example-hints",
  "name": "example-hints",
  "fieldset": {
    "legend": {
      "text": "How do you want to sign in?",
      "classes": "hs2-fieldset__legend--l",
      "isPageHeading": true
    }
  },
  "items": [
    {
      "value": "gateway",
      "text": "Sign in with HS2 login",
      "hint": {
        "text": "You'll have a user ID if you've registered for the HS2 App."
      }
    },
    {
      "value": "verify",
      "text": "Sign in with GOV.UK Verify",
      "hint": {
        "text": "You'll have an account if you've already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity."
      }
    }
  ]
}) }}
Close with hints options radios code

Radio items with a text divider

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

Open this items with a text divider radios example in new window
Copy items with a text divider radios code 
<div class="hs2-form-group">

  <fieldset class="hs2-fieldset">
    <legend class="hs2-fieldset__legend hs2-fieldset__legend--l">
      <h1 class="hs2-fieldset__heading">
        How do you want to sign in?
      </h1>
    </legend>

    <div class="hs2-radios">

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

      <div class="hs2-radios__item">
        <input class="hs2-radios__input" id="example-divider-2" name="example-divider" type="radio" value="government-verify">
        <label class="hs2-label hs2-radios__label" for="example-divider-2">
          Use GOV.UK Verify
        </label>
      </div>

      <div class="hs2-radios__divider">or</div>

      <div class="hs2-radios__item">
        <input class="hs2-radios__input" id="example-divider-4" name="example-divider" type="radio" value="create-account">
        <label class="hs2-label hs2-radios__label" for="example-divider-4">
          Create an account
        </label>
      </div>

    </div>
  </fieldset>

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

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

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

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

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

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

Conditionally revealing content

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

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

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

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

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

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

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

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

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

      </div>

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

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

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

      </div>

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

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

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

      </div>

    </div>
  </fieldset>

</div>
Close conditional radios code
Nunjucks macro options

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

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

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

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

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

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

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

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

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

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

Error messages

Style error messages like this:

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

  <fieldset class="hs2-fieldset" aria-describedby="example-error-hint example-error-error">
    <legend class="hs2-fieldset__legend hs2-fieldset__legend--l">
      <h1 class="hs2-fieldset__heading">
        Have you changed your name?
      </h1>
    </legend>

    <div class="hs2-hint" id="example-error-hint">
      This includes changing your last name or spelling your name differently.
    </div>

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

    <div class="hs2-radios">

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

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

    </div>
  </fieldset>

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

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

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

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

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

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

Follow: