Used a radio card allow the user to choose one of a set of options.
Radio cards can have an optional icon
1. With icon
2. Without icon
Usage
Use radio cards when a visual cue will help the user to easily recognize the option they need to select.
Where there are 8 or more options to choose from, consider using a select field instead to avoid overwhelming the user.
Writing radio cards
Content guidelines
Copy for individual inputs in radio cards are in bold for consistency, because they sit in a hierarchy below the group labels.
Only ask for information that is definitely needed, don’t mark fields as ‘required’, instead use ‘optional’.
Error
Error messages should appear above the input, and below the label and help text. These should be written in a concise, specific, way using plain language and without pleasantries.
Available platforms
|
Platform |
Available |
|---|---|
|
Figma |
v5+ |
|
Web (@ovotech/element) |
v4+ |
|
App (@ovotech/element-native) |
v4+ |
Related
External links