Autocomplete

items is the list of suggestions, filtered as you type. A bare string or number is the shorthand for an option whose label and value match; the long form is { label, value } with an optional icon and disabled. { type: 'label' } and { type: 'divider' } entries group a long list. Unlike Combobox, the trigger here *is* the text field, so what you type filters in place rather than in a separate search box.

modelValue is the selected value — the option's value, not the text currently typed, and an array once multiple is set. Pass it to control the selection yourself; the typed query is the component's own business and isn't exposed through this model.

defaultValue is what's selected on first render while the field still owns its own state — a sensible starting suggestion you don't otherwise need to hold onto.

multiple lets more than one option be selected at once, and turns the selected set into removable tags inside the field. Each tag carries its own remove button; an item can still opt out of selection entirely with its own disabled flag.

placeholder is the hint in the field while nothing has been typed or selected. Say that typing filters — “Search a country” rather than “Country” — since this input behaves unlike the plain text fields around it.

icon sits at the start of the field while nothing is selected; an option carrying its own icon replaces it once chosen. It's a way to say what the field searches without spending a label on it.

disabled locks the whole input — the field stops accepting text and the dropdown stops opening. It's separate from a per-item disabled, which greys out one option while leaving the rest usable.

clearable shows a button to clear the current selection.

variant picks between the ringed outline field on the page background and the filled, ringless soft one, which has its own section below.

content positions the dropdown relative to the field: which side it opens on, how it aligns to the trigger, and how far off it sits.

open controls whether the suggestion list is showing. Pass it to drive the list from your own state and bind it with v-model:open so typing still opens it; omit it and the component manages that itself.

defaultOpen starts the suggestion list expanded on mount while leaving the open state uncontrolled — a way to show what's on offer before anyone types, at the cost of covering whatever sits below.

A filled, tinted background with no ring.