mi-dropdown

The <mi-dropdown> element can be used to display a list of options to choose from.

Working examples:

Example usage:

<!-- HTML -->

<mi-dropdown id="mi-dropdown" label="Buildings" filterable multiple>
  <mi-dropdown-item selected value="Lorem ipsum" text="Lorem ipsum"></mi-dropdown-item>
  <mi-dropdown-item selected value="Dolor sit" text="Dolor sit"></mi-dropdown-item>
  <mi-dropdown-item value="Amet Consectetur" text="Amet Consectetur"></mi-dropdown-item>
  <mi-dropdown-item value="Adipisicing elit" text="Adipisicing elit"></mi-dropdown-item>
  <mi-dropdown-item value="Labore vel" text="Labore vel"></mi-dropdown-item>
</mi-dropdown>
// JavaScript

const miDropdownElement = document.querySelector('mi-dropdown');

miDropdownElement.addEventListener('change', (event) => {
  const selectedValues = event.detail.map((item) => item.value);
  console.log(selectedValues);
})

open attribute

An open attribute is available on the <mi-dropdown> element, which can be used to expand the dropdown.

items attribute

A items attribute is available on the <mi-dropdown> element, which should be used to set the available options.

label attribute

A label attribute is available on the <mi-dropdown> element, which should be used to set the display label. The attribute is required when the multiple attribute is set.

filterable attribute

A filterable attribute is available on the <mi-dropdown> element, which can be set to true to render a search field.

multiple attribute

A multiple attribute is available on the <mi-dropdown> element, which can be set to true to render checkboxes.

selected attribute

A selected attribute is available on the <mi-dropdown> element, which can be used to get a list of selected HTMLMiDropdownItemElement items.

change event

A change event is emitted from the <mi-dropdown> element when the selection is changed.

Styling

On modern browsers, parts of the component style can be overriden using the CSS pseudo-element ::part().

The following parts are available for styling:

Styling Example

/* CSS */

mi-dropdown::part(button) {
    color: #fcfcfc;
    background: #3ba064;
}

Properties

Property Attribute Description Type Default
filterable filterable This attribute indicates that the items can be filtered using the input field present at the top. If it is not specified, the input field will not be visible, and filtering is not possible. boolean false
items -- Gets or sets the list items. any[] []
label (required) label The label will be displayed in as the text of the dropdown if the attribute multiple is present. Only required if multiple is present. string undefined
multiple multiple This attribute indicates that multiple items can be selected in the list. If it is not specified, then only one item can be selected at a time. boolean false
open open Gets or sets the state of the dropdown. If the attribute is set to true then the dropdown will be expanded. boolean false
selected -- Gets the selected items any[] undefined

Events

Event Description Type
change Triggers an event when the selection is changed. CustomEvent<any>