Radio group

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

null
  1. Radio group label (optional): The label helps the user understand the group of options provided and to make a selection.
  2. Radio input: A radio input is used for each available option within a group. Together with radio input label, this makes one radio button.
  3. Hint text (optional): The text clarifies the group or explains the set of options.
  4. Radio input label: The label describes the unique option for each radio input. Together with radio input, this makes one radio button.

Demo

Storybook failed to load. Please connect to the VPN to access.

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

Variants

Inline

For radio groups that appear on the same horizontal line. This variant allows hidden labels.

null
null

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.

null

 

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.

null

 

Focus

The focus state displays the hover state with an additional highlight ring to visualize the interaction more easily when navigating with a keyboard.

null

 

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.

null
null

 

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.

null

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.
  • If using an inline variant, the label can also be hidden.
    • In Figma, you can either hide the label layer, or use the various Input field subcomponents under Hidden utilities in the UI kit.

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).
Use clear input labels that explain how choices are mutually exclusive and different.

Use clear input labels that explain how choices are mutually exclusive and different.

Don't use labels that have unclear relationships or may not be mutually exclusive.

Don't use labels that have unclear relationships or may not be mutually exclusive.

Instead of repeating “Any,” choose a word that supports the difference between choices.

Instead of repeating “Any,” choose a word that supports the difference between choices.

If radio group labels are too parallel or repetitive, it can make it harder for users to make their selection.

If radio group labels are too parallel or repetitive, it can make it harder for users to make their selection.

 

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.
  • A link can be included at the end of the hint text.
  • 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.

If using the inline variant, the purpose of the input with a hidden label must be made clear in some other way contextually. In these cases, consult with the Odyssey team for an accessibility review.

  • In code, the label prop is still required. The label will be made accessible to screen reader text.
  • An HTML label element will still be rendered but visually hidden.

 

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

 

Figma: Radio