ba-sort

A form field for giving users a choice from a dropdown on how to sort displayed data

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

Where a natural order exists, follow it. For example:

Alphabetical: Lists of countries, names, etc
Numerical: Seat numbers, baggage counts, etc

If no clear ordering principle applies (e.g., different methods for downloading a boarding pass), consider:

Alphabetical ordering if no other logical sequence makes sense
Short, descriptive labels that clearly differentiate each option

Code

Properties & Attributes

Property	Attribute	Description	Type	Default
`value`	`value`	The value of the input	`string \| undefined`	`''`

Events

Event	Description	Type
`baBlur`	Emitted when the select loses focus.	`CustomEvent<void>`
`baChange`	Emitted when the value has changed.	`CustomEvent<SelectChangeEventDetail>`
`baFocus`	Emitted when the select has focus.	`CustomEvent<void>`

Slots

Slot	Description	Permitted elements
Unnamed slot	The sort options will be rendered here	`<option>`

Parent components

ba-sort can be slotted into:

<ba‑toolbar>

Usage

Basic usage

The first option will be selected if no prompt-text and value are set, and each option has a value. This will always pass required validation as value is set via the component internally.

Basic example with a range of options to select from.

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

See ba-toolbar for more usage examples.