Autocomplete

The v-autocomplete component offers simple and flexible type-ahead functionality. This is useful when searching large sets of data or even dynamically requesting information from an API.

Usage

The autocomplete component extends v-select and adds the ability to filter items.

API

props
slots
scoped Slots
events
v-autocomplete
Name
allow-overflow
Default
true
Type
boolean

Components.Autocompletes.

Name
append-icon
Default
'$vuetify.icons.dropdown'
Type
string

Components.Autocompletes.

Name
append-outer-icon New in — v1.1
Default
undefined
Type
string

Components.Autocompletes.

Name
attach
Default
false
Type
any

Components.Autocompletes.

Name
auto-select-first
Default
false
Type
boolean

Components.Autocompletes.

Name
autofocus
Default
false
Type
boolean

Components.Autocompletes.

Name
background-color
Default
undefined
Type
string

Components.Autocompletes.

Name
box
Default
false
Type
boolean

Components.Autocompletes.

Name
browser-autocomplete
Default
'off'
Type
string

Components.Autocompletes.

Name
cache-items
Default
false
Type
boolean

Components.Autocompletes.

Name
chips
Default
false
Type
boolean

Components.Autocompletes.

Name
clear-icon
Default
'$vuetify.icons.clear'
Type
string

Components.Autocompletes.

Name
clearable
Default
false
Type
boolean

Components.Autocompletes.

Name
color
Default
'primary'
Type
string

コンポーネントに色を設定します。この色は、定義されている色の名前（例えばsuccessやpurple）や、CSSの色指定（#033やrgba(255, 0, 0, 0.5)）を設定できます。

Name
counter
Default
undefined
Type
boolean | number | string

Components.Autocompletes.

Name
dark
Default
false
Type
boolean

ダークテーマを適用します。

Name
deletable-chips
Default
false
Type
boolean

Components.Autocompletes.

Name
dense
Default
false
Type
boolean

Components.Autocompletes.

Name
disabled
Default
false
Type
boolean

Components.Autocompletes.

Name
dont-fill-mask-blanks
Default
false
Type
boolean

Components.Autocompletes.

Name
error
Default
false
Type
boolean

Components.Autocompletes.

Name
error-count
Default
1
Type
number | string

Components.Autocompletes.

Name
error-messages
Default
[]
Type
string | array

Components.Autocompletes.

Name
filter
Default
(item: object, queryText: string, itemText: string) => boolean
Type
function

Components.Autocompletes.

Name
flat
Default
false
Type
boolean

Components.Autocompletes.

Name
full-width
Default
false
Type
boolean

Components.Autocompletes.

Name
height
Default
undefined
Type
number | string

Components.Autocompletes.

Name
hide-details
Default
false
Type
boolean

Components.Autocompletes.

Name
hide-no-data
Default
false
Type
boolean

Components.Autocompletes.

Name
hide-selected
Default
false
Type
boolean

Components.Autocompletes.

Name
hint
Default
undefined
Type
string

Components.Autocompletes.

Name
item-avatar
Default
avatar
Type
string | array | function

Components.Autocompletes.

Name
item-disabled
Default
disabled
Type
string | array | function

Components.Autocompletes.

Name
item-text
Default
text
Type
string | array | function

Components.Autocompletes.

Name
item-value
Default
value
Type
string | array | function

Components.Autocompletes.

Name
items
Default
[]
Type
array

Components.Autocompletes.

Name
label
Default
undefined
Type
string

Components.Autocompletes.

Name
light
Default
false
Type
boolean

ライトテーマを適用します。

Name
loading
Default
false
Type
boolean | string

Components.Autocompletes.

Name
mask
Default
undefined
Type
object | string

Components.Autocompletes.

Name
menu-props New in — v1.2
Default
{"closeOnClick":false, "closeOnContentClick":false, "openOnClick":false, "maxHeight":300}
Type
string | array | object

Components.Autocompletes.

