Skip to main content

Radio buttons

Before you use this component​

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

Don't use radio buttons if users need to select more than one option. In this case, use the Checkboxes component instead.

If you have more than a few options, consider using a Dropdown instead.

Users cannot go back to having no option selected once they have selected one, without refreshing their browser window. Therefore, you should include ‘None of the above’ or ‘I do not know’ if they are valid options.

Arrange the list of options in alphabetical order unless there is a specific reason to do otherwise.

When did you take your bins out?

Radio buttons with hints​

You can add hints or guidance text to the label and to the checkbox items to provide additional information about the options.

Which type of review do you want?
For large sites, such as trading estates, contact us for a quote.

A letter contains research and the contamination status of the property address. This will usually be enough for conveyancing or a property purchase. A letter costs £77.89 and usually takes 20 working days to prepare.

An environmental report contains:

  • historic maps
  • a description of known historical industry
  • any known contamination issues within 250 metres of the property

An environmental report costs £166.45 and usually takes 20 working days to prepare.

Radio items with a text divider​

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

Where was the baby born?

or

You can show a related question when a user selects a specific radio button so they only see the question if it’s relevant.

This keeps related questions together and makes them easier to answer. For example, if a user selects "Contact me by Text message," you can show a box for them to enter their mobile phone number.

How would you like to be contacted?

Inline radio buttons​

You can choose to use inline radio buttons when:

  • the question only has two options

  • both options are short

Do you agree to these terms?

With error​

Display an inline error when there's something wrong. For example, when a user tries to proceed without selecting an option and the question is mandatory.

What type of event are you applying for?
You need to choose an option