Vue Multi Select Component API

Allow users to create options if they are not in the list of options.

Names a chip's remove button with the selected option's label: a string has {label} replaced by it, or gets it appended when there is no {label} ("Remove Angular"); a function receives the label and returns the whole name.

A string that provides an accessible label for the cleaner button. This label is read by screen readers to describe the action associated with the button.

A string that provides an accessible label for the indicator button. This label is read by screen readers to describe the action associated with the button.

Announced after a value is removed through its chip, Backspace or the cleaner. A string follows the removed labels (Angular removed); a function receives them and returns the whole message. A pick in the list is not announced, since the option says it is selected.

Accessible label for the search input (when search is enabled).

Accessible label prefix for a chip's remove button. While it is set, it takes precedence over ariaChipRemoveLabel.

Use ariaChipRemoveLabel instead.

Enables selection cleaner element.

Clear current search on selecting an item.

Appends the dropdown to a specific element. You can pass an HTML element or function that returns a single element. Inside a modal dialog it goes into the dialog instead, because the rest of the page is inert.

The initial selection for the uncontrolled mode — matched against the option values. Ignored when value is set.

Sets the select all button label shown once everything is selected. The button is a toggle: it shows selectAllLabel (and selects all) until everything is selected, then shows deselectAllLabel (and deselects all).

Sets the deselect filtered button label (used with selectAllMode="filtered").

Toggle the disabled state for the component.

Provide valuable, actionable feedback.

Provide valuable, actionable feedback.

Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, :invalid and :valid.

Renders a floating label inside the field — the component wraps its frame in .form-floating and the text also becomes the field's accessible name.

Keeps the floating label floated and the placeholder visible while the field is empty.

Routes typing to the search box from anywhere in the component, so a keystroke never depends on where the focus sits. Set to false to keep it local: the search box then filters only while it has the focus, and typing over the options list jumps to the first option that starts with what was typed, except with search="external", where the list holds only the last results. Needs search.

Hide the dropdown header with the built-in select all button when a search filter leaves no matching options. Set to false to keep the select all button visible even when there are no results.

Set the id attribute for the native select element.

Sets option style.

Mark the control invalid.

Use validationState="invalid" instead — invalid is ignored when validationState is set.

Add a caption for a component.

When set, the options list is marked busy and shows a row with a spinner and loadingLabel below its options while you fetch them; the options it shows can still be picked.

Text of the loading row below the options, announced to screen readers when the shown list starts loading or the list shows up loading.

It specifies that multiple options can be selected at once.

Name of the native select the selection is submitted under. Without it the selection is not submitted with the form.

List of option elements.

Makes each options group label a toggle that selects or deselects the group's visible options. With indicator="checkbox" (and multiple) the label shows a tri-state checkbox indicator (none / all / indeterminate) reflecting the group's selection.

Sets maxHeight of options list.

The button that opens the options menu. Set to false to render no button; replace the artwork through the pickerIcon slot.

-

When it is present, it indicates that the user must choose a value before submitting the form.

Empties the selection when the options bring different values, then takes the options marked selected (or the defaultValue values among them), up to selectionLimit; with value set it only requests the empty selection through the change event. For options that depend on another field, so outdated picks do not travel on.

Renders a search box in the control. true filters the options as the user types; 'external' hands the filtering to your code: the component shows the options you pass and reports what the user types through filter-change.

Sets the label for no results when filtering.

Enables select all button.

Sets the select all button label.

Determines what the select all button operates on: all options ('all') or only the currently filtered (search-visible) options ('filtered').

Sets the counter selection label: a function (count, total) => string, or a string in which {count} and {total} are replaced. total is the number of options in the list, disabled ones, the ones inside a group and the ones the user created included, so a disabled option shows that not everything is selected, plus any selected value the options lack, so it never falls below count, unless total gives a number of its own.

Sets the select filtered button label (used with selectAllMode="filtered").

Sets the maximum number of options that can be selected. The select all button stays enabled and selects options up to the limit, then toggles to deselect all once the limit is reached. The selectionLimit event fires when a user tries to select more options than allowed.

Sets the selection style. chips renders the selection as chips; tags is a deprecated name for chips (since 6.0.0).

Control the open state of the dropdown panel. When set, the panel renders what show says and dismiss gestures only emit update:show — nothing closes until the parent flips the prop. Supports the v-model:show binding.

Size the component small or large.

Generates dropdown menu using Teleport: into the open <dialog> the field sits in, otherwise into body.

Add helper text to the component.

Display validation feedback in a styled tooltip.

Sets {total} of selectedLabel. Leave it out to count the options in the list; with external search give the number of records your data source holds, which the component cannot see.

Mark the control valid.

Use validationState="valid" instead — valid is ignored when validationState is set.

The validation state, rendered as the is-{state} class; 'invalid' also sets aria-invalid. Any custom state declared in the $form-validation-states Sass map is accepted.

The controlled selection — matched against the option values. Pair it with the change event; for the uncontrolled mode use defaultValue instead.

Enable virtual scroller for the options list.

Toggle the visibility of multi select dropdown.

Use show / v-model:show instead — visible is ignored when show is set.

Amount of visible items when virtualScroller is set to true.

Execute a function when the user or the component changes the selection: a pick, a native reset of the form, or resetSelectionOnOptionsChange. A selection you give through value, defaultValue or options marked selected does not fire it, unless resetSelectionOnOptionsChange replaced the selection with it. With value set it is a request.

• selected Option[]

Execute a function when the filter value changed.

The callback is fired when the dropdown requests to be hidden.

Execute a function when the user tries to select more options than allowed by selectionLimit.

The callback is fired when the dropdown requests to be shown.

Emit the requested open state to support the v-model:show binding — a dismiss gesture (Escape, outside click) or any internal toggle.

Emitted with undefined when the user changes the selection, or the form is reset, while validationState (or invalid/valid) is set, to support the v-model:validation-state binding. A given state is a verdict on the selection it was given for.