Radio

A radio allows users to select one option from a group.

When to use

Use a radio button when there is only one allowed selection from a group. A radio button can be part of a form to request information from the user. It could also be used to apply a certain setting or filtering.

When multiple options are allowed use checkboxes instead.

 

Radio button vs toggle

Another selection control that allows users to apply a single setting is a toggle. However, there is a difference between these two components. A toggle is used when there are only 2 available options, to turn something on or off (or true/ false), if possible with immediate. A radio button allows one options from a group and can have more than 2 options.

 


Alignment

The individual radio buttons within a group can have a horizontal of vertical layout. The kind of layout you apply depends on the use case. However, try to arrange the radio buttons vertically as much as possible for better reading.

 


Layout and positioning

Radio buttons are often used in forms. Forms can are mostly placed on a full page or in a modal. In other cases, a radio button might be also used to change settings from a menu, as a filter options or for selecting an item in a data table.

 


Spacing

However you apply radio buttons, make sure to stick to a consistent rhythm in terms of spacing. When used as part of a form, a radio button groep should be placed at least 24px below or before the next item. Just like other form elements.

 


Accessibility considerations

Individual radiobuttons require a label, but for a smooth user experience, the radiogroup requires a label of its own in order to tell a screen reader user what question they're answering. Just two radio buttons labeled "Yes" and "No" are, after all, not very helpful when the question isn't known. THis can be done visually, or by using a screenreader-only approach.

Semantically, it is important to keep radiobuttons per question in separate groups. Not doing so will result in erratic keyboard navigation and screen reader output.