mi-dropdown

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

Working examples:

Lorem ipsum Dolor sit Amet Consectetur Adipisicing elit Labore vel

Example usage:

<!-- HTML -->
<mi-dropdown style="margin-bottom: 16px;" items-order="asc">
    <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 Amet Consectetur Amet Consectetur Amet"></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>

<!--With item icons-->
<mi-dropdown label="Lorem ipsum" filterable multiple items-order="asc" open>
    <mi-dropdown-item selected value="Lorem ipsum">Lorem ipsum<img src="https://fonts.gstatic.com/s/i/materialiconsoutlined/account_circle/v16/24px.svg" height="16" /></mi-dropdown-item>
    <mi-dropdown-item selected value="Dolor sit"><img src="https://fonts.gstatic.com/s/i/materialiconsoutlined/face/v15/24px.svg" height="16" />Dolor sit</mi-dropdown-item>
    <mi-dropdown-item value="Amet Consectetur"><img src="https://fonts.gstatic.com/s/i/materialiconsoutlined/settings/v18/24px.svg" height="16" />Amet Consectetur</mi-dropdown-item>
    <mi-dropdown-item value="Adipisicing elit"><img src="https://fonts.gstatic.com/s/i/materialiconsoutlined/pets/v12/24px.svg" height="16" />Adipisicing elit</mi-dropdown-item>
    <mi-dropdown-item value="Labore vel">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.

itemsOrder attribute

A itemsOrder attribute is available on the <mi-dropdown> element, which can be set to asc or desc to sort the value of the items attribute.

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.

noResultsMessage attribute

A noResultsMessage attribute is available on the <mi-dropdown> element, which should be used to set the message when no items are available to be displayed in the content window. The default is No results found.

selected attribute

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

icon attribute

An icon attribute is available on the <mi-dropdown> element, which is used to render an icon on the left side of the component. No icon is rendered by default.

iconAlt attribute

An iconAlt attribute is available on the <mi-dropdown> element, which should be used to set the alternative text for the image to increase accessibility.

disabled attribute

An disabled attribute is available on the <mi-dropdown> element, which can be used to set the dropdown as disabled (unusable and unclickable).

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:

• button: Styles the button.
• button-icon: Styles the icon on the left-hand side.
• button-label: Styles the textual content inside the button.
• icon-down-arrow: Styles the SVG icon on the right-hand side.
• dropdown-container: Styles the container in which the contents are.

Styling Example

/* CSS */

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

Properties

Events

Shadow Parts