Skip to main content

Radios

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

Open in new window
Copy
<div class="nhsuk-form-group">

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

    <div class="nhsuk-radios">
      <div class="nhsuk-radios__item">
        <input class="nhsuk-radios__input" id="example-1" name="example" type="radio" value="yes">
        <label class="nhsuk-label nhsuk-radios__label" for="example-1">
          Yes
        </label>
      </div>
      <div class="nhsuk-radios__item">
        <input class="nhsuk-radios__input" id="example-2" name="example" type="radio" value="no">
        <label class="nhsuk-label nhsuk-radios__label" for="example-2">
          No
        </label>
      </div>
    </div>
  </fieldset>

</div>
Copy
{% from 'radios/macro.njk' import radios %}

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

When to use radios

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

When not to use radios

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

How to use radios

When you're drafting your checkbox options, beware binary choices. Try testing a 3rd option.

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?".

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

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 in new window
Copy
<div class="nhsuk-form-group">

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

    <div class="nhsuk-radios nhsuk-radios--inline">
      <div class="nhsuk-radios__item">
        <input class="nhsuk-radios__input" id="example-inline-1" name="example-inline" type="radio" value="yes">
        <label class="nhsuk-label nhsuk-radios__label" for="example-inline-1">
          Yes
        </label>
      </div>
      <div class="nhsuk-radios__item">
        <input class="nhsuk-radios__input" id="example-inline-2" name="example-inline" type="radio" value="no">
        <label class="nhsuk-label nhsuk-radios__label" for="example-inline-2">
          No
        </label>
      </div>
    </div>
  </fieldset>

</div>
Copy
{% from 'radios/macro.njk' import radios %}

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

Radios with hints

Use hint text to give users help in context.

Open in new window
Copy
<fieldset class="nhsuk-fieldset">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--l">
    <h1 class="nhsuk-fieldset__heading">
      Do you know your NHS number?
    </h1>
  </legend>

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

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

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

    <div class="nhsuk-radios">
      <div class="nhsuk-radios__item">
        <input class="nhsuk-radios__input" id="example-hints-1" name="example-hints" type="radio" value="yes">
        <label class="nhsuk-label nhsuk-radios__label" for="example-hints-1">
          Yes, I know my NHS number
        </label>
      </div>
      <div class="nhsuk-radios__item">
        <input class="nhsuk-radios__input" id="example-hints-2" name="example-hints" type="radio" value="no">
        <label class="nhsuk-label nhsuk-radios__label" for="example-hints-2">
          No, I do not know my NHS number
        </label>
      </div>
      <div class="nhsuk-radios__item">
        <input class="nhsuk-radios__input" id="example-hints-3" name="example-hints" type="radio" value="not sure">
        <label class="nhsuk-label nhsuk-radios__label" for="example-hints-3">
          I&#39;m not sure
        </label>
      </div>
    </div>
  </div>

</fieldset>
Copy
{% 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 NHS number?",
    "classes": "nhsuk-fieldset__legend--l",
    "isPageHeading": true
  }
  }) %}
  {{ hint({
    "text": "This is a 10 digit number, like 485 777 3456.",
    "classes": "nhsuk-u-margin-bottom-2"
  }) }}
  {{ hint({
    "text": "You can find it on any letter the NHS 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 NHS number"
  },
  {
    "value": "no",
    "text": "No, I do not know my NHS number"
  },
  {
    "value": "not sure",
    "text": "I'm not sure"
  }
]
}) }}
{% endcall %}

Radio items with hints

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

Open in new window
Copy
<div class="nhsuk-form-group">

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

    <div class="nhsuk-radios">
      <div class="nhsuk-radios__item">
        <input class="nhsuk-radios__input" id="example-hints-1" name="example-hints" type="radio" value="gateway" aria-describedby="example-hints-1-item-hint">
        <label class="nhsuk-label nhsuk-radios__label" for="example-hints-1">
          Sign in with NHS login
        </label>
        <span class="nhsuk-hint nhsuk-radios__hint" id="example-hints-1-item-hint">
          You&#39;ll have a user ID if you&#39;ve registered for the NHS App.
        </span>
      </div>
      <div class="nhsuk-radios__item">
        <input class="nhsuk-radios__input" id="example-hints-2" name="example-hints" type="radio" value="verify" aria-describedby="example-hints-2-item-hint">
        <label class="nhsuk-label nhsuk-radios__label" for="example-hints-2">
          Sign in with GOV.UK Verify
        </label>
        <span class="nhsuk-hint nhsuk-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>
Copy
{% from 'radios/macro.njk' import radios %}

{{ radios({
  "idPrefix": "example-hints",
  "name": "example-hints",
  "fieldset": {
    "legend": {
      "text": "How do you want to sign in?",
      "classes": "nhsuk-fieldset__legend--l",
      "isPageHeading": true
    }
  },
  "items": [
    {
      "value": "gateway",
      "text": "Sign in with NHS login",
      "hint": {
        "text": "You'll have a user ID if you've registered for the NHS 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."
      }
    }
  ]
}) }}

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 in new window
Copy
<div class="nhsuk-form-group">

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

    <div class="nhsuk-radios">
      <div class="nhsuk-radios__item">
        <input class="nhsuk-radios__input" id="example-divider-1" name="example-divider" type="radio" value="nhsuk-login">
        <label class="nhsuk-label nhsuk-radios__label" for="example-divider-1">
          Use NHS login
        </label>
      </div>
      <div class="nhsuk-radios__item">
        <input class="nhsuk-radios__input" id="example-divider-2" name="example-divider" type="radio" value="government-verify">
        <label class="nhsuk-label nhsuk-radios__label" for="example-divider-2">
          Use GOV.UK Verify
        </label>
      </div>
      <div class="nhsuk-radios__divider">or</div>
      <div class="nhsuk-radios__item">
        <input class="nhsuk-radios__input" id="example-divider-4" name="example-divider" type="radio" value="create-account">
        <label class="nhsuk-label nhsuk-radios__label" for="example-divider-4">
          Create an account
        </label>
      </div>
    </div>
  </fieldset>

</div>
Copy
{% from 'radios/macro.njk' import radios %}

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

Error messages

Style error messages like this:

Open in new window
Copy
<div class="nhsuk-form-group nhsuk-form-group--error">

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

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

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

    <div class="nhsuk-radios">
      <div class="nhsuk-radios__item">
        <input class="nhsuk-radios__input" id="example-error-1" name="example-error" type="radio" value="yes">
        <label class="nhsuk-label nhsuk-radios__label" for="example-error-1">
          Yes
        </label>
      </div>
      <div class="nhsuk-radios__item">
        <input class="nhsuk-radios__input" id="example-error-2" name="example-error" type="radio" value="no">
        <label class="nhsuk-label nhsuk-radios__label" for="example-error-2">
          No
        </label>
      </div>
    </div>
  </fieldset>

</div>
Copy
{% from 'radios/macro.njk' import radios %}

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

Follow:

Discuss

Discuss radios on GitHub

Get in touch

If you have a question:

Updated: November 2019