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
Selection Card Groups can be applied to options with Checkboxes or Radio Buttons. In the case of Checkboxes, any combination of the options can be selected by the user. In the case of Radio Buttons, only one of the options listed can be selected. Keep this in mind when framing the content for each of the selectable items.
Do
- Use sentence case for all text within the Selection Card Groups.
- Keep Titles short and scannable.
- Use descriptions to offer more context to the selection.
Do not
- Use punctuation in the Titles.
- Only use Titles. If only the Title is necessary, use a Radio Button group or Checkbox group instead.