Guidelines
When to use
- Visually engaging options: When you want to present options in a visually appealing way, making it easier for users to understand and choose.
- Enhanced user interaction: When you need to improve user interaction with your form or interface by using engaging, card-based selections.
- Clear differentiation: When the options need to be clearly differentiated through images or icons, helping users quickly identify their choices.
When not to use
- Limited space: When screen space is limited, as cards can take up more room than standard Form elements.
- Many options: When there are too many options, which might make the interface cluttered and overwhelming.
- Text-only options: When the options are best presented as plain text without the need for icons or additional visuals.
Highlight & Clear Differentiation
Use for visually appealing, engaging options that are easy to differentiate extra content or images.
Text-Only Options
Don't use plain text only without additional content. Use the Checkbox or Radio button instead.
Card variants
Vertical
- Limited horizontal space: When the available width is constrained, such as on mobile devices or narrow side panels.
- Longer descriptions: When each option includes a lengthy description or additional text that requires more vertical space.
- Sequential reading: When users are likely to read through the options in a top-to-bottom order, making it easier to follow.
- Fewer options: When there are only a few options, allowing them to be displayed prominently without overwhelming the user.
Horizontal
- Wide layouts: When there is ample horizontal space, such as on desktop screens or wide form areas.
- Visual emphasis: When you want to emphasize each option equally across the screen, making them all immediately visible without scrolling.
- Compact information: When the information for each option is brief, allowing them to fit neatly side by side.
- Comparative choices: When users need to compare options directly, placing them next to each other for easy comparison.
Selection Card Group, Radio Buttons, or Checkbox Group
Choosing between a Radio Button Group or Checkbox Group and a Selection Card Group depends on the nature of the content, the complexity of choices, and the context of the interface.
Behavior
Mouse interactions
The only interaction with the Card Selection involves either activating or deactivating the selection.
Clicking the selector element triggers the activation/deactivation of the component.
Keyboard interactions
|
Key |
Interaction |
|---|---|
|
Tab |
Sets focus on the selectable element. |
|
Enter/Space |
Select or deselect the car. |
Content
Use concise, descriptive titles
Each card's title should clearly represent the option. Aim for 1–3 words.
✅ Standard room
✅ Deluxe suite
🚫 Option 1 / Click here to select
Use sentence case without punctuation in titles
✅ Card payment
🚫 Card Payment.
Keep descriptions simple and clear
Use brief descriptions to offer more details about the option.
✅ Standard room
A comfortable room with basic amenities.
🚫 Standard room
This is a standard room that includes a bed, bathroom, and other facilities.
Maintain consistent phrasing across cards
Ensure titles and descriptions follow the same grammatical structure for clarity.
✅ Credit card / Bank transfer / PayPal
🚫 Use credit card / Bank transfer is available / Pay with PayPal
Include relevant icons or images when helpful
Visuals can aid in quick recognition and enhance the user experience.