Also see Checkboxes, Radio buttons, and Toggles.
Anatomy
- Selector: Allows the user to select an option in the list
- Item: Descriptive text detailing the item a user can select or unselect
- Feedback: Provides a hint to the user to help them complete a task
Usage Guidelines
When to use this component
- Use a radio button when a user must select exactly one option from a limited, predefined list. All choices should be visible at the same time so the user can compare them easily.
- Use a radio button when the options are mutually exclusive.
- Use a radio button for simple, low-risk choices that don't require a lot of explanation. The visual simplicity of radio buttons makes them easy to scan and understand quickly.
-
Use a radio button when the number of options is small, typically between 2 and 6. This ensures the list doesn't take up too much space on the page.
When not to use this component
- Don't use a radio button when a user can select more than one option. In this case, use a checkbox instead.
- Don't use a radio button when the number of options i s very high (more than 7). A dropdown menu or a select component is a more suitable choice to save space and avoid overwhelming the user.
- Don't use a radio button if the default or selected option is the only one most users will pick. A single checkbox or a toggle can be a more efficient design in that scenario.
-
Don't use a radio button when options need a lot of descriptive text. This can make the form visually cluttered and difficult to read. A different component that hides the detailed information until selected may be more appropriate.
Best Practices
- 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.
- Radio groups should always have a label. In rare cases where context is sufficient and an accessibility expert has reviewed the design, the label could be omitted.
- Radio Buttons are most often found in forms or in preference sections
- Ideally, radio buttons should have more than 3 but less than 9 options
- 2 options should be reserved only for when it would be beneficial to make a selection on one click instead of opening a menu
Use radio buttons to choose one option from the list.
Use radio buttons when the list includes at least two mutually exclusive options.
Use a hint to provide additional information about the radio.
Don’t hide additional information behind tooltips or icons.
Avoid pre-selecting radio options as this makes it more likely that users will not realize that they’ve missed a question and submit the wrong answer.
General Component Behaviors
- Radios should always be grouped together. Use a Fieldset for grouping.
- Radios can be unselected or selected depending on the user's selection.
- Only one radio button can be selected at a time.
- If one is selected and a user selects a new option, the original option becomes unselected.
If a Radio group is required, a user must select at least one option.
Always label radio groups
Radio groups should always have a label that clearly describes what the list of options represents. Make sure to include a label, and don't assume that the options are self-explanatory without one.
States
Known Gaps
- Accessibility guidelines