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.

Radio button in selected and unselected states

When to Use

Use the radio button if:

Users need to choose only one option from a list of different alternatives.
Users need to see all options at once and make a selection – without having to interact with a dropdown.
Users are selecting from a small set of options – no more than 8. Use a dropdown or list view otherwise.
Users need to trigger an immediate change – for example, when choosing an option that updates the screen right away, without needing to press Submit.

Don't

Don’t use the radio button if:

Users need to select more than one option – use checkboxes instead.
Users need to select items in a list – let them tap directly or use checkboxes.
Users are expected to go with the most common option – use a dropdown instead and set that option as the default.
Users are choosing between just two options – use a single checkbox or a toggle switch instead. For example, use a single checkbox for “I agree to the terms and conditions,” and a toggle to opt in or out of email newsletters.
Users need to select a value from a range – use a slider instead.

Use when users need to choose between two clearly different choices.

Don't use when users need to select more than one option from a list.

Anatomy

The radio button includes two elements:

Button: A selectable circle that indicates whether the option is selected. An empty circle means it's not selected; a filled circle means it is.
Text: Describes the option provided by the radio button. Keep it clear and concise. Omit only if the surrounding context makes the choice self-explanatory.

Radio button anatomy

Behavior and Interaction

Activation

Users click or tap a radio button to select an option. Selecting a different option automatically deselects the previous one – only one option can be selected at a time in a group. A group of radio buttons behaves like a single control: Using the tab key sets the focus directly on the selected option. Users can cycle through the group using the arrow keys.

Radio button interaction

Interaction States

A radio button can appear in different interaction states depending on how a user interacts with it.

A. Regular: Default appearance when the radio button is enabled.

B. Hover: Highlights the radio button when the cursor moves over it.

C. Disabled: Shows the radio button is unavailable. Users can’t select or change it.

D. Read Only: Displays a fixed selection that cannot be changed by the user.

Radio button interaction states

Responsiveness

Horizontal and Vertical Groups

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.

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

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.

Active Area

A radio button can appear in two sizes: compact and cozy. In cozy mode, the button appears larger, making it easier to tap on touch devices.

In both modes, the active (clickable) area is slightly larger than the visual circle itself, allowing users to select the radio button more easily – even when tapping near, rather than directly on, the circle.

Clickable area around the radio button in compact and cozy modes

Styles

Value States

In addition to interaction states, radio buttons can be styled to reflect intent or meaning, which are indicated using semantic colors.

A. Information: Provides context or neutral guidance.

B. Positive: Highlights a successful or desirable option.

C. Critical: Draws attention to a potentially risky or sensitive choice.

D. Negative: Signals an irreversible or destructive option, such as file or account deletion or service cancelation.

Radio button value states

information

For details on the different states, see UI Element States.

For more information on semantic colors for value states, see How to Use Semantic Colors.

Column Attribute

The radio button attributes also have a set arrangement so that you do not have to implement them 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

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.

Example of options ordered by increasing difficulty

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 presented earlier in the Column Attribute subsection.

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

Localization

In left-to-right languages like English, the radio button is usually placed to the left of the label text. For right-to-left languages like Arabic or Hebrew, the radio button should be aligned to the right of the label text to match the reading direction.