ba-toolbar

A wrapper component for displaying multiple filters

GitHub

Storybook

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-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>

Guidelines

All filters should be wrapped within ba-toolbar. This allows the filters to display correctly on both mobile and desktop.

Accessibility

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

Basic example with some filters

<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

Basic example using the filters 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>