ba-radio-card
An enhanced radio button component with a description area for additional context, intended for use within ba-radio-group
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
Flight 1 details
Flight 2 details
Flight 3 details
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.
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:
Code
Properties & Attributes
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
label
(required)
|
label |
Text displayed next to the radio | "" |
undefined |
value
(required)
|
value |
The value of the radio | string |
undefined |
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.