Skip to main content
Design system

Beta This is a new service. Your feedback will help us improve it.

Radios

Updated in October 2026

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

Open this example in a new tab
How do you want to be contacted about this?
Select 1 option

When to use radios

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

This component is used interchangeably across devices.

When not to use radios

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

How to use radios

Position radios to the left of their labels. This makes them easier to find, especially for users of screen magnifiers.

Unlike with checkboxes, users can only select 1 option from a list of radios. Do not assume that users will know how many options they can select based on the visual difference between radios and checkboxes alone. If needed, add a hint explaining this, for example, "Select 1 option".

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

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

Users cannot clear a selection once they have chosen an option. To allow users to change their answer, include an option such as "None of these" or "I do not know" where appropriate. Avoid using a simple yes/no choice unless there are only 2 valid answers.

Order radio options alphabetically by default. In some cases, it's helpful to order them from most-to-least common options, for example, by population size. But be careful, as this can reinforce bias. If in doubt, order alphabetically.

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

Error messages

Display an error message if the user has not:

  • selected any radios
  • answered a conditionally revealed question

Style error messages like this.

Open this example in a new tab
Have you changed your name?
This includes changing your last name or spelling your name differently

Error: Select yes if you have changed your name

Follow:

Accessibility

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?". This supports WCAG Success Criterion 1.3.1 Info and Relationships, level A.

Users should not be expected to infer that only 1 option can be selected. GOV.UK recommends hint text such as "Select 1 option" where necessary. This supports WCAG Success Criterion 3.3.2 Labels or Instructions, level A.

Position radios to the left of their labels. This makes them easier to find, especially for users of screen magnifiers. This supports WCAG Success Criterion 1.4.10 Reflow, level AA.

Source

Learn more about Radios in the GOV.UK Design System.

Back to top

Radios variants

Inline radios

Open this example in a new tab
Are you 18 or over?

When to use inline radios

If there are only 2 short options, you can either stack the radios vertically or display them horizontally (inline).

On small screens such as mobile devices, the radios will still stack vertically.

Radios with hints

Open this example in a new tab
How do you want to be contacted about this?
Select 1 option

When to use radios with hints

Use hint text to give users help in context. Read more about hint text in the NHS England Design System.

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

Radio items with hints

Open this example in a new tab
Do you have a mobile phone with signal?
We will text you a 6 digit security code
We will call you to give you a 6 digit security code

When to use radio items with hints

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

Radio items with a text divider

Open this example in a new tab
Have you had all the vaccinations you're eligible for in the UK?
You would have got these vaccinations at school, from your GP surgery or another healthcare provider
or

When to use 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".

Conditionally revealing a related question

You can add a conditionally revealing question to radios, so users only see the question when it's relevant to them. For example, you could reveal an email address input only when a user chooses to be contacted by email.

Open this example in a new tab
Is Sam ready for their HPV vaccination?
You have 150 characters remaining

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

Only conditionally reveal questions. Do not show or hide anything that is not a question.

Known issues

Users are not always notified when a conditionally revealed question is shown or hidden. This fails WCAG 2.2 success criterion 4.1.2 name, role, value (W3C).

However, GOV.UK found that screen reader users did not have difficulty answering a conditionally revealed question as long as its simple. It confused users when they conditionally revealed complicated questions, particularly questions with more than 1 part.

Smaller radios

Open this example in a new tab
Filter

When to use smaller radios

You should use standard-sized radios in most cases.

Use small radios where you need something to be less visually prominent. For example, on:

  • a page of search results where users need to see and change search filters without distracting them from the results
  • information-dense screens in services designed for repeat use, like staff-facing systems

Back to top

Examples

Welsh Immunisation System (WIS)

This example is from the School-age Immunisations service within WIS. It shows a basic set of radio buttons where users select 1 option. The options are mutually exclusive, allowing users to answer a single question before continuing.

HPV vaccination consent question with Yes/No radio buttons

Choose Pharmacy

This example is from the Choose Pharmacy service. It shows radio buttons with conditionally revealed content. When the user selects "No", additional options appear to help them give more detail. This keeps the initial question simple while allowing users to provide more information when needed.

Emergency Medicines Supply eligibility question with conditional radio options

Back to top