Status
The status of the component
NOT CODED
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, for 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 (small variant) or descriptions (for the large variant)
Small vs Large variant
The selector card has 2 diferent variants, below you can find when to use one vs the other.
Do
Use small selector cards if they are part of a bigger form in the same page.
Do
Use large selector cards for 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 is able to multi-select.
Content
Small
On its small 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
Large
On its large variant, the selector card label should not contain more than two lines of text, and its description should not contain more that 3 lines of text.
Related Components & Patterns