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.
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.
Composable component
The Radio Card is set up as a composable component. It is used by replacing the layer ‘Card content’ for a locally created component. Optional elements like Radio Indicator, and Highlight will be kept available.
Please include any necessary padding in your local component (the default content uses 16px all around). 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.
Disabled state for customised content
Consider whether you need a disabled state for the Radio Card. Ideally we try to avoid disabled states, as they might lead to confusion and possible accessibility issues.
The disabled variant dims its content, using a 62.5%* opacity setting. In React this is done for all content that is passed into the Radio Card. In Figma, this only applies to the default content. If the Radio Card uses custom content in Figma, a disabled variant with the same opacity setting is required.
*62.5% opacity applied to text-grey on a white background matches the value of grey-50
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.
