Radio
Radio buttons let users select a single option from a list.
When to use
Use the radios component when users can only select one option from a list.
When not to use
If users need to be able to pick more than one option from a list, use the checkboxes component instead.
How to use
Always use radios with our Form group component. This adds a fieldset with a legend that describes the radios (example 'Where do you live?')
Always position radios to the left of their labels. This makes them easier to find, especially for users of screen magnifiers.
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.
Order radio options alphabetically by default. In some cases, it can be helpful to order them from most-to-least common options. For example, you could order options for ‘Where do you live?’ based on population size.
However you should do this with caution as it can reinforce bias in your service. If in doubt, order alphabetically.
Be clear about one option
Unlike with checkboxes, users can only select one 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.
Add a hint explaining this, for example, 'Select one option'.
Include a ‘none’ or don’t know option
Users cannot go back to having no option selected once they have selected an option. You should include "None of these" or "I do not know" if they make sense. See the GDS guidance on avoiding binary choices.
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.
Read more on the gov.uk Design System about why and how to set legends as headings.
Default radios
Inline radios
In some cases, you can display radios 'inline' beside one another (horizontally).
Only use inline radios when:
- the question only has two options
- both options are short.
Remember that on small screens such as mobile devices, the radios will still be 'stacked' on top of one another (vertically).
You can’t use individual hint text with inline radios.
Using hint text
Keep hint text short and simple.
Do not use links in hint text. While screen readers will read out the link text when describing the item, they usually do not tell users the text is a link.
Hint text can be added to both:
- An individual radio
- The overall group of radios
Individual radio hint text
Add hint text to individual radio buttons to provide additional information about the options.
Group hint text
Add hint text to the whole group to provide additional context or help about the entire group.
Asking complex questions
If you’re asking a question that needs a detailed explanation, don’t use hint text, instead use:
- a heading that’s a statement (for example, ‘Interview needs’) rather than a question
- whatever mix of text, paragraphs, lists and examples best explains your question to users
- a label, above the form input, that asks users a specific question – for example, ‘Do you have any interview needs?’
Errors
Display an error message if the user has not:
- selected any radios that are required fields.
How to use error messages
Error messages are styled like this:
When not use to use error messages
Only display an error when someone tries to move to the next part of the form or service.
Do not trigger error messages:
- when users select or tab to a field
- when they move away from a field.
Accessibility
We use a custom style for radio buttons, so they're more prominent and easier to use than the standard radio buttons defined by the user's browser. We also use a custom style to clarify their focused and selected states.
Component meets WCAG AA guidelines for accessibility on:
- Text contrast - Text has a contrast ratio of at least 4.5:1 for small text and at least 3:1 for large text (WCAG 2.2 - 1.4.3).
- UI contrast - Visual information required to identify components and states (except inactive components) has a contrast ratio of at least 3:1 (WCAG 2.2 - 1.4.11).
- Accessible use of colour - Colour is not used as the only visual means of conveying information (WCAG 2.2 - 1.4.1).
Research/evidence
We tested the radio component on a "In consultation Comment Collection" prototype in 2021. Users understood the purpose of the radios and were able to use them.
Help improve this page
To help make sure that this page is useful, relevant and up to date, you can:
Need help?
If you've got a question about the NICE Design System, contact the team.
- If you work for NICE, ask us a question in our Teams channel
- If you work outside of NICE, you can get in touch with us via Github discussions