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
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>
Accessibility
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:
Code
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 |
Slots
No slotted content available for this component.
Parent components
ba-radio can be slotted into:
Usage
See ba-radio-group for usage examples.