Status
The status of the component
Ready for use!
Figma component
A link to the Figma library where the component lives.
Documentation link
A connected documentation page in Supernova
Usage Guidelines
Selector card vs checkbox or radio inputs
A selector card is used similarly to a checkbox or a radio input, but selector cards can fit more information and context within the option, when a simple label in a radio is not enough or doesn't give enough emphasis.
Do
Use selector cards when the radio inputs require more context, like an icon or a description.
Don't
Avoid using selector cards without icons for the (simple variant) or descriptions (for the descriptive variant)
Simple vs Descriptive variant
The selector card has 2 different variants, below you can find when to use one vs the other.
Do
Use simple selector cards if they are part of a bigger form on the same page.
Do
Use descriptive selector cards when they are a stand-alone thing or part of a multi-step form.
Behavior
Stacking
The selector cards are stacked horizontally, leaving a gap of spacing-2xs(12px) between them
Multi-select
The selector cards function as radio inputs (allowing to only select one option) or checkboxes (Allowing to select multiple options).
You must always inform the user when the Selector Card cluster can multi-select.
Content
Simple
On its simple variant, the selector card label should not contain more than two lines of text, its content should use sentence casing and describe the option the user is selecting:
Do
Be direct with the user, ideally, the label should only contain the option that the user is selecting.
Don't
Avoid mixing sentences with single-word options
Descriptive
On its descriptive variant, the selector card label should not contain more than two lines of text, and its description should not contain more than 3 lines of text.
Related Components & Patterns