Multiselect

Pick several values, shown as removable tags.

pii finance certified

<mm-multiselect name="tags" label="Tags" value="pii,finance" placeholder="Add tags">
  <mm-option value="pii">pii</mm-option>
  <mm-option value="finance">finance</mm-option>
  <mm-option value="certified">certified</mm-option>
</mm-multiselect>

Guidance

Multiselects pick several values, such as tags (pii, finance, certified), owners or providers for a filter. Chosen values sit inside the field as removable tags (sunken, radius-sm, like mm-tag); after max-tags the rest collapse to “+3” until the field has focus. Each value submits as its own FormData entry under the same name, like a native <select multiple>. Options can come from slotted mm-option elements or an async loader.

Keyboard follows the WAI-ARIA editable combobox pattern with a multi-selectable listbox: Down and Up open and move, Enter toggles the highlighted option and keeps the list open, Escape closes and then clears the text, Backspace in an empty field removes the last value. Left arrow from the start of the field moves through the tags; Backspace or Delete removes the focused tag.

Properties

Property	Attribute	Type	Default	Description
value	value	string[]	[]	The selected values. As an attribute, a comma-separated list.
maxTags	max-tags	number	3	Tags shown before the rest collapse to “+N” (all show while the field has focus).
hideLabel	hide-label	boolean	false	Visually hide the label (it is still announced).

Events

Event	Detail	Description
mm-change	CustomEvent<{ value: string[] }>	The values 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.
tag	Each value tag.
input	The text input.
popup	The floating panel.
listbox	The listbox.

Examples

Every state of mm-multiselect in Storybook, with keyboard and screen reader tests.