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
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.
The radio button comprises two parts:
- Button: Indicates whether the option is selected.
- 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.
Anatomy of the radio button
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.