ba-filter-radio
A radio filter component
Airframe
Web Components
React
React Native
Must be used with ba-filter
This component should not be used on its own. Always use it within ba-filter to ensure correct spacing and layout
Anatomy
Parent filter toggle
The ba-filter toggle button, shown here for context, displaying the filter's label and the selected option
Radio option
Each ba-filter-radio displays a radio input and its label. Selecting one option automatically deselects any other option in the group
Design Documentation
This component is for when only one item at a time can be selected. If you need multi select, use ba-filter-checkbox instead.
Live Demo
<ba-toolbar>
<ba-filter label="Stops" slot="filters">
<ba-filter-radio label="Any number of stops" value="0"></ba-filter-radio>
<ba-filter-radio label="Direct only" value="1"></ba-filter-radio>
<ba-filter-radio label="2 stops or fewer" value="2"></ba-filter-radio>
</ba-filter>
</ba-toolbar>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
| Slot | Description | Permitted elements |
|---|---|---|
| Unnamed slot | Elements will render in the body of the component | <ba‑star‑rating> |
Parent components
ba-filter-radio can be slotted into:
Methods
| Method | Description | Type |
|---|---|---|
reset() => Promise<void> |
Resets the input. | Promise<void> |
update(value: string) => Promise<void> |
Updates the input with the passed value. | Promise<void> |
Usage
ba-filter-radio should always be used within ba-filter to ensure correct spacing and layout.
Basic usage
Use two or more ba-filter-radio elements within a ba-filter to allow only one option to be selected.
<ba-toolbar>
<ba-filter label="Stops" slot="filters">
<ba-filter-radio label="Any number of stops" value="0"></ba-filter-radio>
<ba-filter-radio label="Direct only" value="1"></ba-filter-radio>
<ba-filter-radio label="2 stops or fewer" value="2"></ba-filter-radio>
</ba-filter>
</ba-toolbar>Guidelines
Always use the label attribute to give a meaningful label to the field.
Further reading:
Keyboard navigation
State: Previous element in DOM has focus
Focus moves to the checked ba-filter-radio, or the first ba-filter-radio in the group if none are checked
State: <ba-filter-radio> has focus
Selects the radio if it is not already selected
Moves focus to and selects the previous ba-filter-radio in the group
Moves focus to and selects the next ba-filter-radio in the group
Next tabbable element in the DOM gets focus
Usage and accessibility checklist
Use this checklist to confirm the component has been configured and used correctly.
UX checklist
- ba-filter-radio is always used within ba-filter
- Use ba-filter-radio when only one option can be selected from the group
- Use ba-filter-checkbox instead when more than one option can be selected
- Label text is clear, concise, and helps users make an informed choice
Accessibility checklist
- A visible label is always provided
- ba-filter-radio is operable with keyboard using tab to focus, and arrow keys or space to select
- 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-filter-radio is operable using assistive technology
- Checked state is available to 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