packages/docs/src/pages/en/components/combobox.md
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.
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 />| Component | Description |
|---|---|
| v-combobox | Primary component |
| v-autocomplete | A select component that allows for advanced filtering |
| v-select | A replacement for the HTML <select></select> |
::: 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
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.
:::
You can use density prop to adjust vertical spacing within the component.
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" />Previously known as tags - user is allowed to enter more than one value.
<ExamplesExample file="v-combobox/prop-multiple" />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" />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" />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.
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.