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.
<v-combobox
label="Combobox"
:items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"
></v-combobox>API
| Component | Description |
|---|---|
| v-combobox | Primary component |
| v-autocomplete | A select component that allows for advanced filtering |
| v-select | A replacement for the HTML |
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
This also means that a typed string will not select an item the same way clicking on it would, you may want to set auto-select-first="exact" when using object items.
Examples
Props
Density
You can use density prop to adjust vertical spacing within the component.
Placeholder
Use the placeholder prop to give users additional context about the expected values in the combobox. The placeholder will only appear when no items are selected.
Use the persistent-placeholder prop to force the placeholder to be visible, even when the input is not focused.
Multiple combobox
Previously known as tags - user is allowed to enter more than one value.
Slots
No data
In this example we utilize a custom no-data slot to provide context to the user when searching / creating items.
Custom chips
When working with custom chip slots, it’s recommended to use v-bind="props" to pass event handler @mousedown.stop. This helps prevent unintentionally opening the dropdown.
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.