Radio Card - Usage
Basic Guidelines
- As a best practice, one Radio Card is already selected by default. It is recommend to use the most desired or frequently selected option as the default.
- In some situations it is acceptable to not provide a default selection, for example when the user is required to actively select one option, or if a preselection would be presumptuous or alienating.
Copy
- The list of options should be structured in a logical order, from simplest operation to most complex, or least risk to most.
- Options should be comprehensive and clearly distinct, using unambiguous vocabulary and context.
- Consider adding Alt text if the image illustrates important information. More information on when and how to use alt text can be found in Foundations.
Set up in Figma
The Radio Card is set up as a composable component. It is used by replacing the content placeholder by a locally created component. Optional elements like Radio Indicator, Highlight and Trim will be kept available.
Please include any necessary padding in your local component. If you are using an image that sits flush to the edges of the card, the corner radius needs to be set to 4px.
To learn more about how composable components are used in Figma, please have a look at the Designer Quickstart.
Behaviour
- Clicking an unselected Radio Card will deselect whatever other Radio Card was previously selected from the list.
- The user may be unable to submit the form, if no item has been selected. Error variants are available to indicate a necessary selection.
Clickable area
The entire face of a Radio Card is click/tap-able. Because of this, the component cannot contain any links within the copy due to accessibility reasons. The user needs to be able to tab through the options without the interference which comes from additional links.
If you need to provide an additional link, please consider an alternative component or place them separately above or below the Radio Cards.
Variants Usage
Radio Indicator
The Radio Indicator is an optional element, and can be turned off if there is not enough space for it. However, it’s recommended keep it in for best practice. Having an easily recognised Radio Indicator allows the user to quickly understand which card is selected and which is not, especially when there are only two options.
Error handling
The error variant is only necessary in the rare case when there is no default selection provided and the form can’t be submitted without the user having made a choice. In case of an error, all Radio Cards change their state accordingly to indicate a necessary selection.
Any required error message will be displayed using the separate Validation component in Figma, and the Control Field in React.
Alignment
We recommend a 16px gap when stacking multiple Radio Cards, to allow enough room for the shadow to show between cards.
Radio Cards must align with the grid system set out in Foundations. They sit in-line with the rest of the text.
In a 12-column grid layout, Radio Card can sit side-by-side within the six centre columns of the grid, in-line with the rest of the text. The example below is downscaled proportionally for illustration purposes.
