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.

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.

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

For more detailed specification and dimensions visit the Figma file.

Soul Design System by Emplifi

Soul is the heart of Emplifi's effort to design the best CX platform for its customers. The design system collects principles, components, patterns, copywriting guidelines, and more.