Radio buttons
 
Select information to answer a question. 
 

Guidance

 
Guidance on this pattern has been published on the GOV.UK Elements page.
 
Don't rely on the visual difference between radio buttons and checkboxes
 
Many users do not know the difference between radio buttons and checkboxes.
 
 Make it clear from the context whether you're asking users to select single or multiple options. For example, before a set of checkboxes you can add the text: "Select all that apply:"
 
Use a large, visible hit area where appropriate
 
A properly marked-up radio button or checkbox can be selected by clicking anywhere on the label, not just the control. However, many users do not know this and continue to try to click the controls, which are usually quite small. This can be particularly tricky on mobile devices.
 
To help with this we've created an alternative style for radios and checkboxes where the clickable area is bigger and visible:
 
 
 
Design for the common case
 
If one choice is much more common than the others, make this the first option. Break large sets of options into related groups, or break out very frequent or infrequent options:
 
 
 
 
Be careful with defaults
 
In general, avoid pre-selecting checkboxes or radios.
 
It can confuse some users, and you'll never know if they explicitly chose that option or just didn't notice the question. e in which case it should be in the exact state it was when they last saw it.
 
 
 
Remember 'none of the above'
 
If 'None of the above' is a valid option it must be explicitly represented - you can't un-check a set of radio buttons once one has been checked.
 
Align the options vertically
 
In general, align the options vertically as it makes them easier to scan. An exception is where you have binary choices with short labels, like 'Yes / No'. The convention here is for horizontal alignment.
 

Discussion

 
Dynamic vs fixed width