Radio group
A radio group presents a list of options where only one choice can be selected.Usage
Use radio groups when you want someone to select a single option from a list. For example, choosing a day of the week.
Radio groups are always stacked vertically.
Accessibility
- Include error messages for required or invalid radio fields (for example,
Please select an option) - Never preselect a high-risk option, especially if the radio is related to payment, privacy or security. Use the lowest-risk, lowest-change option as the default to ensure that users don’t accidentally opt in when submitting forms.
- Don’t use a
disabledradio button if it needs to remain in the tab order. Instead, use validation so that screen reader users can perceive the radio button and hear an error message explaining why that option cannot currently be selected.
Best practices
- 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 group option the default. Select the safest, most secure, and private option first. If safety and security aren’t factors, select the most likely or convenient option.
- If you need an unselected state, add a radio group with a "None" option.
- If you can't have a list of all possible options, add an "Other" option.
Avoid:
- Alphabetical orders. This can’t be localized, as it is language-specific.
- Numeric choices that overlap (for example, Select age: 0-20, 20-40 — it's unclear which option to select if your age is 20).
- Numeric choices that skip a number (for example, Select age: Below 20, Above 20 — there is no option to select if your age is 20).
- Long lists of options. If you have a large number of options to choose from, use the select component.
Content guidelines
Labels should be concise and provide context.
Behavior
When the radio group has focus, the selection can be changed with the arrow keys. If it is
disabled, the cursor will indicate that the user can't make a selection.