Component

ba-filter-radio

A radio filter component

Airframe

Active

Figma

Web Components

Active

Storybook

Github

React

Planned

React Native

Planned

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="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-toolbar>

Guidelines

This component is for when only one item at a time can be selected. If you need multi select, use ba-filter-checkbox instead.

Accessibility

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

Code

Properties and Attributes

Property	Attribute	Description	Type	Default
`label`(required)	`label`	Text displayed next to the radio	`string`	`undefined`
`value`(required)	`value`	The value of the radio	`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-radio can be slotted into:

<ba‑filter>

Usage

See ba-toolbar for usage examples.