Radio button
Radio buttons are a type of form element that allow users to pick a single answer to a question.
Example
How to use radio buttons
Use the radio component when users can only select one option from a list.
Use inline radio buttons for Yes/No questions. For any other questions use stacked radio buttons.
The question or label for the radio button component must be clearly written, with help text added if needed. Avoid using negatives in the question or label – for example ‘Please confirm you are not operating in a restricted sector’.
If the question is complex and users may misunderstand the Yes/No answers, you can expand these. For example ‘Yes, my company is based in Scotland’ or ‘No, my company is based outside of Scotland’.
When not to use the radio buttons
Do not use the radio component if users might need to select more than one option. In this case, you should use the checkbox component instead. If there are more than 9 options to choose from, use the dropdown component instead.
Error messages
Error messages for this component should usually start with ‘Select’. For example, ‘Select your company type’.
Error messages should follow our standard error message styling. Make it clear which field the error message relates to, and let the user know what they need to do to fix the error.
Adding radio buttons in the CMS
At the moment, the radio button component isn’t available to add to any other panels or components via the CMS. If you need to add radio buttons to a page or an existing form like our enquiry form, get in touch with Louise Spence
Accessibility
We use a custom style for radio buttons so that they're larger and easier to use than the standard radio buttons defined by the user's browser. We also use a custom style to make their focussed and selected states clearer.
Radio buttons must be accessible using a keyboard, and it must be clear which button is in focus.
The question, help text and answers must all be written in a way that’s easy to understand.