ba-radio
A basic radio button component with a label, 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 option
Label
The text that clearly describes what the radio option means
Design Documentation
When no extra description is needed to help the user make a choice, use ba-radio to keep the list of options simple and easy to scan.
If you need to give users more context about an option, use ba-radio-card instead.
ba-radio only allows a single option to be selected from a group. If more than one option can be selected, use ba-checkbox instead.
Live Demo
<ba-radio-group
legend="Pick an option"
hint-text="Some hint text to help select the right option"
name="name"
>
<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>
</ba-radio-group>
Properties and attributes
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
label(required) |
label |
Text displayed next to the radio | string |
undefined |
value(required) |
value |
The value of the radio | string |
undefined |
Permitted ARIA roles
- None
Slots
No slotted content available for this component.
Parent components
ba-radio 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:
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: <ba-radio> 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
Usage and accessibility checklist
Use this checklist to confirm the component has been configured and used correctly.
UX checklist
- Use ba-radio within ba-radio-group when only one option can be selected from a group and no extra description is needed
- Use ba-radio-card instead of ba-radio when descriptive content is needed to give users more context about an option
- Label text is clear, concise, and helps users make an informed choice
Accessibility checklist
- A visible label is always provided
- Disabled state is only used when interaction is intentionally unavailable
- Radio 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 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