ba-radio-card
An enhanced radio button component with a description area for additional context, intended for use within ba-radio-group
Airframe
Web Components
React
React Native
Must be used with ba-radio-group
This component should not be used on its own. Always use it within ba-radio-group to ensure correct spacing, layout, and enable validation messages when used with other radio options
Anatomy
Radio input
The interactive control that allows users to select the card
Content slot
The area for descriptive content that gives users the context needed to make an informed choice
Label
The text that clearly describes what the radio card option means
Card
The clickable container that groups the radio input, label, and content into a single selectable option
Design Documentation
Links, buttons, and other clickable elements (such as ba-link, ba-button and <a> ) can be nested inside the content slot, for example to link out to terms and conditions. Clicking one of these elements activates the element itself rather than changing the selected radio.
Use this sparingly and only where it's genuinely useful. Adding too many clickable elements makes the card harder to scan and increases the risk of users mis-tapping the card instead of the element (or vice versa). Where multiple clickable elements are used, leave enough space between them so each has a large enough, clearly separated tap target.
Live Demo
Flight 1 details
Flight 2 details
Flight 3 details
<ba-radio-group
legend="Pick an option"
hint-text="Some hint text to help select the right option"
name="name"
>
<ba-radio-card label="Flight 1" value="flight1">
<ba-content>
<p>Flight 1 details</p>
</ba-content>
</ba-radio-card>
<ba-radio-card label="Flight 2" value="flight2">
<ba-content>
<p>Flight 2 details</p>
</ba-content>
</ba-radio-card>
<ba-radio-card label="Flight 3" value="flight3">
<ba-content>
<p>Flight 3 details</p>
</ba-content>
</ba-radio-card>
</ba-radio-group>
Properties and attributes
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
icon(required) |
icon |
The name of the icon to show | string |
undefined |
label(required) |
label |
Text displayed next to the radio | "" |
undefined |
value(required) |
value |
The value of the radio | string |
undefined |
Permitted ARIA roles
- None
Slots
| Slot | Description | Permitted elements |
|---|---|---|
| Unnamed slot | Elements will render in the body of the component | <ba‑content>, <ba‑grid>, <ba‑image> |
Parent components
ba-radio-card can be slotted into:
Usage
See ba-radio-group for usage examples.
Guidelines
Always use the label attribute to give a meaningful label to the field.
Further reading:
Always add descriptive text in the body of ba-radio-card to provide users with the context needed for informed selections. This enhances clarity and supports accessibility by offering more information about each option.
If you require a radio button without a description, use the ba-radio component instead.
Interactive elements such as ba-link, ba-button, ba-accordion, ba-details, and ba-copy-to-clipboard can be placed in the content slot. Clicking or activating one of these elements only triggers its own behaviour and does not change the selected radio, avoiding the accessibility issues that come with nesting interactive elements inside one another.
Disabled form elements are not supported in BAgel because they create accessibility challenges, such as preventing keyboard navigation, confusing screen reader users, and reducing visual clarity for those with impairments
Further reading:
Keyboard navigation
State: Previous element in DOM has focus
Focus moves to the checked radio card or radio in the group, or the first radio card or radio if none are checked
State: <ba-radio-card> has focus
Selects the card if it is not already selected
Moves focus to and selects the previous radio card or radio in the group
Moves focus to and selects the next radio card or radio in the group
Moves focus to and selects the previous radio card or radio in the group
Moves focus to and selects the next radio card or radio in the group
Next tabbable element gets focus, including any clickable element nested in the content slot, or otherwise the next tabbable element outside the group
State: A clickable element (e.g. a link or button) nested in the content slot has focus
Activates the nested element without changing the selected radio
Usage and accessibility checklist
Use this checklist to confirm the component has been configured and used correctly.
UX checklist
- Use ba-radio-card within ba-radio-group when a single option can be selected and descriptive content is needed to give users more context about an option
- Use ba-radio instead of ba-radio-card when no extra description is required
- Descriptive content in the card body is clear and concise
- Clickable elements (such as links or buttons) are used sparingly in the content slot, and only where genuinely useful
Accessibility checklist
- A visible label is always provided
- Descriptive content is concise, as it is all read out at once to screen reader users
- If an icon is added, it does not convey information that isn't already available from the label
- Clickable elements nested in the content slot remain independently operable and do not change the selection when activated
- Where multiple clickable elements are nested in the content slot, each has a large enough, clearly separated tap target
- Focus indicator has not been obscured on all sides of the component and for all interactive elements within the card
These checks are handled by the component and do not need to be repeated each time it is used.
- ba-radio-card is operable using assistive technology
- Card is operable with keyboard using tab, arrow keys, and space
- Has a visible focus indicator on all sides of the radio input
- Colour contrast for all states in all BAgel themes
- Animations respect users' reduced motion settings
- High contrast mode adjustments