Combobox
The v-combobox component is a v-text-field that allows the user to select values from a provided items array, or to enter their own value. Created items will be returned as strings.
Usage
With Combobox, you can allow a user to create new values that may not be present in a provided items list.
API
Caveats
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
Examples
Props
Density
You can use density prop to adjusts vertical spacing within the component.
Multiple combobox
Previously known as tags - user is allowed to enter more than 1 value
Slots
No data with chips
In this example we utilize a custom no-data slot to provide context to the user when searching / creating items.
Misc
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.