ba-filter-checkbox
A checkbox 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 number of currently selected checkboxes
Checkbox option
Each ba-filter-checkbox displays a checkbox input and its label, and updates the selected count when toggled
Reset filter
The reset button, provided by the parent ba-filter, that clears all selected checkboxes
Design Documentation
This component is for when one, none, or multiple options can be selected. If only one item at a time can be selected, use ba-filter-radio instead.
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 |
|---|---|---|---|---|
checked |
checked |
Whether the filter-checkbox is checked | boolean | undefined |
undefined |
label(required) |
label |
The label of the filter-checkbox | string |
undefined |
name(required) |
name |
The name of the filter | string |
undefined |
value(required) |
value |
The value of the filter-checkbox | 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-checkbox can be slotted into:
Methods
| Method | Description | Type |
|---|---|---|
reset() => Promise<void> |
Resets the checkbox to its initial state. | Promise<void> |
Usage
ba-filter-checkbox should always be used within ba-filter to ensure correct spacing and layout.
Basic usage
Use two or more ba-filter-checkbox elements within a ba-filter 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
<ba-filter-checkbox> gets focus
State: <ba-filter-checkbox> has focus
Toggles the checked state and updates the parent ba-filter's selected count
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-checkbox is always used within ba-filter
- Use ba-filter-checkbox when one, none, or multiple options can be selected from the group
- Use ba-filter-radio instead when only one option can be selected from the group
- Label text is clear, concise, and helps users make an informed choice
Accessibility checklist
- A visible label is always provided
- ba-filter-checkbox is operable with keyboard using tab to focus and space to toggle
- 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-checkbox 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