Vue Combobox Component API

A string that provides an accessible name for the search field.

The caret drawn at the end of the toggle. Pass false to draw none.

The element the panel is rendered into instead of document.body. Implies portal. Inside a modal dialog it goes into the dialog instead, because the rest of the page is inert.

The initial visibility of the panel, when it is not controlled through show.

The initially selected values, when the selection is not controlled through value.

Turns the control off: the panel never opens and the list box is disabled with it.

Feedback for the current validationState — rendered only while the state is set, and styled after it. For the client-side mode, where the browser owns the state, use feedbackValid and feedbackInvalid instead.

Feedback the stylesheet reveals while the control is invalid — always rendered, so it works with client-side validation, where the browser decides the state.

Feedback the stylesheet reveals while the control is valid — always rendered, so it works with client-side validation, where the browser decides the state.

Renders a checkbox in every option, so a multiple selection reads as a list of checkboxes.

The options to render. Each entry is passed to the default slot as item, so the slot works as the option template; without a slot every entry renders as a <CListBoxOption> showing its label.

Toggles options instead of replacing the selection, and keeps the panel open.

Name of the hidden select the value is submitted under. With multiple it posts one key per value, as a <select multiple> does: tags=a&tags=b&tags=c. Without a name the combobox is not submitted with the form.

Text shown in the toggle while nothing is selected. It carries .combobox-placeholder while it stands for an empty value.

Renders the panel through a portal: into the open <dialog> the field sits in, otherwise into document.body.

Makes the hidden select that carries the value required, so an empty combobox blocks the submit.

Puts a search field at the top of the panel. true filters the list itself; 'external' filters nothing and reports every keystroke through the search event instead.

Compares both sides of the filter without their diacritics, so zoe matches Zoë.

Placeholder of the search field.

What the toggle shows past one selected option in the multiple mode. A function (count, total) => string, or a string in which {count} and {total} are replaced.

The number of options the selection stops at, in the multiple mode.

The visibility of the panel. Supports the v-model:show binding.

Size the toggle the way a text input of the same size is sized.

Display validation feedback in a styled tooltip.

Move the highlight to the option matching what the user types. The buffer resets after 500 ms.

The validation state, rendered as the is-{state} class on the toggle, with the feedback message in its aria-describedby; 'invalid' also blocks the submit. Any custom state declared in the $form-validation-states Sass map is accepted. The user's next pick of a different value emits update:validationState with undefined.

The selected values. When set, the component renders that selection and only reports the user's changes through the change event. Supports the v-model:value binding.

Callback fired when the selection changes. The value is an array in the multiple mode, a string or null otherwise.

• value union

Callback fired when the panel has been closed.

Callback fired when the search field changes. In the 'external' search mode it is the only report the component makes — nothing is filtered here.

• query string

Callback fired when selectionLimit refuses a pick, with the limit and the value that did not fit.

• limit number
• value string

Callback fired when the panel has been opened.

Emit the visibility of the panel to support the v-model:show binding.

Event occurs with undefined when the user picks a different value, or the form is reset, while validationState is set. A given state is a verdict on the value it was given for; bind it with v-model:validation-state to drop it and let the browser's own validation show again.

Emit the selected value to support the v-model:value binding.