🟢 Radio

We utilize this component to allow users to make a selection from displayed group of options. The selected option is exclusive in relation to other within the group.

Use

Our library provides this component per se with no specific limitations how to use it. We don't specify how to use Radio in context of other components or how to format layout of the screen where there is need to use and display more complex components (i.e. cards) as a list of options which users can select from.

Format

Theme=Light, State=Idle, Selected=FALSE
Theme=Light, State=Idle, Selected=TRUE
Theme=Dark, State=Idle, Selected=FALSE
Theme=Dark, State=Idle, Selected=TRUE

Label

Use short label to express what user selects. If there is a need to provide longer additional information use complementary text in combination of checkbox component. Additional information will give user full context on available selection options.

Group title

We don't specify how a title for a group of choices represented by more radio components should be formatted. Also the use of title for group of radios is optional. It should respect platform conventions when it's used though.

Modifiers

We have Radio prepared to be used in light and dark themed interfaces. Select appropriate theme accordingly.

Examples of use

You can use Radio in following or similar use cases:

  • Selection of subscription plan
  • Preference settings
  • App configuration

 

-> Specs in Figma