Elements
Radio buttons
Use radio buttons to let people select a single option from a list.
Guidelines
When using radio buttons, allow people to select anywhere in the radio button or label to select that option.
Display the options from top to bottom, not left to right. This means that people:
- can scan the options
- who have zoomed in will not have to scroll side to side to work out which radio button they need to select
Consider letting people select a ‘None of these’ option. Some people might need this so that they can move on to the next question or task.
We’ve used our foundations to design radio buttons. For consistency across Co-op products and services, do not change the styling of the radio buttons.
Label
Radio buttons must have a label that tells people what information to enter. Space form fields evenly and close to their associated label.
The label must be short and make it clear what information you’re asking for.
Hint text
You can add optional hint text to help people understand the information they need to enter.
For example, you might want to make it clear to a user that they only need to select one option. For this you could add hint text ‘Select only one option’.
Error messages
Give error messages after the user submits the form.
Error messages should appear above the relevant radio buttons. This means they are read out by assistive technology in an order that makes sense.
Go to the guidelines on form validation.
Focus ring
The focus ring appears as a purple outline around any object, including radio buttons, when someone selects it.
Do not remove the focus ring. Some people who use assistive technology need it to navigate our products and services.
Examples
Radio buttons.
Radio buttons with hint text.
Radio buttons with error message.
Radio buttons with hint text and error message.
Changelog for this page
Date | Notes |
---|---|
4 June 2021 | First version of page published |