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

v-combobox
Name
allow-overflow
Default
true
Type
boolean
Name
append-icon
Default
'$vuetify.icons.dropdown'
Type
string

Appends an icon to the component, uses the same syntax as v-icon

Name
append-icon-cb
Default
null
Type
function

Callback for appended icon when clicked

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

Appends an icon to the outside of v-text-field's input, uses same syntax as v-icon

New in — v1.1
Name
append-outer-icon-cb
Default
null
Type
function

Callback for appended outer icon when clicked

Name
attach
Default
false
Type
any

Mixins.Detachable.props.attach

Name
autofocus
Default
false
Type
boolean

Enables autofocus

Name
background-color
Default
undefined
Type
string

Changes the background-color of the input

Name
box
Default
false
Type
boolean

Applies the alternate box input style

Name
browser-autocomplete
Default
'off'
Type
string

Configures the default <input> autocomplete attribute

Name
cache-items
Default
false
Type
boolean

Keeps a local unique copy of all items that have been passed through the items prop.

Name
chips
Default
false
Type
boolean

Changes display of selections to chips

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

Applied when using clearable and the input is dirty

Name
clear-icon-cb
Default
null
Type
function

Callback for clear icon when clicked

Name
clearable
Default
false
Type
boolean

Add input clear functionality, default icon is Material Icons clear

Name
color
Default
'primary'
Type
string

Applies specified color to the control - it can be the name of material color (for example success or purple) or css color (#033 or rgba(255, 0, 0, 0.5))

Name
counter
Default
undefined
Type
boolean | number | string

Creates counter for input length; if no number is specified, it defaults to 25. Does not apply any validation.

Name
dark
Default
false
Type
boolean

Applies the dark theme variant

Name
deletable-chips
Default
false
Type
boolean

Adds a remove icon to selected chips

Name
dense
Default
false
Type
boolean

Lowers max height of list items

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

Disables the automatic character display when typing

Name
error
Default
false
Type
boolean

Puts the input in a manual error state

Name
error-count
Default
1
Type
number | string

The total number of errors that should display at once

Name
error-messages
Default
[]
Type
string | array

Puts the input in an error state and passes through custom error messsages. Will be combined with any validations that occur from the rules prop. This field will not trigger validation

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

Mixins.Soloable.props.flat

Name
full-width
Default
false
Type
boolean

Desginates input type as full-width

Name
height
Default
undefined
Type
number | string

Sets the component height

Name
hide-details
Default
false
Type
boolean

Hides hint, validation errors

Name
hide-no-data
Default
false
Type
boolean
Name
hide-selected
Default
false
Type
boolean

Do not display in the select menu items that are already selected

Name
hint
Default
undefined
Type
string

Hint text

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

Set property of items's avatar value

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

Set property of items's disabled value

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

Set property of items's text value

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

Set property of items's value

Name
items
Default
[]
Type
array

Can be an array of objects or array of strings. When using objects, will look for a text and value field. This can be changed using the item-text and item-value props.

Name
label
Default
undefined
Type
string

Sets input label

Name
light
Default
false
Type
boolean

Applies the light theme variant

Name
loading
Default
false
Type
boolean | string

Displays linear progress bar. Can either be a String which specifies which color is applied to the progress bar (any material color or theme color - primary, secondary, success, info, warning, error) or a Boolean which uses the component color (set by color prop - if it's supported by the component) or the primary color

Name
mask
Default
undefined
Type
object | string

Apply a custom character mask to the input. See mask table below for more information

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

Pass props through to the v-menu component. Accepts either a string for boolean props menu-props="auto, overflowY", or an object :menu-props="{ auto: true, overflowY: true }"

Name
messages
Default
[]
Type
string | array

Displays a list of messages or message if using a string

Name
multiple
Default
false
Type
boolean

Changes select to multiple. Accepts array for value

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

Display text when there is no data

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

When using the clearable prop, once cleared, the select menu will either open or stay open, depending on the current state

Name
outline
Default
false
Type
boolean

Applies the outline style to the input

Name
persistent-hint
Default
false
Type
boolean

Forces hint to always be visible

Name
placeholder
Default
undefined
Type
string

Sets the input’s placeholder text

Name
prefix
Default
undefined
Type
string

Displays prefix text

Name
prepend-icon
Default
undefined
Type
string

Prepends an icon to the component, uses the same syntax as v-icon

Name
prepend-icon-cb
Default
null
Type
function

Callback for prepended icon when clicked

New in — v1.1
Name
prepend-inner-icon
Default
undefined
Type
string
New in — v1.1
Name
prepend-inner-icon-cb
Default
null
Type
function
Name
readonly
Default
false
Type
boolean
Name
return-masked-value
Default
false
Type
boolean

Returns the unmodified masked string

Name
return-object
Default
true
Type
boolean

Changes the selection behavior to return the object directly rather than the value specified with item-value

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

Reverses the input orientation

Name
rules
Default
[]
Type
array

Accepts an array of functions that return either True or a String with an error message

Name
search-input
Default
undefined
Type
any

Bound when using the autocomplete prop. Use the .sync modifier to catch user input from the autocomplete search input

Name
single-line
Default
false
Type
boolean

Label does not move on focus/dirty

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

Changes display of selections to chips with the small property

Name
solo
Default
false
Type
boolean

Mixins.Soloable.props.solo

Name
solo-inverted
Default
false
Type
boolean

Mixins.Soloable.props.soloInverted

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

Puts the input in a manual success state

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

Puts the input in a success state and passes through custom success messsages.

Name
suffix
Default
undefined
Type
string

Displays suffix text

Name
type
Default
'text'
Type
string

Sets input type

Name
validate-on-blur
Default
false
Type
boolean

Delays validation until blur event

Name
value
Default
undefined
Type
any

Input value

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

Apply a custom value comparator function

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 optionsNew in v1.1

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