ba-select

A form field for giving users a choice from a dropdown

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>

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

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

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>