ba-select

A form field for giving users a choice from a dropdown

Figma

GitHub

Storybook

Live Demo

Custom error message

<ba-select
    label="Select Label"
    hint-text="Help text for the field"
    name="name"
    prompt-text="Choose an item"
    required
  >
  <p slot="error">Custom error message</p>

  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
  <option value="4">Option 4</option>
  <option value="5">Option 5</option>
  <option value="6">Option 6</option>
  <option value="7">Option 7</option>
  <option value="8">Option 8</option>
  <option value="9">Option 9</option>
  <option value="10">Option 10</option>
</ba-select>

Guidelines

It is best to use the select component when you have 5 or more options for the user to select from. If you have fewer options to select from, try using ba-radio-group instead.

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:

Grouping options by category with <optgroup> elements for example, dividing meal preferences into Vegetarian, Non-Vegetarian, and Special Diet - helps users quickly scan and select the option that suits their needs
Alphabetical ordering if no other logical sequence makes sense
Short, descriptive labels that clearly differentiate each option

Accessibility

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

Code

Properties & Attributes

Property	Attribute	Description	Type	Default
`hintText`	`hint-text`	Hint text to show above the input	`string \| undefined`	`undefined`
`iconName`	`icon-name`	The name of the icon to show in the media slot. Will be overridden if there is content in the media slot.	`string \| undefined`	`undefined`
`invalid`	`invalid`	The name of the input	`boolean \| undefined`	`false`
`label`(required)	`label`	A label for the input	`string`	`undefined`
`name`	`name`	The name of the input	`string \| undefined`	`undefined`
`promptText`	`prompt-text`	Text for the default option	`string \| undefined`	`''`
`required`	`required`	Whether the input is required	`boolean \| undefined`	`false`
`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>`

Methods

`isValid() => Promise<boolean>`

An exposed method for triggering the inputs required validation

`reset() => Promise<void>`

Resets the input back to its initial value

Returns

Type: Promise<void>

Slots

Slot	Description	Permitted elements
Unnamed slot	The options for the select will be rendered here	`<option>`
`"error"`	Element will be rendered in the error slot	`<p>`
`"media"`	Show an image or icon before the text	`<ba‑image>`, `<img>`, `<svg>`

Parent components

ba-select can be slotted into:

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-select
    label="Select Label"
    hint-text="Help text for the field"
    name="name"
    required
  >
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
  <option value="4">Option 4</option>
  <option value="5">Option 5</option>
  <option value="6">Option 6</option>
  <option value="7">Option 7</option>
  <option value="8">Option 8</option>
  <option value="9">Option 9</option>
  <option value="10">Option 10</option>
</ba-select>

Setting prompt-text

When the prompt-text has been set this will be selected by the component on page load.
This will fail the required validation as no valid value as been selected.

Setting prompt-text

<ba-select
    label="Select Label"
    hint-text="Help text for the field"
    name="name"
    prompt-text="Choose an item"
    required
  >
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
  <option value="4">Option 4</option>
  <option value="5">Option 5</option>
  <option value="6">Option 6</option>
  <option value="7">Option 7</option>
  <option value="8">Option 8</option>
  <option value="9">Option 9</option>
  <option value="10">Option 10</option>
</ba-select>

Custom error

You can provide your own custom validation and error message using events, props and slots.

Custom validation and error message

<ba-select
    label="Select Label"
    hint-text="Help text for the field"
    name="name"
    prompt-text="Choose an item"
    required
  >
  <p slot="error">Custom error message</p>

  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
  <option value="4">Option 4</option>
  <option value="5">Option 5</option>
  <option value="6">Option 6</option>
  <option value="7">Option 7</option>
  <option value="8">Option 8</option>
  <option value="9">Option 9</option>
  <option value="10">Option 10</option>
</ba-select>

<script>
  const baSelect = document.querySelector('ba-select');
  baSelect.addEventListener('baChange', (e) => {
    const value = e.detail.value;

    // Do your custom validation here.
    //
    //
    // Then set the input to invalid
    baSelect.setAttribute('invalid')
  })
</script>

Showing an icon

There is an option to show an icon within the select component. Simply add the name of the icon you wish to present in the icon-name prop

Showing an icon within the select

<ba-select
    label="Select Label"
    hint-text="Help text for the field"
    name="name"
    required
    icon-name="add"
  >
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</ba-select>

Using the media slot

You can also use the media slot by using a svg, img or ba-image element

Using the media slot

<ba-select
    label="Select Label"
    hint-text="Help text for the field"
    name="name"
    required
    icon-name="add"
  >
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
  <ba-image slot="media" src="path-to-image"></ba-image>
</ba-select>

Dynamically setting the media slot

You can dynamically change the image based on the users selection

Dynamically changing the media

<ba-select
  label="Select Label"
  hint-text="Help text for the field"
  name="name"
  required
  prompt-text="Choose an item"
>
  <img src="visa.webp" alt="Visa" id="visa" slot="media" style="display: none;"/>
  <img src="mastercard.webp" alt="Mastercard" id="mastercard" slot="media" style="display: none;"/>
  <img src="american-express.webp" alt="American Express" id="amex" slot="media" style="display: none;"/>
  <img src="apple-pay.webp" alt="Apple Pay" id="apple" slot="media" style="display: none;"/>
  <img src="google-pay.webp" alt="Google Pay" id="google" slot="media" style="display: none;"/>

  <option value="visa">Visa</option>
  <option value="mastercard">Mastercard</option>
  <option value="amex">Amex</option>
  <option value="apple">Apple Pay</option>
  <option value="google">Google Pay</option>
</ba-select>

<script>
  (() => {
    let previousValue = '';
    document.addEventListener('baChange', (event) => {
      const paymentType = event.detail.value;

      if (previousValue !== '') {
        const previousElement = document.getElementById(previousValue);
        previousElement.style.display = 'none';
      }

      if (paymentType !== '') {
        const element = document.getElementById(paymentType);
        element.style.display = 'block';
        previousValue = paymentType;
      }
    })
  })()
</script>