Web components to implement a select dropdown menu. <dile-select> implements a interface to select one single value. <dile-select-multiple> implements a interface to select multiple values in a list.

npm i dile-select

<script type="module">
  import 'dile-select/dile-select.js';
</script>

<dile-select label="Favorite fruit:" value="pear" class="custom" placeholder="Select a fruit" @dile-select-changed="${this.selectChanged}">
  <dile-select-item value="kiwi">Kiwi fruit</dile-select-item>
  <dile-select-item value="pear">Pear</dile-select-item>
  <dile-select-item value="apple">Apple</dile-select-item>
  <dile-select-item value="orange">Orange</dile-select-item>
  <dile-select-item value="passion_fruit">True passion fruit</dile-select-item>
</dile-select>

<script type="module">
  import 'dile-select/dile-select-multiple.js';
</script>

<dile-select-multiple placeholder="Select at least 1" label="Favorite cars">
  <dile-select-multiple-item value="general-motors">General Motors</dile-select-multiple-item>
  <dile-select-multiple-item value="volkswagen">Volkswagen</dile-select-multiple-item>
  <dile-select-multiple-item value="toyota">Toyota</dile-select-multiple-item>
  <dile-select-multiple-item value="fiat">Fiat</dile-select-multiple-item>
  <dile-select-multiple-item value="renault">Renault</dile-select-multiple-item>
</dile-select-multiple>

• value (String): Stores the value of the selected item. Also Useful for the component initialization.
• uninitialized: When the component initializes, it takes the first option value as default. If uninitialized property is set to true, then the element do not initialize with any value.

• value (Array): Stores the values of the selected items (array of strings). Also Useful for the component initialization.
• labelNumItem: For configure the selected text message. Something like "fruits selected" will show a message "3 fruits selected" when the user has selected 3 diferent options.
• uninitialized: Even the component has this property, it is unuseful in multiple select components, because there is not a default initialization, only the one you can apply with the value array property.

• name: Name for the component. So, you can know which element element is related when a changed event is received.
• opened: This defines the component open / close state. the default placeholder is 'Select'.
• selectedText: Stores the innerText of the current selected option.
• label: A label for the element.
• placeholder: Placeholder. Appears when there isn't a selected element.
• errored: Display select in a error state

• selectItem(value): this method is useful to select a item programaticaly. You should pass the string option value.
• open(): Opens the dropdown menu.
• close(): Closes the dropdown menu.

• dile-select-changed: dispatched when the select element changes it's current value. This custom event gives some useful data in the detail property.

CSS custom properties defined on <dile-select>:

The component <dile-select-multiple> has the same CSS custom properties than <dile-select>, and also: