ba-radio-group
A container component for grouping multiple ba-radio and ba-radio-card components into a single form field, providing users with a clear choice of options
Airframe
Web Components
React
React Native
Anatomy
Legend
Clearly labels the group of options so users understand what they are choosing between
Hint text (optional)
Provides supporting context or instructions to help users make a choice
Options
The list of ba-radio or ba-radio-card components that make up the group, only one of which can be selected
Design Documentation
Positioning ba-radio components after ba-radio-card components helps maintain a clear visual hierarchy, guiding users from options with more detailed descriptions to simpler choices. This layout improves usability and ensures a logical flow in the selection process.
Live Demo
Flight 1 details
Flight 2 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 label="Flight 3" value="flight3"></ba-radio>
<ba-radio label="Flight 4" value="flight4"></ba-radio>
</ba-radio-group>
Properties and attributes
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
hintText |
hint-text |
Text to display between the legend and the radios | string | undefined |
'' |
invalid |
invalid |
Set the radio group to invalid state | boolean | undefined |
false |
layout1024vw |
layout-1024vw |
Controls the direction the radio buttons go. | "grid-2" | "grid-3" | "horizontal" | "vertical" | undefined |
'vertical' |
legend(required) |
legend |
Sets the radio group legend which will fill the fieldset legend | string |
undefined |
name(required) |
name |
Input name to be applied to all radio children | string |
undefined |
required |
required |
Set to trigger the is required validation | boolean | undefined |
false |
value |
value |
the value of the radio group. | string | undefined |
'' |
visuallyHiddenLegend |
visually-hidden-legend |
Sets the radio group visually hidden text which can be read out by screen readers to give added context on what the radio buttons will do |
string | undefined |
undefined |
Permitted ARIA roles
- None
Slots
| Slot | Description | Permitted elements |
|---|---|---|
| Unnamed slot | ba-radio components will be rendered here | <ba‑radio>, <ba‑radio‑card> |
"error" |
Element will be rendered in the error slot | <p> |
Parent components
ba-radio-group can be slotted into:
<ba‑grid><ba‑form‑group‑dropdown><ba‑form‑group><ba‑form><ba‑flex><ba‑details><ba‑card‑segmented><ba‑card><ba‑accordion>
Events
| Event | Description | Type |
|---|---|---|
baChange |
Emitted when the value gets updated. | CustomEvent<RadioGroupChangeEventDetail> |
Methods
| Method | Description | Type |
|---|---|---|
isValid() => Promise<boolean> |
An exposed method for triggering the inputs required validation. | Promise<boolean> |
reset() => Promise<void> |
An exposed method for resetting the radio group to its default state. | Promise<void> |
Usage
In most scenarios, you will use ba-radio-group to group multiple ba-radio or ba-radio-card components together. This allows users to select a single option from a list of choices.
Basic usage
<ba-radio-group
legend="Pick an option"
name="groupName"
required
>
<ba-radio label="Flight 1" value="flight1"></ba-radio>
<ba-radio label="Flight 2" value="flight2"></ba-radio>
<ba-radio label="Flight 3" value="flight3"></ba-radio>
<p slot="error">Custom required error message</p>
</ba-radio-group>Using ba-radio-card
<ba-radio-group
legend="Pick an option"
name="groupName"
>
<ba-radio-card label="Flight 1" value="flight1">
<ba-content>
<p>Flight 1 description</p>
</ba-content>
</ba-radio-card>
<ba-radio-card label="Flight 2" value="flight2">
<ba-content>
<p>Flight 2 description</p>
</ba-content>
</ba-radio-card>
<ba-radio-card label="Flight 3" value="flight3">
<ba-content>
<p>Flight 3 description</p>
</ba-content>
</ba-radio-card>
</ba-radio-group>Mixing ba-radio and ba-radio-card
In some cases, you may want to mix ba-radio and ba-radio-card components within the same ba-radio-group. This can be useful when you want to provide users with a mix of simple and detailed options.
<ba-radio-group
legend="Pick an option"
name="groupName"
>
<ba-radio-card label="Flight 1" value="flight1">
<ba-content>
<p>Flight 1 description</p>
</ba-content>
</ba-radio-card>
<ba-radio-card label="Flight 2" value="flight2">
<ba-content>
<p>Flight 2 description</p>
</ba-content>
</ba-radio-card>
<ba-radio label="Flight 3" value="flight3"></ba-radio>
<ba-radio label="Flight 4" value="flight4"></ba-radio>
</ba-radio-group>Showing an icon within ba-radio-card
An icon can be shown between the input and the label.
<ba-radio-group
legend="Pick an option"
name="groupName"
>
<ba-radio-card label="Flight 1" value="flight1" icon="arriving">
<ba-content>
<p>Flight 1 description</p>
</ba-content>
</ba-radio-card>
</ba-radio-group>Use visually-hidden-legend to make form changes predictable
A common pattern in forms is to change the UI depending on the selections users make or the data users enter. Providing some hidden text alongside the form element informs the user what will happen in response to their action.
Further reading:
<ba-radio-group legend="Search by airport or flight number" visually-hidden-legend="Changing this value will update the fields available in this form">
<ba-radio>
<span slot="label">Airport</span>
</ba-radio>
<ba-radio>
<span slot="label">Flight number</span>
</ba-radio>
<div aria-live="polite">
<!-- Dynamically added/removed form inputs -->
</div>
</ba-radio-group>Error messages
BAgel provides a translated required error message, however it is sometimes useful to add custom validation messages. For example you may wish to:
- Add additional translations
- Provide more detail and/or contextual advice
- Add links to further information on the error
<ba-radio-group legend="Search by airport or flight number" required>
<!-- Place ba-radio's and ba-radio-card's here -->
<p slot="error">Custom error message</p>
</ba-radio-group>Guidelines
The legend text helps users of assistive technologies understand that this component is a group of related form fields.
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 or radio card in the group, or the first radio or radio card if none are checked
State: A radio or radio card in the group has focus
Moves focus to and selects the previous radio or radio card in the group
Moves focus to and selects the next radio or radio card in the group
Moves focus to and selects the previous radio or radio card in the group
Moves focus to and selects the next radio or radio card in the group
Next tabbable element outside the group gets focus, including any nested clickable elements or the error slot
Usage and accessibility checklist
Use this checklist to confirm the component has been configured and used correctly.
UX checklist
- ba-radio-group is used when a single option must be selected from a list of choices
- ba-radio components are placed after ba-radio-card components when used in the same ba-radio-group
- Legend text is clear and concise, and describes the choice being made
- Use visually-hidden-legend to prewarn users of UI changes that happen when the value changes
Accessibility checklist
- A visible legend is always provided
- Disabled state is not used; disabled form elements are not supported in BAgel
- Group is operable with keyboard using tab to focus and arrow keys to change selection
- Focus indicator has not been obscured on all sides of the component
These checks are handled by the component and do not need to be repeated each time it is used.
- ba-radio-group is operable using assistive technology
- Has a visible focus indicator on all sides of the component
- Colour contrast for all states in all BAgel themes
- Animations respect users' reduced motion settings
- High contrast mode adjustments