Radio buttons

Radio buttons present users a choice of options from which they can select only one.

Examples

Interact with each example to see how it works.

When to use it

Use the radio buttons component when users can only select one option from a list.

When not to use it

Do not use the radio buttons component if users might need to select more than one option. Use the checkboxes component instead.

How it works

Radio buttons are grouped 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 are asking just one question per page, you can set the contents of the <legend> as the page heading.

Always position radio buttons 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 radio buttons. Do not assume that users will know how many options they can select based on the visual difference between radio buttons and checkboxes alone. If needed, add a hint explaining this, like ‘Select one option’.

Do not pre-select radio button options. Pre-selecting radio button options makes it more likely that users will:

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

Be aware that, once users have selected one option, they have to refresh their browser window to go back to having no option selected. To avoid this, include ‘None of the above’ or ‘I do not know’, if they are valid options.

Order radio button options alphabetically by default.

In some cases, it can be helpful to order them from most to least common. For example, you could order options for ‘Where do you live?’ based on population size.

Another example of pre-selected ordering is listing options chronologically. For example, you could order available appointment times in a day from earliest to latest.

However, using pre-selected ordering could reinforce bias in your service, so use it with caution. If in doubt, order alphabetically.

When there are more than 2 options, radio buttons should be stacked.

If there are only 2 options, you can either stack the radio buttons or display them inline.

You can add hints to radio button items to provide more information about the options.

If one or more of your radio button 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’.

Large radio buttons

The default radio button size should be used in nearly all cases. However, larger versions work well on pages where it’s helpful to make them more visually prominent.

For example if you are asking users a single question on a page, larger buttons are easier to see and interact with.

Error messages

Make sure error messages follow the guidance below, and that you have specific error messages for specific error states.

If nothing is selected and the options are ‘yes’ or ‘no’

Say ‘Select ‘yes’ if [whatever it is] is true’. For example, ‘Select ‘yes’ if Sarah normally lives with you’.

If nothing is selected and the question includes options

Say ‘Select if [whatever it is]’. For example, ‘Select if you are employed or self-employed’.

If nothing is selected and the question does not include options [H4]

Say ‘Select [whatever it is]’. For example, ‘Select the day of the week you pay your rent’.

Credit

Guidance, original HTML and CSS derived from GOV.UK Design System.