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

Component	Description
v-combobox	Primary component
v-autocomplete	A select component that allows for advanced filtering
v-select	A replacement for the HTML

Caveats

DANGER

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.

Multiple combobox

Previously known as tags - user is allowed to enter more than one 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.