A radio button allows users to select one option from a set.

Behavior

Radio button selected

Clicking on a radio button selects an item. A dot appears inside the radio button to confirm the selection.

Error message

A warning message, next to the selected item, appears if an error occurs.

Style

Color

Radio buttons have a dark grey outline by default.

If an error occurs, radio buttons have a light red background and a red outline. The selection associated to the button turns red as well.    

Format

Radio buttons are shown as a small circle with a dot when selected.

Related pages

A checkbox allows users to select multiple options from a set.
A select field allows users to select one option from a list of more than 10 items.