VSelect
The VSelect component provides a dropdown menu for selecting one or more items from a list. It includes keyboard navigation, search filtering, and virtual scrolling for performance.
Basic Usage
<template>
<VSelect
v-model="selected"
:items="items"
label="Select an item"
/>
</template>
<script setup>
import { ref } from 'vue'
const selected = ref(null)
const items = ['California', 'Colorado', 'Florida', 'Georgia', 'Texas']
</script>
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.
Icon to display for the dropdown menu indicator.
noDataText
string
default:"$vuetify.noDataText"
Text to display when no items are available.
Render the menu content immediately instead of lazy loading.
Open the menu when the clear icon is clicked.
Multiple Selection
<template>
<VSelect
v-model="selected"
:items="items"
label="Select multiple"
multiple
chips
closable-chips
/>
</template>
<script setup>
import { ref } from 'vue'
const selected = ref([])
const items = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5']
</script>
Object Items
<template>
<VSelect
v-model="selected"
:items="items"
item-title="name"
item-value="id"
label="Select a user"
/>
</template>
<script setup>
import { ref } from 'vue'
const selected = ref(null)
const items = [
{ id: 1, name: 'John Doe', role: 'Admin' },
{ id: 2, name: 'Jane Smith', role: 'User' },
{ id: 3, name: 'Bob Johnson', role: 'Manager' },
]
</script>
Return Object
<template>
<div>
<VSelect
v-model="selected"
:items="items"
item-title="name"
item-value="id"
label="Select a user"
return-object
/>
<p v-if="selected">
Selected: {{ selected.name }} ({{ selected.role }})
</p>
</div>
</template>
<script setup>
import { ref } from 'vue'
const selected = ref(null)
const items = [
{ id: 1, name: 'John Doe', role: 'Admin' },
{ id: 2, name: 'Jane Smith', role: 'User' },
]
</script>
Keyboard Navigation
The select supports keyboard navigation:
- Enter/Space/ArrowDown: Open menu
- Escape/Tab: Close menu
- ArrowUp/ArrowDown: Navigate items
- Home/End: Jump to first/last item
- Type letters: Jump to item starting with those letters
<template>
<VSelect
v-model="selected"
:items="['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry']"
label="Try keyboard navigation"
/>
</template>
Custom Item Display
<template>
<VSelect
v-model="selected"
:items="items"
item-title="name"
item-value="id"
label="Select a user"
>
<template #item="{ item, props }">
<VListItem v-bind="props">
<template #prepend>
<VAvatar :color="item.raw.color">
{{ item.raw.name[0] }}
</VAvatar>
</template>
<template #title>
{{ item.raw.name }}
</template>
<template #subtitle>
{{ item.raw.email }}
</template>
</VListItem>
</template>
</VSelect>
</template>
<script setup>
import { ref } from 'vue'
const selected = ref(null)
const items = [
{ id: 1, name: 'John Doe', email: '[email protected]', color: 'blue' },
{ id: 2, name: 'Jane Smith', email: '[email protected]', color: 'green' },
]
</script>
With Search
<template>
<VSelect
v-model="selected"
v-model:search="search"
:items="filteredItems"
label="Search and select"
/>
</template>
<script setup>
import { ref, computed } from 'vue'
const selected = ref(null)
const search = ref('')
const allItems = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry']
const filteredItems = computed(() => {
if (!search.value) return allItems
return allItems.filter(item =>
item.toLowerCase().includes(search.value.toLowerCase())
)
})
</script>
Emitted when the selected value changes.
Emitted when the menu opens or closes.
Emitted when the search query changes.
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.
Content to display before the list items.
Content to display after the list items.