Vuance UI Kit

Form input

Autocomplete

Search and select without mixing the query draft with committed values.

Playground

Configure the component and copy synchronized Vue code.

Interactive preview

Changes are reflected in the example and source.

Properties

Filter

Multiple

Clearable

Option slots

Vue

<m-autocomplete
  v-model="city"
  :items="cities"
  filter-mode="contains"
  clearable
  label="City"
/>

Token map

The manual manifest combines inherited token owners with local deltas.

MAutocomplete · All36 tokens
md-autocomplete

MAutocomplete API

Props, slots, and events are generated from the current public kit contract.

MAutocomplete

Field family
src/runtime/components/ui/autocomplete

Props

NameTypeDefault
disabledPrevents interaction and applies the disabled visual state.
booleanfalse
loadingReplaces content with progress feedback and prevents interaction.
booleanfalse
readonly
booleanfalse
variant
Extract<MTextFieldVariant, 'filled' | 'outlined'>'filled'
rounded
'sharp' | 'small' | 'medium' | 'large' | 'pill''small'
labelPlacement
'top' | 'float' | 'inset' | 'hidden''float'
path
stringundefined
name
stringundefined
label
stringundefined
placeholder
stringundefined
helperText
stringundefined
error
booleanfalse
errorMessage
stringundefined
required
booleanfalse
autofocus
booleanfalse
autocompleteBrowser autofill hint for the query input. Lives here, not in the shared dropdown props: the dropdown's field is `readonly`, so autofill can never write to it — only this typeable field can be autofilled. Defaults to `off` because filling free text into a box whose value must match an option would desync the model, but a consumer who knows their form may want it.
string'off'
density
'compact' | 'default' | 'comfortable''default' as MFieldDensity
itemsOptions. Every item carries its own `id`; that id is its identity.
readonly DropdownItemBase[]() => []
itemTitleRow text. Key or getter; defaults to the item's `label`.
DropdownRuntimeResolver<string>'label'
itemValueValue written to the model. Key or getter; defaults to the whole item.
DropdownRuntimeResolver<unknown>undefined
itemDisabledPer-item disabled guard. Key or getter; defaults to the item's `disabled`.
DropdownRuntimeResolver<boolean>'disabled'
valueComparatorValue equality. Defaults to comparing two objects by `id` and everything else by `===` — a refetched list is a new set of object references, and identity is the one thing an item is required to declare.
(left: never, right: never) => booleanundefined
multipleSelect more than one value; the model becomes an array.
booleanfalse
mandatoryKeep at least one value selected (the last one cannot be removed).
booleanfalse
maxUpper bound on the selection. `multiple` only — a single-select field cannot hold two values, so a limit there has nothing to limit.
numberundefined
clearableShow a control that empties the selection.
booleanfalse
menuPlacementWhere the panel opens relative to the field.
'top left' | 'top right' | 'bottom left' | 'bottom right' | 'center' | 'top' | 'bottom''top left'
maxHeightCap on the scrolling area of the panel. A number is read as `rem` (the kit's 1rem = 1px-of-the-mockup convention), a string is passed through. Defaults to the panel's own token so the list of a hundred options does not run off the screen. This is live geometry supplied at runtime, so it travels as a custom property — the one case the zero-runtime rule allows.
number | stringundefined
filterHow a row is matched against the query. A function decides per item; `false` shows everything, for a list the server already filtered.
false | ((item: never, query: string, title: string) => boolean)undefined
filterModeBuilt-in matching strategy, used when `filter` is not a function.
'contains' | 'starts-with''contains' as AutocompleteFilterMode
minSearchLengthCharacters required before anything is shown.
number0
hideSelectedDrop already-selected rows from the list instead of ticking them.
booleanfalse
autoSelectFirstPut the virtual focus on the first row as soon as the rows change.
booleanfalse
openOnFocusOpen the panel when the field takes focus.
booleantrue

Slots

Events

@selectTItem
@removeTItem
@clearvoid
@openvoid
@closevoid