Change log
Components
Radio
- Overview
- Usage
Overview
When to use
Use the radios component when users can only select one option from a list.
When not to use
Do not use the radio component if users might need to select more than one option. In this case, you should use the checkboxes component instead.
Principles
Radio buttons always have a minimum of two options.
Always position radios to the left of their labels. This makes them easier to find, especially for users of screen magnifiers.
Make the label clickable. Users should be able to click on either the text label or the radio button to select or deselect an option.
Unlike with checkboxes, users can only select one option from a list of radios. Do not assume that users will know how many options they can select based on the visual difference between radios and checkboxes alone. If needed, add a hint explaining this, for example, ‘Select one option’.
Do not pre-select radio options as this makes it more likely that users will:
- not realise they’ve missed a question
- submit the wrong answer
Size
Regular should be used in most cases. Compact could be used for example in large and dense data tables.
Regular size
Compact size
Inline state
Hint text
Hint text can be added to the legend and also to individual radios.
Required indicator
Single line legend
Multiple line legend
Error messages
Disabled state
Use this state when the user doesn’t have permission to edit the field.
Usage guidelines
Single option
Do not use for “accepting terms of service” and similar functionality. Use a checkbox instead.
Do
Don't
Inline radios
Inline stacking may be used for two options with short labels. If you have more that two options and/or longer labels, use vertical stacking instead.
Do
Do
Don't