<le-select>

The simplest dropdown component in the library.

Basically it replaces the default HTML <select> element. It is in the library to provide the theming support, a normal HTML select cannot provide.

If you need more capabilities, consider using one of the other components we have:

• <le-combobox> — basically a text input with a dropdown with filtered options
• <le-multiselect> — selecting multiple items from a dropdown

What's new?

A missing feature was typeahead capabilities. Now you can start typing to select the closest match. le-select is keeping track of the whole keystroke, and not just the last character. You can try and find your country in this example, after the select opens or gets focused.

Note: focusing <le-select> does not open the virtual keyboard on mobile devices, for search capabilities on mobile, please use <le-combobox> component.

Properties / Attributes

@options

The options property accepts the items that should be available in the dropdown.

1. In case it is used with a JS frawork that supports passing data as properties, it can be passed as an array of objects

<le-select placeholder="Select a country" options={countriesList} />

2. When using with plain HTML, the options should be passed as a JSON string.

<le-select placeholder="Select a country" options='[{"value":"AF","label":"Afghanistan"},{"value":"AL","label":"Albania"},{"value":"DZ","label":"Algeria"},{"value":"AD","label":"Andorra"},{"value":"AO","label":"Angola"}]'></le-select>

3. Alternatively, options can be provided via <le-item> children. See below

@value

Currently selected value. Can be used to set the initial value of the select or to read the current value.

<le-select disabled placeholder="Select a country" options=[{"value":"AF","label":"Afghanistan"},{"value":"AL","label":"Albania"},{"value":"DZ","label":"Algeria"},{"value":"AD","label":"Andorra"},{"value":"AO","label":"Angola"}] />

@placeholder

Placeholder text to show when no value is selected.

You can see examples of placeholder usage in the previous examples.

@disabled

Disables the select when the attribute is present (HTML) or is set to true (frameworks).

<le-select disabled placeholder="Select a country" options=[{"value":"AF","label":"Afghanistan"},{"value":"AL","label":"Albania"},{"value":"DZ","label":"Algeria"},{"value":"AD","label":"Andorra"},{"value":"AO","label":"Angola"}] />

@name

Name of the select, used when submitting a form.

If the name is set, the component is creating a hidden input with the same name and the current value, so it works with form submissions.

<le-select name="country" placeholder="Select a country" options=[{"value":"AF","label":"Afghanistan"},{"value":"AL","label":"Albania"},{"value":"DZ","label":"Algeria"},{"value":"AD","label":"Andorra"},{"value":"AO","label":"Angola"}] />

@size

Since <le-select> is based on <le-button>, it supports the same size options:

• small
• medium (default)
• large

<le-select size="small" placeholder="Select a small country" options=[{"value":"AF","label":"Afghanistan"},{"value":"AL","label":"Albania"},{"value":"DZ","label":"Algeria"},{"value":"AD","label":"Andorra"},{"value":"AO","label":"Angola"}] />
<le-select size="medium" placeholder="Select a medium country" options=[{"value":"AG","label":"Antigua and Barbuda"},{"value":"AR","label":"Argentina"},{"value":"AM","label":"Armenia"},{"value":"AU","label":"Australia"},{"value":"AT","label":"Austria"}] />
<le-select size="large" placeholder="Select a large country" options=[{"value":"AZ","label":"Azerbaijan"},{"value":"BS","label":"Bahamas"},{"value":"BH","label":"Bahrain"},{"value":"BD","label":"Bangladesh"},{"value":"BB","label":"Barbados"}] />

Slots

No slots are available for <le-select>.

Any content placed inside will be hidden, except for the options provided via the <le-item> children. See below

Events

Event documentation for le-select.

leChange

Fired when the selected value changes.

The event detail contains the new value, and the option element that was selected:

import type { LeOption } from "le-kit";

event.detail: {
  value: string;
  option: LeOption;
};

Important is that the event is named leChange (not just change) to avoid conflicts with the native change event of the hidden input. It is possible, that in the future that will be changed, to create components more compatible with native form behavior.

const select = document.getElementById("le-change-select");
select.addEventListener("leChange", (event) => {
  alert(`Selected value: ${event.detail.value}`);
});

Currently, you can subscribe to the event using the attribute only from frameworks, that support HTML Custom Components natively:

<le-select onLeChange="alert(`Selected value: ${event.detail.value}`)" placeholder="..." options="..."></le-select>

leOpen

Fired when the dropdown opens. Used internally for now.

leClose

Fired when the dropdown closes. Used internally for now.

Children

Using with plain HTML, there are two ways to provide options: via the options attribute or by using <le-item> children.

Here's an example of using <le-item> children to provide options:

<le-select placeholder="Select a country">
  <le-item value="usa">United States</le-item>
  <le-item value="canada">Canada</le-item>
  <le-item value="mexico">Mexico</le-item>
</le-select>