The v-combobox component is a v-autocomplete that allows the user to enter values that do not exist within the provided items. Created items will be returned as strings.
With Combobox, you can allow a user to create new values that may not be present in a provided items list.
As the Combobox allows user input, it always returns the full value provided to it (for example a list of Objects will always return an Object when selected). This is because there's no way to tell if a value is supposed to be user input or an object lookup GitHub Issue
The auto property of menu-props is only supported for the default input style.
Browser autocomplete is set to off by default, may vary by browser and may be ignored. MDN
Select your desired component from below and see the available props, slots, events and functions.
Allow the menu to overflow off the screen
Appends an icon to the component, uses the same syntax as v-icon
Appends an icon to the outside the component's input, uses same syntax as v-icon
Specifies which DOM element that this component should detach to. String can be any valid querySelector and Object can be any valid Node. This will attach to the root v-app component by default.
When searching, will always highlight the first option
Enables autofocus
Changes the background-color of the input
Keeps a local unique copy of all items that have been passed through the items prop.
Changes display of selections to chips
Applied when using clearable and the input is dirty
Add input clear functionality, default icon is Material Icons clear
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)). You can find list of built in classes on the colors page.
Creates counter for input length; if no number is specified, it defaults to 25. Does not apply any validation.
Applies the dark theme variant to the component. This will default the components color to white unless you've configured your application theme to dark or if you are using the color prop on the component. You can find more information on the Material Design documentation for dark themes.
Adds a remove icon to selected chips
Accepts an array of strings that will trigger a new tag when typing. Does not replace the normal Tab and Enter keys.
Reduces the input height
Disables keyboard lookup
Disable the input
Will force the components content to render on mounted. This is useful if you have content that will not be rendered in the DOM that you want crawled for SEO.
Puts the input in a manual error state
The total number of errors that should display at once
Puts the input in an error state and passes through custom error messages. Will be combined with any validations that occur from the rules prop. This field will not trigger validation
Applies the alternate filled input style
The function used for filtering items
Removes elevation (shadow) added to element when using the solo or solo-inverted props
Designates input type as full-width
Sets the height of the input
Hides hint and validation errors. When set to auto messages will be rendered only if there's a message (hint, error message, counter value etc) to display
Hides the menu when there are no options to show. Useful for preventing the menu from opening before results are fetched asynchronously. Also has the effect of opening the menu when the items array changes if not already open.
Do not display in the select menu items that are already selected
Hint text
Sets the DOM id on the component
Sets color of selected items
Set property of items's disabled value
Set property of items's text value
Set property of items's value - must be primitive. Dot notation is supported. Note: This is currently not supported with v-combobox GitHub Issue
Can be an array of objects or array of strings. When using objects, will look for a text, value and disabled keys. This can be changed using the item-text, item-value and item-disabled props. Objects that have a header or divider property are considered special cases and generate a list header or divider; these items are not selectable.
{
text: string | number | object
value: string | number | object
disabled: boolean
divider: boolean
header: string
}Sets input label
Applies the light theme variant to the component.
Specifies the height of the loader
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
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 }"
Displays a list of messages or message if using a string
Changes select to multiple. Accepts array for value
Display text when there is no data
Do not apply filtering when searching. Useful when data is being filtered server side
When using the clearable prop, once cleared, the select menu will either open or stay open, depending on the current state
Applies the outlined style to the input
Forces hint to always be visible
Sets the input’s placeholder text
Displays prefix text
Prepends an icon to the component, uses the same syntax as v-icon
Prepends an icon inside the component's input, uses the same syntax as v-icon
Puts input in readonly state
Changes the selection behavior to return the object directly rather than the value specified with item-value
Reverses the input orientation
Adds a border radius to the input
Accepts an array of functions that take an input value as an argument and return either true / false or a string with an error message
Search value. Can be used with .sync modifier.
Round if outlined and increase border-radius if filled. Must be used with either outlined or filled
Label does not move on focus/dirty
Changes display of selections to chips with the small property
Changes the style of the input
Reduces element opacity until focused
Puts the input in a manual success state
Puts the input in a success state and passes through custom success messages.
Displays suffix text
Sets input type
Delays validation until blur event
The input's value
The comparison algorithm used for values. More info
Adds an item inside the input and after input content
Adds an item after menu content
Adds an item outside the input and after input content
The default Vue slot.
Define a custom item appearance
{
parent: VueComponent
item: object
on: object // Only needed when providing your own v-list-item
attrs: object // Only needed when providing your own v-list-item
}Replaces the default label
Customize the messages slot.
{
key: number, // the messages index
message: string, // the message
}Displayed when there are no filtered items
Adds an item outside the input and before input content
Adds an item inside the input and before input content
Adds an item before menu content
Slot for custom progress linear (displayed when loading prop is not equal to Boolean False)
Define a custom selection appearance
{
parent: VueComponent
item: object
index: number
select: function
selected: boolean
disabled: boolean
}Emitted when the input is blurred
EventEmitted when the input is changed by user interaction
anyEmitted when input is clicked
MouseEventEmitted when appended icon is clicked
EventEmitted when appended outer icon is clicked
EventEmitted when clearable icon clicked
EventEmitted when prepended icon is clicked
EventEmitted when prepended inner icon is clicked
EventEmitted when component is focused
EventThe updated bound model
anyEmitted when any key is pressed
KeyboardEventEmitted when click is pressed
MouseEventEmitted when click is released
MouseEventThe error.sync event
booleanEmitted when menu item is selected using keyboard arrows
numberThe search-input.sync event
stringBelow is a collection of simple to complex examples.
Previously known as tags - user is allowed to enter more than 1 value
You can use dense prop to reduce combobox height and lower max height of list items.
In this example we utilize a custom no-data slot to provide context to the user when searching / creating items.
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.
Ready for more? Continue reading with: