Table of Contents | |
---|---|
outline | true | style | square
Description
Status | ||||||
---|---|---|---|---|---|---|
|
...
- List options in a logical order:
- Most likely to least likely to be selected.
- Simplest to most complex operation.
- Least to most risk.
- Make one radio button option the default. Select the safest, most secure, and private options first. If safety and security aren’t factors, select the most likely or convenient option.
- If you need to have an unselected state, add a radio button with a None option.
- If you can't have a comprehensive list of all possible options, add an Other option.
- Labels should be concise and provide context.
- Try to align radio buttons vertically instead of horizontally, especially for long labels. Horizontal alignment is harder to read and localize
Try to avoid
- Putting things in alphabetical order because it is language dependent and not localizable.
- Overlapping choices. e.g. Select age: 0-20, 20-40 - What do you pick if your age is 20?
- Forgetting to include choices. e.g. Select age: Below 20, Above 20 - What do you pick if you are exactly 20?
...
Best practices
Use a radio button when the options being presented are important enough to occupy more screen space.
They should only be used if the user needs to see all available options instantly and side by side.
Do not use a radio button if:
- You need to offer the user the option of multiple selection. In this case, use checkboxes instead because radio buttons are for single-selection contexts only.
- The default option is recommended for most users in most situations. In this case, consider a dropdown list instead, which uses less space by not showing all options straightaway.
- You need to present more than 8 options. Use a dropdown menu.
- In special cases, there are only two mutually exclusive options. Combine them into a single checkbox or toggle switch. For example, use a checkbox for “I agree” (for example, to terms and conditions) instead of two radio buttons for “I agree” and “I don’t agree”.
- The options are numbers with fixed steps. Use a slider.
...