---
url: /components/radio-button/guidelines.md
description: Radio buttons allow users to select one option from a set.
---
# Radio button
Radio buttons allow users to select one option from a set.
[Overview](overview.md) · [Specs](specs.md) · **Guidelines** · [Accessibility](accessibility.md)
Radio buttons
## Usage
Radio buttons are the recommended way to allow users to make a single [selection](../../foundations/interaction/selection.md "Selection lets users choose specific items to act on.") from a list of options.
Only one radio button can be selected at a time.
Radio buttons should always be accompanied by clear inline labels
Use radio buttons to:
* Select a single option from a set
* Expose all available options
Radio buttons are single-select, unlike checkboxes which are multi-select
::: tip Do
Use radio buttons when only one option can be selected from a list
:::
::: tip Do
Use checkboxes when multiple options can be selected from a list
:::
Avoid nesting radio buttons or using radio buttons to select multiple options.
::: danger Don't
Don’t nest radio buttons
:::
::: danger Don't
Don’t allow radio buttons to select multiple options
:::
### Alternate selection controls
Radio buttons are one of several [selection](../../foundations/interaction/selection.md "Selection lets users choose specific items to act on.") controls, which allow people to make choices such as selecting options or switching settings on or off.
[Switches](../switch/overview.md "Switches toggle the state of an item on or off.") and [checkboxes](../checkbox/overview.md "Checkboxes let users select one or more items from a list, or turn an item on or off.") are alternative selection controls that can be used to change settings or preferences.
Switches
Checkboxes
Use radio buttons when there are five or fewer options.
Consider using a drop-down [menu](../menus/overview.md "Menus display a list of choices on a temporary surface.") instead of radio buttons when it’s important to save space on a screen. However, drop-down menus require additional steps for a person, both in the number of clicks and cognitive effort.
::: tip Do
Use radio buttons when there are five or fewer options
:::
::: tip Do
Consider using a drop-down menu instead of radio buttons when space is constrained
:::
## Anatomy
1. Selected icon
2. Adjacent label text
3. Unselected icon
### Adjacent label text
Always pair radio buttons with an adjacent label describing what the radio button selects.
Because only one radio button can be selected at a time, each choice must have its own label.
Radio button always need label text
## Placement
Radio buttons are often arranged in stacked [layouts](../../foundations/layout/layout-overview/overview.md "Layout is the visual arrangement of elements on the screen.").
Radio buttons should be vertically listed and have one option always selected.
::: tip Do
Radio buttons should always have one option pre-selected
:::
::: warning Caution
Avoid using horizontal radio button lists
:::
## Behavior
A radio button is successfully selected when a person clicks or taps either the radio button icon or the label.
Radio buttons should take effect immediately, unless they're in a dialog or page that needs to be saved