combo-box

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

Working examples:

Example usage:

<!-- HTML -->
<mi-combo-box id="combo-box">
        <combo-box-item value="Dog" text="Dog"></combo-box-item>
        <combo-box-item value="Cat" text="Cat"></combo-box-item>
        <combo-box-item value="Plane" text="Plane"></combo-box-item>
        <combo-box-item value="Home" text="Home"></combo-box-item>
</mi-combo-box>

    const comboBoxElement = document.getElementById('combo-box');

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

open attribute

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

items attribute

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

itemsOrder attribute

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

multiple attribute

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

noResultsMessage attribute

A noResultsMessage attribute is available on the <mi-combo-box> 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-combo-box> element, which can be used to get a list of selected HTMLMiDropdownItemElement items.

disabled attribute

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

change event

A change event is emitted from the <mi-combo-box> 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