Radio group allows a user to make a single selection from a group of two or more options that are mutually exclusive.
Overview
Radio buttons are wrapped into a radio group because there are always at least two radio buttons required. The radio group wrapper visually presents the group of options as distinct and separate from other possible groups on the same page.
Anatomy
- Radio group label (optional): The label helps the user understand the group of options provided and to make a selection.
- Radio input: A radio input is used for each available option within a group. Together with radio input label, this makes one radio button.
- Hint text (optional): The text clarifies the group or explains the set of options.
- Radio input label: The label describes the unique option for each radio input. Together with radio input, this makes one radio button.
Demo
Open the component in Figma.
When to use
Use a radio group for these scenarios:
- To display all possible options and make it easy to compare them without needing to interact with the component.
- To allow the user to select only one option.
- To allow the user to select between two mutually exclusive options that are specific or require context.
When not to use
Use another type of input for scenarios when you need to allow for multiple options or have space constraints.
Use a checkbox instead:
To allow multiple options to be selected. Checkboxes are independent of other checkboxes and multiple options can be selected at the same time.
Use a select instead:
If there are more than five options, use a select (aka dropdown menu) to present the list of options without overwhelming the user.
Use a switch instead:
If there are two mutually exclusive options that are binary, a switch allows the selection to be made easily.
Similar components
Behaviors
States
A radio group has five states:
Selected
By default, the recommended radio button should be selected. A radio button can be selected from either the radio input or the radio label, this provides a better affordance for the user.
Unselected
When another button is selected, the default selection will be unselected. If users need an unselected state to withhold an answer, provide a neutral radio button. For example, a None option.
Both selected and unselected states also have form input states: focus, disabled, and invalid.
Focus
The focus state displays the hover state with an additional highlight ring to visualize the interaction more easily when navigating with a keyboard.
Disabled
The disabled state prevents a user from initiating interacting with a radio. The context of the page or component should make it clear why the element is disabled and what needs to change in order to be able to use it.
Invalid
The invalid state alerts the user that a selection that was made is invalid, The error is indicated with an error message and icon.
Accessibility
Odyssey components are designed and built to meet accessibility requirements out of the box. So, designers and engineers can focus on any accessibility concerns unique to their problem areas.
Our components meet WCAG 2.2 AA criteria and WAI-ARIA guidelines to provide a usable and accessible experience to everyone. See the ARIA guidelines for radio group.
Content guidelines
Radio group label (optional)
Describes the group of options or provides guidance for making a selection.
- Be concise
- Use sentence case.
- Avoid punctuation; use a colon (:) only if needed for clarity.
This label can be omitted if the radio group follows a fieldset label that clearly identifies its purpose.
Radio input label
Describes the information you want to select.
- Make the label as concise as possible.
- Make differences between options easy to quickly understand.
- Make sure choices don’t overlap. For example, 0-20, 21-40 not 0-20, 20-40.
-
List options in a logical order:
- Most likely to least likely to be selected
- Simplest to most complex operation
- Least to most risk. - Don’t list options in alphabetical order because this won’t remain consistent when translated.
- For the default option: select the safest, most secure, and private option. If safety and security aren’t factors, select the most likely or convenient option.
- If including an unselected state, add a radio input labeled None.
- Don’t truncate text; wrap to a second line if required.
- Write in sentence case (capitalize the first word and proper nouns only).
Hint text (optional)
Use only if needed to provide in-context information to clarify the entire radio group or explain the set of options.
- Hint text is always visible.
- Include just the information needed to make the decision or choice.
- Write in sentence case (capitalize the first word and proper nouns only).
- Use end punctuation if a complete sentence.
Error message
Include an appropriate error message for required radio button groups.
- Default error message: Select an option.
Content accessibility
No accessibility annotations are needed for radio buttons, Odyssey provides the labeling of radio buttons and groups, and their states, to screen readers and other assistive technologies.
Radio button group label
The UI text is linked to the radio button so assistive tech will read the UI text followed by the component’s role.
The accessibility label for a group of radio buttons is radio group.
Radio button input label
The accessibility label for an individual radio button is the same as its visible input label.
Hint text
The hint text is conveyed to assistive tech users with the aria-describedby attribute.
Error message
The error message is conveyed to assistive tech users with the aria-describedby attribute.
Additional references
Jakob Nielsen (2004, September 26) Checkboxes vs. Radio Buttons - Nielsen Norman Group