ba-filter
A wrapper component for displaying a filter
Airframe
Web Components
React
React Native
Must be used with ba-toolbar
This component should not be used on its own. Always use it within ba-toolbar to ensure correct spacing and layout
Anatomy
Filter toggle
The interactive button that displays the filter's label, a count of any selected options, and a chevron icon, and opens or closes the dropdown panel
Dropdown panel
The panel that reveals the filter's options, such as ba-filter-checkbox or ba-filter-radio, when the toggle is activated
Design Documentation
A ba-filter should only contain one type of filter option at a time. Use ba-filter-checkbox when more than one option can be selected, or ba-filter-radio when only one option can be selected from the group.
The label attribute should describe what the filter options relate to, for example "Outbound airport" or "Stops", so users can quickly scan and find the filter they need.
Live Demo
<ba-toolbar>
<ba-filter label="Outbound airport" slot="filters">
<ba-filter-checkbox name="londonHeathrow" label="London Heathrow (LHR)" value="1"></ba-filter-checkbox>
<ba-filter-checkbox name="londonGatwick" label="London Gatwick (LGW)" value="2"></ba-filter-checkbox>
</ba-filter>
</ba-toolbar>Properties and attributes
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
label(required) |
label |
The label of the filter | string |
undefined |
value |
value |
Concatenated value of all selected filters | string | undefined |
'' |
Permitted ARIA roles
- None
Slots
| Slot | Description | Permitted elements |
|---|---|---|
| Unnamed slot | Elements will render in the body of the component | <ba‑filter‑checkbox>, <ba‑filter‑radio> |
Parent components
ba-filter can be slotted into:
Methods
| Method | Description | Type |
|---|---|---|
removeSelectedFilters(filterName: string) => Promise<void> |
Removes the selected filters. | Promise<void> |
reset() => Promise<void> |
Resets all the filters in the filter. | Promise<void> |
setSelectedFilter(filterName: string, filterValue: string, filterLabel: string) => Promise<void> |
Sets the selected filters. | Promise<void> |
setSelectedRadioFilter(filterName: string, filterValue: string, filterLabel: string, emit?: boolean) => Promise<void> |
Sets the selected radio filter. | Promise<void> |
Usage
ba-filter should always be used within ba-toolbar to ensure correct spacing and layout.
Basic usage
Add ba-filter-checkbox children to allow more than one option to be selected.
<ba-toolbar>
<ba-filter label="Outbound airport" slot="filters">
<ba-filter-checkbox name="londonHeathrow" label="London Heathrow (LHR)" value="1"></ba-filter-checkbox>
<ba-filter-checkbox name="londonGatwick" label="London Gatwick (LGW)" value="2"></ba-filter-checkbox>
</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
<button> in shadow DOM (the filter toggle) gets focus
State: <button> in shadow DOM (the filter toggle) has focus
Opens the dropdown panel
Opens the dropdown panel
State: <button> in shadow DOM (the filter toggle) has focus and the dropdown panel is closed
Next tabbable element outside of the filter gets focus
State: <button> in shadow DOM (the filter toggle) has focus and the dropdown panel is open
First tabbable element inside the dropdown panel gets focus
State: Last tabbable element inside the open dropdown panel has focus
Next tabbable element outside of the filter gets focus
Usage and accessibility checklist
Use this checklist to confirm the component has been configured and used correctly.
UX checklist
- ba-filter is always used within ba-toolbar to ensure correct spacing and layout on both mobile and desktop
- ba-filter is not used on its own outside of ba-toolbar
- Contains either ba-filter-checkbox children, when more than one option can be selected, or ba-filter-radio children, when only one option can be selected, not a mix of both
- Label clearly identifies what the filter options relate to, for example "Outbound airport"
Accessibility checklist
- A visible label is always provided using the label attribute
- ba-filter is operable with keyboard using tab to focus, and enter or space to open the dropdown
- 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 is operable using assistive technology
- Open and closed states are available to assistive technology via aria-expanded
- 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