---
meta:
  nav: Combobox
  title: Combobox component
  description: The combobox component provides type-ahead autocomplete functionality and allows users to provide a custom values beyond the provided list of options.
  keywords: combobox, vuetify combobox component, vue combobox component
related:
  - /components/autocompletes/
  - /components/forms/
  - /components/selects/
features:
  figma: true
  label: 'C: VCombobox'
  report: true
  github: /components/VCombobox/
  spec: https://m2.material.io/components/text-fields
---

# Combobox

The `v-combobox` component is a [v-text-field](/components/text-fields) 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.

<PageFeatures />

## Usage

With Combobox, you can allow a user to create new values that may not be present in a provided items list.

<ExamplesUsage name="v-combobox" />

<PromotedEntry />

## API

| Component | Description |
| - | - |
| [v-combobox](/api/v-combobox/) | Primary component |
| [v-autocomplete](/api/v-autocomplete/) | A select component that allows for advanced filtering |
| [v-select](/api/v-select/) | A replacement for the HTML <select></select> |

<ApiInline hide-links />

## Caveats

::: error
  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](https://github.com/vuetifyjs/vuetify/issues/5479)

  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.

<ExamplesExample file="v-combobox/prop-density" />

#### 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.

::: info
  Use the **persistent-placeholder** prop to force the **placeholder** to be visible, even when the input is not focused.
:::

<ExamplesExample file="v-combobox/prop-placeholder" />

#### Multiple combobox

Previously known as **tags** - user is allowed to enter more than one value.

<ExamplesExample file="v-combobox/prop-multiple" />

### Slots

#### No data

In this example we utilize a custom **no-data** slot to provide context to the user when searching / creating items.

<ExamplesExample file="v-combobox/slot-no-data" />

#### Menu header

The **menu-header** slot allows you to add custom content at the top of the dropdown menu, such as tabs to filter items by category.

<ExamplesExample file="v-combobox/slot-menu-header" />

#### 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.

<ExamplesExample file="v-combobox/slot-custom-chip" />

### 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.

<ExamplesExample file="v-combobox/misc-advanced" />
