ba-filter

A wrapper component for displaying a filter

Figma

GitHub

Storybook

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

ba-toolbar

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>

Accessibility

Always use the label attribute to give a meaningful label to the field.

Code

Properties & 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`	`''`

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:

<ba‑toolbar>

Usage

See ba-toolbar for usage examples.