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

Examples

Props

Density

You can use density prop to adjusts vertical spacing within the component.

v-combobox/prop-density.vue

Multiple combobox

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

v-combobox/prop-multiple.vue

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.

v-combobox/slot-no-data.vue

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.

v-combobox/misc-advanced.vue

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.