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

Different radio button states – live examples

When to Use

Use radio buttons:

• To choose quickly between at least two clearly distinct alternatives.
• For single-selection scenarios only.

Don’t use radio buttons:

• For multiple-selection scenarios. Use checkboxes instead.
• To select list items.
• To offer more than 8 options. Use a dropdown box or list view instead.
• To offer only two mutually exclusive options. In this case, combine them into a single checkbox or toggle button. For example, use a checkbox for “I agree”.
• To offer options that are numbers with fixed intervals. Use a slider instead.

Anatomy

The radio button comprises two parts:

1. Button: Indicates whether the option is selected.
2. Text: Describes the purpose of the radio button. The text is optional if the purpose of the radio button is already indicated by other elements.

Behavior and Interaction

The user can select a radio button by clicking on the button or the content. Note that clicking again on a checked option does not uncheck it. However, clicking on a different option transfers selection to that option. The user can select only one option from a group of radio buttons.

Radio button – live example

Related Links