ba-filter-checkbox

A checkbox filter component

Figma

GitHub

Storybook

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

ba-filter

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>

Guidelines

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.

Accessibility

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

Code

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

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:

<ba‑filter>

Usage

See ba-toolbar for usage examples.