Intro

Radio buttons provide users with a set of mutually exclusive options. They allow a user to select only one option from two or more choices. Each option is represented by a radio button. Consequently, radio buttons only work in groups.

Usage

Use the radio button if:

  • You need to help users choose quickly between at least two clearly different choices.

Do not use the radio button if:

    • You need to offer the user the option of multiple selection. In this case, use checkboxes instead because radio buttons are for single-selection contexts only.
    • You want to allow the user to select list items. Instead, let the user tab the list item to make a single selection (consider a message toast for confirmation) and provide checkboxes to select multiple list items.
    • The default option is recommended for most users in most situations. In this case, consider a dropdown list instead, which uses less space by not showing all options straightaway.
    • You need to present more than 8 options. Use a dropdown box or list view.
    • In special cases, there are only two mutually exclusive options. Combine them into a single checkbox or toggle switch. For example, use a checkbox for “I agree” (for example, to terms and conditions) instead of two radio buttons for “I agree” and “I don’t agree”.
    • The options are numbers with fixed steps. Use a slider control.

Responsiveness and Adaptiveness

The radio button group control is not responsive. A horizontal radio button group should be displayed as a vertical group on smartphones because a horizontal group should never break into two lines.

Also note that the control does not handle long labels in horizontal groups. Such labels do not break and are not truncated. Therefore, check label lengths and padding in horizontal groups on desktop and tablets.

A horizontal radio button group does not match the size of mobile phone screens
A horizontal radio button group does not match the size of mobile phone screens
On smartphones, a horizontal group should always break into a vertical button group
On smartphones, a horizontal group should always break into a vertical button group

Behavior and Interaction

Activation

The user taps a radio button to activate the related option. Note that tapping an activated option does not deactivate it, but tapping a different option transfers activation to that option. Therefore, a user can select only one option from a group of radio buttons.

A group of radio buttons behaves like a single control: Only the selected choice is accessible using the tab key, but users can cycle through the group using the arrow keys.

Styles

The radio button attributes set various states. The value state attribute sets one of four states: default, read-only, error, and warning. Radio buttons display the state depending on the interaction.

Radio button interaction states
Radio button interaction states

Column Attribute

The radio button attributes also set arrangement so that you do not have to implement this for every single control. The column attribute adds or removes n-columns to a set of radio buttons.

Three columns – the example shows background color settings
Three columns – the example shows background color settings
One column – the example shows a customer survey
One column – the example shows a customer survey

Guidelines

The radio button control serves the purpose of exclusive selection and adds clarity and weight to very important options in your app. Use radio buttons when the options being presented are important enough to occupy more screen space. They should only be used if the user needs to see all available options instantly and side by side. Radio buttons draw more attention to the options as they emphasize all options equally.

Labeling

A label to indicate the option is mandatory for each radio button. Limit the radio button’s label to a single line.

Sorting

List the options in a logical order, such as lowest to highest risk, simplest to most complex operation, or most to least likely to be selected.

Alphabetical ordering is less recommended as it is language-dependent and therefore not localizable.

Aligning

Try to align radio buttons vertically instead of horizontally, especially for long labels. Horizontal alignment is harder to read and localize. Consider horizontal alignment in cases of one-word labels, such as in the background color settings example above.

In forms, always align radio buttons vertically instead of horizontally as the length of the labels may vary for different languages.

Do not put two radio button groups right next to each other as it is difficult to determine which buttons belong to which group. Use group labels and padding to separate them.

Offering “No Choice”

If the user is also able to select none of the options, be sure to add this option to the control as well (as this option is generally not offered in the control). Add a radio button that offers None or Does not apply.

Default State

Because radio buttons do not generally offer “no choice”, the app should show the less risky option (most likely the first option in the group) as preselected by default.

Exceptional Case: No Preselection by Default

In rare cases, preselection might result in incorrect inputs or assumptions. One such example is gender selection in a form. In this case, you should offer no preselection and decide whether a user input is mandatory or not depending on the use case.

If a choice is mandatory, set an error state if validation proves that a user did not select an option.

Offer no selection by default in this case of gender selection because a preselection might be misleading
Offer no selection by default in this case of gender selection because a preselection might be misleading

Resources

Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.

Elements and Controls

Implementation