Combobox
Type to find one value, with async search.
Guidance
Comboboxes let people type to find one value in a long or remote list: an asset, an owner, a
glossary term. Typing filters the list (list autocomplete, manual selection) and emphasises the
matched text. Options come from slotted mm-option elements or from an async loader, which is
debounced by 150ms, aborts stale requests, shows a loading row only after 200ms and offers a retry
when it fails. With allow-custom, free text is accepted as the value.
Keyboard follows the WAI-ARIA editable combobox with list autocomplete pattern (https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list/): Down and Up open and move, Alt+Down opens without moving, Enter selects, Escape closes and then clears, Home and End move the caret.
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
value | value | string | '' | The selected value, or the typed text with allow-custom. |
valueLabel | value-label | string | '' | Label shown for the initial value when options come from a loader. |
allowCustom | allow-custom | boolean | false | Accept free text that matches no option. |
hideLabel | hide-label | boolean | false | Visually hide the label (it is still announced). |
Events
| Event | Detail | Description |
|---|---|---|
mm-change | CustomEvent<{ value: string }> | The value changed by user action. |
mm-input | CustomEvent<{ query: string }> | The typed text changed. |
change | Native-style change event. |
Slots
| Slot | Description |
|---|---|
| Default | mm-option and mm-option-group elements, when not using loader. |
CSS parts
| Part | Description |
|---|---|
control | The field box. |
input | The text input. |
popup | The floating panel. |
listbox | The listbox. |
Examples
Every state of mm-combobox in Storybook, with keyboard and screen reader tests.