Select

Dropdown select with single/multiple selection, search, groups, tags, and keyboard navigation.

Pick a fruit...

<script setup>
const value = ref(null)
const options = [
  { label: 'Apple', value: 'apple' },
  { label: 'Banana', value: 'banana' },
]
</script>

<template>
  <VxSelect v-model="value" :options="options" />
</template>

String Options

Select...

<template>
  <VxSelect :options="['Red', 'Green', 'Blue']" />
</template>

Clearable

Banana

banana

<template>
  <VxSelect v-model="value" :options="options" clearable />
</template>

Searchable

Search countries...

<template>
  <VxSelect v-model="value" :options="options" searchable />
</template>

Multiple

Select fruits...

<template>
  <VxSelect v-model="value" :options="options" multiple />
</template>

Multiple Searchable

Search & select...

<template>
  <VxSelect v-model="value" :options="options" multiple searchable clearable />
</template>

Collapse Tags

Default (1 tag + N)

Select...

Show 3 tags

Select...

All tags (wrap)

Select...

<template>
  <VxSelect multiple />
  <VxSelect multiple :max-tags="3" />
  <VxSelect multiple :collapse-tags="false" />
</template>

Grouped Options

Pick food...

<script setup>
const options = [
  { label: 'Fruits', options: [
    { label: 'Apple', value: 'apple' },
    { label: 'Banana', value: 'banana' },
  ]},
  { label: 'Vegetables', options: [
    { label: 'Carrot', value: 'carrot' },
  ]},
]
</script>

<template>
  <VxSelect :options="options" />
</template>

Disabled Options

Some disabled...

<template>
  <VxSelect :options="[{ label: 'Russia', value: 'ru', disabled: true }]" />
</template>

Sizes

Small

Default

Large

<template>
  <VxSelect size="sm" />
  <VxSelect />
  <VxSelect size="lg" />
</template>

Loading

Show a spinner while options are being fetched.

Loading options...

<script setup>
const loading = ref(true)
const options = ref([])

onMounted(async () => {
  const res = await fetch('/api/options')
  options.value = await res.json()
  loading.value = false
})
</script>

<template>
  <VxSelect v-model="value" :options="options" :loading="loading" />
</template>

Debounce Search

Delays filtering for better performance on large option lists.

Search 100 options (300ms debounce)...

<template>
  <VxSelect :options="largeList" searchable :debounce="300" />
</template>

Remote / Async Search

Search countries...

<script setup>
async function fetchOptions(query, page) {
  const res = await fetch(`/api/search?q=${query}&page=${page}`)
  return res.json()
}
</script>

<template>
  <VxSelect :fetch-options="fetchOptions" searchable />
</template>

Paginated (Infinite Scroll)

Loads more options when scrolling to the bottom. Set page-count to limit pages.

Scroll to load comments...

<script setup>
async function fetchComments(query, page) {
  const res = await fetch(
    `https://jsonplaceholder.typicode.com/comments?_limit=10&_page=${page}`
  )
  const data = await res.json()
  return data.map(c => ({ label: c.name, value: c.id }))
}
</script>

<template>
  <VxSelect :fetch-options="fetchComments" :page-count="50" searchable />
  <!-- fetchOptions receives (query, page) — page starts from 1 -->
</template>

Creatable (Tag Input)

Type a new value and press Enter to create it.

Type to add...

<template>
  <VxSelect v-model="tags" :options="options" multiple searchable creatable />
</template>

Max Selection

Max 3 items

<template>
  <VxSelect v-model="value" :options="options" multiple :max-selection="3" />
</template>

Keep Open After Select

Stays open...

<template>
  <VxSelect multiple :close-on-select="false" />
</template>

Custom Option Slot

With flags...

<template>
  <VxSelect :options="countries">
    <template #option="{ option, label, selected }">
      <span>{{ option.value.toUpperCase() }}</span>
      <span>{{ label }}</span>
      <CheckIcon v-if="selected" />
    </template>
  </VxSelect>
</template>

Disabled

Cherry

<template>
  <VxSelect v-model="value" disabled />
</template>

Props

Prop	Type	Default	Description
modelValue	any	null	Selected value(s) (v-model)
options	(SelectOption | SelectGroup | string)[]	[]	Options
placeholder	string	'Select...'	Placeholder
disabled	boolean	false	Disable
clearable	boolean	false	Clear button
searchable	boolean	false	Enable search filter
multiple	boolean	false	Multi-select
collapseTags	boolean	true	Collapse multi tags with +N
maxTags	number	1	Tags before collapse
size	'sm' | 'default' | 'lg'	'default'	Size
emptyText	string	'No options'	Empty state text
debounce	number	0	Debounce search filter (ms)
fetchOptions	(query: string, page: number) => Promise<Option[]>	—	Async search function. page starts from 1
loading	boolean	false	Show loading spinner
creatable	boolean	false	Allow creating new options
closeOnSelect	boolean	auto	Close after select (auto: true single, false multi)
reserveKeyword	boolean	false	Keep search text after selecting
defaultFirstOption	boolean	false	Auto-highlight first option
maxSelection	number	0	Max selections (0=unlimited)
pageCount	number	0	Max pages for pagination (0=no pagination)
scrollDistance	number	20	Pixels from bottom to trigger load more
destroyOnClose	boolean	false	Clear cached remote data on close
labelField	string	'label'	Custom label key
valueField	string	'value'	Custom value key
triggerClass	string	''	Custom trigger class
triggerStyle	Record<string, string>	—	Custom trigger style

Events

Event	Type	Description
update:modelValue	(v: any)	Selection changed
change	(v: any)	Selection changed
search	(query: string)	Search text changed
create	(value: string)	New option created
loadMore	(page: number)	Next page requested

Slots

Slot	Props	Description
option	{ option, label, value, selected }	Custom option rendering
tag	{ tag, remove }	Custom tag rendering
prefix	—	Before text in trigger
suffix	—	After text in trigger
empty	—	No options content