Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/vuetifyjs/vuetify/llms.txt

Use this file to discover all available pages before exploring further.

​
VCombobox

The VCombobox component combines the functionality of VAutocomplete with the ability to enter values that aren’t in the items list. Perfect for tagging or allowing custom entries.

​
Basic Usage

<template>
  <VCombobox
    v-model="selected"
    :items="items"
    label="Select or create"
  />
</template>

<script setup>
import { ref } from 'vue'

const selected = ref(null)
const items = ['Vue', 'React', 'Angular', 'Svelte']
</script>

​
Props

​
alwaysFilter
boolean
default:"false"
Always filter items even when not pristine.
​
autoSelectFirst
boolean | 'exact'
Automatically select the first matching item. If ‘exact’, only when search exactly matches.
​
clearOnSelect
boolean
default:"true"
Clear the search input after selecting an item.
​
delimiters
string[]
Characters that will trigger selection when typed (e.g., [’,’, ’ ’]).
​
items
readonly any[]
Array of items to display in the dropdown.
​
itemTitle
string | function
Property name or function to determine the display text for each item.
​
itemValue
string | function
Property name or function to determine the value for each item.
​
returnObject
boolean
default:"true"
Return the entire item object as the value instead of just the item value.
​
multiple
boolean
default:"false"
Allow multiple item selection.
​
chips
boolean
default:"false"
Display selected items as chips.
​
closableChips
boolean
default:"false"
Allow chips to be closed/removed.
​
hideSelected
boolean
default:"false"
Hide selected items from the list.
​
hideNoData
boolean
default:"true"
Hide the menu when there are no items to display.
​
filterKeys
string[]
default:"['title']"
Item properties to use when filtering.

​
Multiple with Custom Values

<template>
  <VCombobox
    v-model="tags"
    :items="suggestedTags"
    label="Add tags"
    multiple
    chips
    closable-chips
    hint="Press enter to add a new tag"
    persistent-hint
  />
</template>

<script setup>
import { ref } from 'vue'

const tags = ref([])
const suggestedTags = ['JavaScript', 'TypeScript', 'Vue', 'React', 'Node.js']
</script>

​
With Delimiters

<template>
  <VCombobox
    v-model="emails"
    :items="contacts"
    label="Email addresses"
    multiple
    chips
    :delimiters="[',', ' ', ';']"
    hint="Separate emails with comma, space, or semicolon"
    persistent-hint
  />
</template>

<script setup>
import { ref } from 'vue'

const emails = ref([])
const contacts = [
  'john@example.com',
  'jane@example.com',
  'bob@example.com',
]
</script>

​
Custom Item Objects

<template>
  <VCombobox
    v-model="selected"
    :items="items"
    item-title="name"
    item-value="id"
    label="Select or create framework"
    return-object
  />
</template>

<script setup>
import { ref } from 'vue'

const selected = ref(null)
const items = [
  { id: 1, name: 'Vue.js', color: 'green' },
  { id: 2, name: 'React', color: 'blue' },
  { id: 3, name: 'Angular', color: 'red' },
]
</script>

​
Paste Support

The combobox automatically handles pasting multiple values when delimiters are configured: 
<template>
  <VCombobox
    v-model="values"
    :items="[]"
    label="Paste multiple values"
    multiple
    chips
    :delimiters="[',', '\n']"
    hint="Try pasting: value1,value2,value3"
    persistent-hint
  />
</template>

<script setup>
import { ref } from 'vue'

const values = ref([])
</script>

​
Events

​
update:modelValue
(value: any) => void
Emitted when the selected value changes.
​
update:search
(value: string) => void
Emitted when the search query changes.
​
update:menu
(value: boolean) => void
Emitted when the menu opens or closes.
​
update:focused
(focused: boolean) => void
Emitted when the input focus state changes.

​
Slots

​
item
{ item, index, props }
Customize the appearance of list items.
​
chip
{ item, index, props }
Customize the appearance of selected chips.
​
selection
{ item, index }
Customize how selected items are displayed.
​
no-data
{}
Content to display when no items are available.

Build docs developers (and LLMs) love

Get started for freeTalk to us