Form input
Autocomplete
Search and select without mixing the query draft with committed values.Anatomy
The dropdown's parts, with the field accepting text.
- 1
Field
An MTextField that takes input: the query is typed where the value is shown.
- 2
Chips
In `multiple` mode, one removable chip per selected value, in front of the query.
- 3
Clear and arrow
Clear appears only when there is something to clear; the arrow is decorative.
- 4
Panel
A teleported menu holding the listbox, width-matched to the field and capped by `maxHeight`.
- 5
Rows
Rows with `role="option"`. The keyboard highlight is virtual focus, so the caret stays in the field.
Interactive configuration
Type into the field with each filter mode and switch to multiple selection. The query is a draft: blur or Escape puts it back, and only a picked row changes the value.
Contains or starts-with
`contains` finds “york” inside New York; `starts-with` keeps long lists predictable when people type from the beginning, as with codes.
Multiple
Selected values become chips in front of the query, and the list stays open for the next pick.
Clearable
Clears the selection and the query in one action, and hides itself when there is nothing to clear.
Custom rows
The `#item` slot replaces a row's body — an avatar, a second line — while role, selection and keyboard behaviour stay with the component.
Variations
The same component across the configurations you will actually reach for — single and multiple selection, async loading, prefix filtering, and the plain bordered variant.
Selected: none · Search: empty
Selected: Vue
Typing flips :loading while results resolve.
filter-mode="starts-with" matches only the beginning of each option.
The outlined variant: the border carries the boundary, so it holds up inside cards and dialogs.
A rounded, placeholder-only search box via the rounded prop.
States
The field keeps the dropdown's states; the panel adds what a query brings.
Idle
The field shows the selected title or the placeholder.
Filtering
The panel lists the rows the query leaves standing. `minSearchLength` keeps the rows back until enough characters are typed.
No matches
The panel stays open with the empty state — `#empty`, "No options" by default — so the user sees the query ran.
Error wins
The field takes the error role, also while focused, and the support line carries the message.
In context
The component is shown in a working composition built from public kit primitives.