Name
messages
Default
[]
Type
string | array

Components.Autocompletes.

Name
multiple
Default
false
Type
boolean

Components.Autocompletes.

Name
no-data-text
Default
'$vuetify.noDataText'
Type
string

Components.Autocompletes.

Name
no-filter New in — v1.1
Default
false
Type
boolean

Components.Autocompletes.

Name
open-on-clear
Default
false
Type
boolean

Components.Autocompletes.

Name
outline
Default
false
Type
boolean

Components.Autocompletes.

Name
persistent-hint
Default
false
Type
boolean

Components.Autocompletes.

Name
placeholder
Default
undefined
Type
string

Components.Autocompletes.

Name
prefix
Default
undefined
Type
string

Components.Autocompletes.

Name
prepend-icon
Default
undefined
Type
string

Components.Autocompletes.

Name
prepend-inner-icon New in — v1.1
Default
undefined
Type
string

Components.Autocompletes.

Name
readonly
Default
false
Type
boolean

Components.Autocompletes.

Name
return-masked-value
Default
false
Type
boolean

Components.Autocompletes.

Name
return-object
Default
false
Type
boolean

Components.Autocompletes.

Name
reverse New in — v1.1
Default
false
Type
boolean

Components.Autocompletes.

Name
rules
Default
[]
Type
array

Components.Autocompletes.

Name
search-input
Default
undefined
Type
any

Components.Autocompletes.

Name
single-line
Default
false
Type
boolean

Components.Autocompletes.

Name
small-chips New in — v1.1
Default
false
Type
boolean

Components.Autocompletes.

Name
solo
Default
false
Type
boolean

Components.Autocompletes.

Name
solo-inverted
Default
false
Type
boolean

Components.Autocompletes.

Name
success New in — v1.1
Default
false
Type
boolean

Components.Autocompletes.

Name
success-messages New in — v1.1
Default
[]
Type
string | array

Components.Autocompletes.

Name
suffix
Default
undefined
Type
string

Components.Autocompletes.

Name
type
Default
'text'
Type
string

Components.Autocompletes.

Name
validate-on-blur
Default
false
Type
boolean

Components.Autocompletes.

Name
value
Default
undefined
Type
any

Components.Autocompletes.

Name
value-comparator
Default
(a: any, b: any) => boolean
Type
function

Components.Autocompletes.

Supplemental

Mask legend
MaskDescription
Masks
#Any digit
AAny capital letter
aAny small letter
NAny capital alphanumeric character
nAny small alphanumeric character
XAny special symbol (-!$%^&*()_+|~=`{}[]:";'<>?,./\) or space
Pre-made
credit-card#### - #### - #### - ####
date-with-time##/##/#### ##:##
phone(###) ### - ####
social###-##-####
time##:##
time-with-seconds##:##:##

Examples

Searching an API

Easily hook up dynamic data and create a unique experience. The v-autocomplete's expansive prop list makes it easy to fine tune every aspect of the input.

Scoped slots

With the power of scoped slots, you can customize the visual output of the select. In this example we add a profile picture for both the chips and list items.

Custom filter on autocomplete

The filter prop can be used to filter each individual item with custom logic. In this example we filter items by name

Asynchronous items

Sometimes you need to load data externally based upon a search query. Use the search-input prop with the .sync modifier when using the autocomplete prop. We also make use of the new cache-items prop. This will keep a unique list of all items that have been passed to the items prop and is REQUIRED when using asynchronous items and the multiple prop.

Advanced slots

The v-autocomplete component is extremely flexible and can fit in just about any use-case. Create custom displays for no-data, item and selection slots to provide a unique user experience. Using scoped slots enables you to easily customize the desired look for your application.

Edit this page | language on Github
 — Contribution Guide
Vuetify 3 is now available!The latest version of Vuetify is now available!
Learn about Vuetify 3's new features and functionality for modern Vue applications
Start exploringExplore