Skip to main content

Radio Group

A radio group is a set of individual radio buttons grouped together, allowing users to select only one option from the set.

Design only. The Radio Group is provided as a Figma component. In Android development, this pattern is built using native platform controls rather than a shared component.

Dos and Don'ts

Do
  • Ensure each radio button has a concise and descriptive label that clearly indicates what selecting it will entail.
  • Use a minimum of two radio buttons within a group.
Don't
  • If the user can select multiple option 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 the radio group component.
  1. Form label (Optional): A form label provides necessary content / information to a form.
  2. Radio input: A radio input indicates the appropriate state. By default it is unselected.
  3. Radio label: Describes the information you want to select or unselect.
  4. Assistive text (Optional): The assistive text provides additional instructional information, error or success messaging for the whole radio group.

Variants

Radio groups can be laid out both horizontally and vertically depending on the use case and the structure of the UI. Where possible, arrange the radio group vertically for easier reading.

Horizontal

Horizontal variant of the radio group component.

Vertical

Vertical variant of the radio group component.

Modifiers

Form label

A form label is recommended to provide the user context of the form element and it's content.

Radio group component in the horizontal variant with a form 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 checkboxes. The assistive text is always used for an error state to provide the user with the information required to complete the form element.

Radio group component in the error statewith assistive text.

Content

All content should use sentence case.

Form label

Check out the form label documentation.

Label

  • Always use clear and concise labels for checkboxes.
  • Labels appear to the right of checkbox input.

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.

Example of radio group component with textoverflow.

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 radio group in an error state.
A radio group in a disabled state.

Examples

LTR examples

Here are some examples of the radio group in left-to-right context:

Examples of the radio group component in left-to-right context.

RTL examples

Here are some examples of the radio group in right-to-left context:

Examples of the radio group component in right-to-left context.
Back to top