Select

Выпадающий список с одиночным/множественным выбором, поиском, группами, тегами и навигацией с клавиатуры.

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

Показывать спиннер, пока опции загружаются.

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

Задерживает фильтрацию для повышения производительности на больших списках опций.

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)

Загружает больше опций при прокрутке вниз. Установите page-count, чтобы ограничить количество страниц.

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)

Введите новое значение и нажмите Enter, чтобы создать его.

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	Выбранное значение(я) (v-model)
options	(SelectOption | SelectGroup | string)[]	[]	Опции
placeholder	string	'Select...'	Плейсхолдер
disabled	boolean	false	Отключить
clearable	boolean	false	Кнопка очистки
searchable	boolean	false	Включить фильтр поиска
multiple	boolean	false	Множественный выбор
collapseTags	boolean	true	Сворачивать теги с +N
maxTags	number	1	Количество тегов до сворачивания
size	'sm' | 'default' | 'lg'	'default'	Размер
emptyText	string	'No options'	Текст пустого состояния
debounce	number	0	Задержка фильтра поиска (мс)
fetchOptions	(query: string, page: number) => Promise<Option[]>	—	Асинхронная функция поиска. page начинается с 1
loading	boolean	false	Показать спиннер загрузки
creatable	boolean	false	Разрешить создание новых опций
closeOnSelect	boolean	auto	Закрывать после выбора (auto: true для одиночного, false для множественного)
reserveKeyword	boolean	false	Сохранять текст поиска после выбора
defaultFirstOption	boolean	false	Автоподсветка первой опции
maxSelection	number	0	Максимум выборов (0=без ограничений)
pageCount	number	0	Максимум страниц для пагинации (0=без пагинации)
scrollDistance	number	20	Пикселей от низа для запуска подгрузки
destroyOnClose	boolean	false	Очищать кэшированные удалённые данные при закрытии
labelField	string	'label'	Пользовательский ключ метки
valueField	string	'value'	Пользовательский ключ значения
triggerClass	string	''	Пользовательский класс триггера
triggerStyle	Record<string, string>	—	Пользовательский стиль триггера

Events

Event	Type	Description
update:modelValue	(v: any)	Выбор изменился
change	(v: any)	Выбор изменился
search	(query: string)	Текст поиска изменился
create	(value: string)	Создана новая опция
loadMore	(page: number)	Запрошена следующая страница

Slots

Slot	Props	Description
option	{ option, label, value, selected }	Пользовательская отрисовка опции
tag	{ tag, remove }	Пользовательская отрисовка тега
prefix	—	Перед текстом в триггере
suffix	—	После текста в триггере
empty	—	Содержимое при отсутствии опций