Radio
Use the radio component when users can only select one option from a list.
Radio buttons are a common way to allow users to make a single selection from a list of options. Since only one radio button can be selected at a time (within the same group), each available choice must be its own item and label.
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 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 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.
If needed, add a hint explaining this, for example, 'Select one 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
Order radio options alphabetically by default.
Group radios together in a fieldset with a legend that describes them, as shown in the examples on this page. This is usually a question, like 'Where do you live?'
If you're asking one question on the page
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).
Radios with hints
You can add hints to radio items to provide additional information about the options.
Errors
Error with message
Disabled radios
Disabled radio inputs can be used to indicate inputs that are no longer valid or expired.
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.0 )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.1 1.4.11).
- Accessible use of colour - Colour is not used as the only visual means of conveying information (WCAG 2.0 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