Radio Button

Radio buttons allow users to select one option from a set.

Usage

Use radio buttons to:

Select a single option from a list of mutually exclusive choices
Expose all available options

Each radio works with dependency of other radios in the list. To use a radio, the user clicks the radio to check it. The radio text describes the action.

If there is only one radio, either a label or text can be used, depending on the form’s format.

If there are multiple radios, the label describes the whole group and the text property of the radio describes each individual radio.

If available options can be collapsed, consider using a dropdown menu instead, as it uses less space. This applies mostly in cases where you need to present more than 8 options.

Within a group, each radio is an exclusive choice. The changes take effect after user confirmation via a triggering action button. (such as Save)

Placement

Radios are often used in forms. Forms can be placed on a full page, in a modal or in a side panel.

Types

Other selection controls

Selection controls allow users to complete tasks which involve making choices such as selecting options, switching settings on or off, or adding or removing items.

Checkboxes and switches are alternative selection controls that can be used to enter decisions or declare preferences, such as settings or dialogs.

Anatomy and content

The radio button component is comprised of a set of clickable circles (the inputs) with text labels positioned to their left or right. In case of a radio buttons group, a group label can be added.

Radio input

Use the radio button input to indicates the appropriate state : selected or unselected. By default, it is unselected.

Radio label

Use the radio label to describe the information you want to select or unselect:

Always use clear and concise labels for radios.
Labels appear to the right or left of radio inputs.

Alignment

Radio labels are positioned to the left or the right of their inputs, depending on the situation. Radio groups can be laid out vertically or horizontally, depending on the use case and the structure of the UI. When possible, arrange the radio and radio groups vertically for easier reading.

Group label (optional)

Use a group label to communicate what needs to be selected below, that is to say to describe the set of options or provide guidance for making a selection.

Behavior and interaction

Radios can be selected or unselected. The default view of a radio button is having at least one radio button preselected. Only one radio button should be selected at a time. When a user chooses a new item, the previous choice is automatically deselected.

States

Radios can have one of the following states: enabled, disabled, hovered, focused, pressed or read-only.

Disabled state : to enhance user understanding, display the « not allowed » cursor and add a tooltip to explain the reason why a field is disabled.

Responsiveness

We recommend radio labels being fewer than three words.

If you are tight on space, consider rewording the label. Do not truncate radio label text with an ellipsis.

Long labels may wrap to a second line, and this is preferable to truncation. Text should wrap beneath the radio so the control and label are top aligned.