Label

Radio buttons should always have labels. When the label is not defined, a radio button becomes standalone. Standalone radio buttons are only used when their connection to other components is clear and they give sufficient context — for example, in a form to rate between 1 to 10 for several categories.

Disabled

A radio button in a disabled state shows that a selection exists, but is not available in that circumstance. This can be used to maintain layout continuity and communicate that an action may become available later.

Read-only

Radio buttons have a read-only option for when they’re in the disabled state but still need their labels to be shown. This allows for content to be copied, but not interacted with or changed.

Keyboard focus

A radio button can be navigated using a keyboard. The keyboard focus state takes the radio button’s visual hover state and adds a blue ring to the radio button in focus.

Text overflow

When the label is too long for the horizontal space available, it wraps to form another line.

Mixed value

When a radio button group presents multiple values that are not identical, the group should not show a selection. Any subsequent selection should update all values.

Use radio buttons for mutually exclusive options

Radio buttons and checkboxes are not interchangeable. Radio buttons are best used for selecting a single option from a list of mutually exclusive options. Checkboxes are best used for selecting as many options as desired (or none).

Label groups of radio buttons

Groups of radio buttons should always have a label that clearly describes what the list of options represents. This is important for accessibility, since a screen reader will read the label before each option. Make sure to include a label, and don't assume that the options are self-explanatory without one. Write the label in sentence case. Place radio buttons in a vertical list to ensure they are easier to find, read, and work responsively.