Combobox

Combobox info coming soon

Usage

With Combobox, you can allow a user to create new values that may not be present in a provided items list.

API

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

Components.Combobox.

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

Components.Combobox.

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

Components.Combobox.

Name
attach
Default
false
Type
any

Components.Combobox.

Name
auto-select-first
Default
false
Type
boolean

Components.Combobox.

Name
autofocus
Default
false
Type
boolean

Components.Combobox.

Name
background-color
Default
undefined
Type
string

Components.Combobox.

Name
box
Default
false
Type
boolean

Components.Combobox.

Name
browser-autocomplete
Default
'off'
Type
string

Components.Combobox.

Name
cache-items
Default
false
Type
boolean

Components.Combobox.

Name
chips
Default
false
Type
boolean

Components.Combobox.

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

Components.Combobox.

Name
clearable
Default
false
Type
boolean

Components.Combobox.

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.Combobox.

Name
dark
Default
false
Type
boolean

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

Name
deletable-chips
Default
false
Type
boolean

Components.Combobox.

Name
dense
Default
false
Type
boolean

Components.Combobox.

Name
disabled
Default
false
Type
boolean

Components.Combobox.

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

Components.Combobox.

Name
error
Default
false
Type
boolean

Components.Combobox.

Name
error-count
Default
1
Type
number | string

Components.Combobox.

Name
error-messages
Default
[]
Type
string | array

Components.Combobox.

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

Components.Combobox.

Name
flat
Default
false
Type
boolean

Components.Combobox.

Name
full-width
Default
false
Type
boolean

Components.Combobox.

Name
height
Default
undefined
Type
number | string

Components.Combobox.

Name
hide-details
Default
false
Type
boolean

Components.Combobox.

Name
hide-no-data
Default
false
Type
boolean

Components.Combobox.

Name
hide-selected
Default
false
Type
boolean

Components.Combobox.

Name
hint
Default
undefined
Type
string

Components.Combobox.

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

Components.Combobox.

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

Components.Combobox.

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

Components.Combobox.

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

Components.Combobox.

Name
items
Default
[]
Type
array

Components.Combobox.

Name
label
Default
undefined
Type
string

Components.Combobox.

Name
light
Default
false
Type
boolean

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

Name
loading
Default
false
Type
boolean | string

Components.Combobox.

Name
mask
Default
undefined
Type
object | string

Components.Combobox.

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

Components.Combobox.

Name
messages
Default
[]
Type
string | array

Components.Combobox.

Name
multiple
Default
false
Type
boolean

Components.Combobox.

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

Components.Combobox.

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

Components.Combobox.

Name
open-on-clear
Default
false
Type
boolean

Components.Combobox.

Name
outline
Default
false
Type
boolean

Components.Combobox.

Name
persistent-hint
Default
false
Type
boolean

Components.Combobox.

Name
placeholder
Default
undefined
Type
string

Components.Combobox.

Name
prefix
Default
undefined
Type
string

Components.Combobox.

Name
prepend-icon
Default
undefined
Type
string

Components.Combobox.

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

Components.Combobox.

Name
readonly
Default
false
Type
boolean

Components.Combobox.

Name
return-masked-value
Default
false
Type
boolean

Components.Combobox.

Name
return-object
Default
true
Type
boolean

Components.Combobox.

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

Components.Combobox.

Name
rules
Default
[]
Type
array

Components.Combobox.

Name
search-input
Default
undefined
Type
any

Components.Combobox.

Name
single-line
Default
false
Type
boolean

Components.Combobox.

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

Components.Combobox.

Name
solo
Default
false
Type
boolean

Components.Combobox.

Name
solo-inverted
Default
false
Type
boolean

Components.Combobox.

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

Components.Combobox.

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

Components.Combobox.

Name
suffix
Default
undefined
Type
string

Components.Combobox.

Name
type
Default
'text'
Type
string

Components.Combobox.

Name
validate-on-blur
Default
false
Type
boolean

Components.Combobox.

Name
value
Default
undefined
Type
any

Components.Combobox.

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

Components.Combobox.

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

No data with chips

In this example we utilize a custom no-data slot to provide context to the user when searching / creating items.

Advanced custom options

The v-combobox improves upon the added functionality from v-select and v-autocomplete. This provides you with an expansive interface to create truly customized implementations. This example takes advantage of some more advanced features such as a custom filter algorithm, inline list editing and dynamic input items.

Multiple combobox

Previously known as tags - user is allowed to enter more than 1 value

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