All filters should be wrapped within ba-toolbar. This allows the filters to display correctly on both mobile and desktop.
If you have any supporting text below the filters and above the filtered content. For example We found 3 results for you make sure to add role="status" as this will allow screen readers to announce any changes to text when the filtered content is updated
Code
Properties & Attributes
This component does not have any properties or attributes.
Events
| Event | Description | Type |
|---|---|---|
baFilterSelected |
Emitted when a filter is toggled | CustomEvent<{ [nameOfFilter: string]: { [nameOfFilterValue: string]: string; }; }> |
Slots
| Slot | Description | Permitted elements |
|---|---|---|
"filters" |
Elements will render in the filters slot | <ba‑filter> |
"sort" |
Elements will render in the sort slot | <ba‑sort> |
Parent components
ba-toolbar can be slotted into:
Usage
Basic usage
<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-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-sort slot="sort">
<option value="recommended">Recommended</option>
<option value="price">Price (Low to high)</option>
<option value="rating">Rating (High to low)</option>
</ba-sort>
</ba-toolbar>
With ba-star-rating
<ba-toolbar>
<ba-filter label="Customer rating" slot="filters">
<ba-filter-radio value="4" label="and up">
<ba-star-rating rating="4" size="16"></ba-star-rating>
</ba-filter-radio>
<ba-filter-radio value="3" label="and up">
<ba-star-rating rating="3" size="16"></ba-star-rating>
</ba-filter-radio>
<ba-filter-radio value="2" label="and up">
<ba-star-rating rating="2" size="16"></ba-star-rating>
</ba-filter-radio>
</ba-filter>
<ba-filter label="Hotel rating" slot="filters">
<ba-filter-checkbox value="4" name="4">
<ba-star-rating rating="4" size="12"></ba-star-rating>
</ba-filter-checkbox>
<ba-filter-checkbox value="3" name="3">
<ba-star-rating rating="3" size="12"></ba-star-rating>
</ba-filter-checkbox>
<ba-filter-checkbox value="2" name="2">
<ba-star-rating rating="2" size="16"></ba-star-rating>
</ba-filter-checkbox>
</ba-filter>
<ba-sort slot="sort">
<option value="recommended">Recommended</option>
<option value="price">Price (Low to high)</option>
<option value="rating">Rating (High to low)</option>
</ba-sort>
</ba-toolbar>