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="hse-form-group">

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

    <div class="hse-radios">

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

      <div class="hse-radios__item">
        <input class="hse-radios__input" id="example-2" name="example" type="radio" value="no">
        <label class="hse-label hse-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": "hse-fieldset__legend--l",
      "isPageHeading": true
    }
  },
  "items": [
    {
      "value": "yes",
      "text": "Yes"
    },
    {
      "value": "no",
      "text": "No"
    }
  ]
}) }}
Close default radios code

When to use radios

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

When not to use radios

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

How to use radios

When you're drafting your radio options, beware of asking a user to choose between 2 options. Try testing a third option.

Order radio options alphabetically.

Group radios together in a <fieldset> with a <legend> that describes them. This is usually a question like; "Are you 18 or over?".

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

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

Inline radios

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

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

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

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

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

      <div class="hse-radios__item">
        <input class="hse-radios__input" id="example-inline-2" name="example-inline" type="radio" value="no">
        <label class="hse-label hse-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": "hse-radios--inline",
  "fieldset": {
    "legend": {
      "text": "Are you 18 or over?",
      "classes": "hse-fieldset__legend--l",
      "isPageHeading": true
    }
  },
  "items": [
    {
      "value": "yes",
      "text": "Yes"
    },
    {
      "value": "no",
      "text": "No"
    }
  ]
}) }}
Close inline radios code

Radios with hints

Use hint text to give users help in context.

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

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

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

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

    <div class="hse-radios">

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

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

      <div class="hse-radios__item">
        <input class="hse-radios__input" id="example-hints-3" name="example-hints" type="radio" value="not sure">
        <label class="hse-label hse-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 HSE number?",
    "classes": "hse-fieldset__legend--l",
    "isPageHeading": true
  }
  }) %}
  {{ hint({
    "text": "This is a 10 digit number, like 485 777 3456.",
    "classes": "hse-u-margin-bottom-2"
  }) }}
  {{ hint({
    "text": "You can find it on any letter the HSE has sent you, on a prescription or by logging in to a GP practice online service."
  }) }}
  {{ radios({
    "idPrefix": "example-hints",
    "name": "example-hints",
    "items": [
  {
    "value": "yes",
    "text": "Yes, I know my HSE number"
  },
  {
    "value": "no",
    "text": "No, I do not know my HSE 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="hse-form-group">

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

    <div class="hse-radios">

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

      <div class="hse-radios__item">
        <input class="hse-radios__input" id="example-hints-2" name="example-hints" type="radio" value="verify" aria-describedby="example-hints-2-item-hint">
        <label class="hse-label hse-radios__label" for="example-hints-2">
          Sign in with GOV.UK Verify
        </label>
        <span class="hse-hint hse-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.
        </span>
      </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": "hse-fieldset__legend--l",
      "isPageHeading": true
    }
  },
  "items": [
    {
      "value": "gateway",
      "text": "Sign in with HSE login",
      "hint": {
        "text": "You'll have a user ID if you've registered for the HSE 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="hse-form-group">

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

    <div class="hse-radios">

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

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

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

      <div class="hse-radios__item">
        <input class="hse-radios__input" id="example-divider-4" name="example-divider" type="radio" value="create-account">
        <label class="hse-label hse-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": "hse-fieldset__legend--l",
      "isPageHeading": true
    }
  },
  "items": [
    {
      "value": "hse-login",
      "text": "Use HSE 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="hse-form-group">

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

    <span class="hse-hint" id="contact-hint">
      Select one option
    </span>

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

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

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

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

      </div>

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

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

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

      </div>

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

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

        <div class="hse-form-group">
          <label class="hse-label" for="mobile">
            Mobile phone number
          </label>
          <input class="hse-input hse-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: "hse-u-width-two-thirds",
    label: {
      text: "Email address"
    }
  }) }}
{% endset -%}

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

{% set mobileHtml %}
  {{ input({
    id: "mobile",
    name: "mobile",
    classes: "hse-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": "hse-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:

How to style error messages.

Updated: September 2023