Radio buttons should be used when a user can select only one element from a mutually exclusive list.

Label

All radio buttons should have an adjacent label. To provide more context to the selection, the list items can be used beneath a UIHeader.

Alternatives

If there are too many options in the list, consider using a dropdown selection instead. For instances where multiple elements should be selectable, see UICheckbox.

‍

Radio buttons are directly interactive elements. When selecting an item from a list, only one may be selected at a time. Clicking another option will cause the prior selection to become deselected.

The default state for all radio buttons is deselected, unless due to a specific feature, or saved state.

Clickable Area

Clicking anywhere on the radio button, as well as anywhere on its label (when possible) should toggle the state (when not already selected).

‍