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>
Always filter items even when not pristine.
Automatically select the first matching item. If ‘exact’, only when search exactly matches.
Clear the search input after selecting an item.
Characters that will trigger selection when typed (e.g., [’,’, ’ ’]).
Array of items to display in the dropdown.
Property name or function to determine the display text for each item.
Property name or function to determine the value for each item.
Return the entire item object as the value instead of just the item value.
Allow multiple item selection.
Display selected items as chips.
Allow chips to be closed/removed.
Hide selected items from the list.
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 = [
'[email protected]',
'[email protected]',
'[email protected]',
]
</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>
Emitted when the selected value changes.
Emitted when the search query changes.
Emitted when the menu opens or closes.
update:focused
(focused: boolean) => void
Emitted when the input focus state changes.
Customize the appearance of list items.
Customize the appearance of selected chips.
Customize how selected items are displayed.
Content to display when no items are available.