Skip to main content

Radio Group

Overview

Radio groups present a set of mutually exclusive options, allowing users to select only one option from a predefined list.

They are commonly used in forms, settings panels, and other interfaces where users need to make a single selection from multiple options.

A group of radio buttons that are vertically stacked together.

Dos and Don’ts

Do
  • Make sure each radio button has a label which is clear, concise and accurate.
  • Use a minimum of 2 radio buttons within a group.
Don't
  • If the user can select multiple options from a group, checkboxes should be used instead of radio buttons.
  • Limit the number of radio buttons presented to users to avoid overwhelming them with choices.

Anatomy

Anatomy of a radio group.
  1. Form label (Optional): The form label provides a clear and accessible description of the form element it is associated with.
  2. Radio input: A radio input indicates the current selected state for the option. By default it is unselected.
  3. Radio label: Describes the option that can be selected.
  4. Assistive text (Optional): The assistive text provides additional instructions and error or success messaging for the entire radio group.

Variations

Radio groups can be laid out either vertically or horizontally depending on the use-case and the structure of the user interface. The default layout is vertical, and this is recommended for easier reading.

Vertical

A vertical stack of radio buttons grouped together by a single label above them.

Horizontal

A row of radio buttons grouped together by a single label above them.

Modifiers

Form label

A form label is recommended to provide the user context of the form element and its content.

A row of radio buttons grouped together by a single label above them.
A row of radio buttons grouped together but missing a label.

Assistive text

Assistive text is used where needed to provide additional information or error / success messaging regarding the whole form element, and never to individual radios. The assistive text is always used for an error state to provide the user with the information required to complete the form element.

A row of radio buttons grouped with an error colour around their borders. Below is a message with an error icon. The colour used for both the text and icon is the same as the error border.

Content

All content should use sentence case.

Form label

Label

  • Always use clear and concise labels for radio buttons.
  • Labels appear to the right of radio buttons.

Overflow

When the label exceeds the available width, the label will wrap onto a new line. Radios with the same row remain top aligned for consistency, and any additional rows underneath move down to accommodate the additional content.

A horizontal row of radio buttons. The first radio has a label that is very long, this forces the row to break to a new line.

States

Individual radios have their own interactive states: default, hover, active, and focus. However, some states apply to the group as a collective because they affect all radios: error and disabled.

A row of radio buttons grouped with an error colour around their borders. Below is a message with an error icon. The colour used for both the text and icon is the same as the error border.
A row of radio buttons grouped together by a single label above them. Their background colours are faded to signify that they are currently in a disabled state.

Examples

LTR examples

Here are some examples of the component in a left-to-right context:

A vertical stack of radio buttons. The first one is selected. The radio buttons sit on the left hand side of the label text. This demonstrates a left-to-right reading direction.

RTL examples

Here are some examples of the component in a right-to-left context:

A vertical stack of radio buttons. The first one is selected. The radio buttons sit on the right hand side of the label text. This demonstrates a right-to-left reading direction.

Resources

Figma Component
 Stable
Figma Documentation
 Stable
Web Components
 Alpha
Vue [Fozzie]
 N/A
React [Snacks]
 Stable
iOS JustUI [UI Kit]
 Stable
iOS PIE [SwiftUI]
 Stable
Android PIE [Compose & Views]
 Stable