Radio button card

Use a radio button card when the user can choose a single option from a list of mutually exclusive choices. Only one radio button card can be selected at a time. By default, one radio button card is preselected. When the user selects another option, the previous selection is automatically deselected.

States

A radio button card allows two statuses: Rest and isSelected. In addition to these statuses, the radio button card also has states for hover, focus, disabled, and error.

One of the radio buttons in a set is always in isSelected state. It’s possible to select only one radio button card at a time. The previous choice is automatically deselected once the user chooses a new item.

DP - States

 

Typography

Titles, labels, and descriptions should be sentence cases. Only the first word in a phrase and any proper or exceptional nouns are capitalized.

 

Interactions

The selection is realized by clicking the whole radio button card; this makes it easier for the user to make the selection.

DP - Interaction

If Helper is visible, Soul uses a 24px square safe zone around it to provide users with the option to interact with it.