Select

Bitta/koʻp tanlash, qidiruv, guruhlar, teglar va klaviatura navigatsiyasi bilan dropdown 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

Variantlar yuklanayotgan vaqtda spinner’ni koʻrsating.

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

Katta variantlar roʻyxatida yaxshiroq ishlash uchun filtrlashni kechiktiradi.

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)

Pastga scroll qilganda koʻproq variantlarni yuklaydi. Sahifalarni cheklash uchun page-count ni belgilang.

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)

Yangi qiymatni kiriting va uni yaratish uchun Enter tugmasini bosing.

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	Tanlangan qiymat(lar) (v-model)
options	(SelectOption | SelectGroup | string)[]	[]	Variantlar
placeholder	string	'Select...'	Placeholder
disabled	boolean	false	Oʻchirish
clearable	boolean	false	Tozalash tugmasi
searchable	boolean	false	Qidiruv filtrini yoqish
multiple	boolean	false	Koʻp tanlash
collapseTags	boolean	true	Koʻp teglarni +N bilan yigʻish
maxTags	number	1	Yigʻishdan oldingi teglar soni
size	'sm' | 'default' | 'lg'	'default'	Oʻlcham
emptyText	string	'No options'	Boʻsh holat matni
debounce	number	0	Qidiruv filtrini kechiktirish (ms)
fetchOptions	(query: string, page: number) => Promise<Option[]>	—	Asinxron qidiruv funksiyasi. page 1 dan boshlanadi
loading	boolean	false	Yuklash spinner’ini koʻrsatish
creatable	boolean	false	Yangi variantlarni yaratishga ruxsat berish
closeOnSelect	boolean	auto	Tanlagandan keyin yopish (auto: single uchun true, multi uchun false)
reserveKeyword	boolean	false	Tanlagandan keyin qidiruv matnini saqlab qolish
defaultFirstOption	boolean	false	Birinchi variantni avtomatik belgilash
maxSelection	number	0	Maksimal tanlovlar (0=cheklovsiz)
pageCount	number	0	Pagination uchun maksimal sahifalar (0=paginationsiz)
scrollDistance	number	20	Koʻproq yuklashni ishga tushirish uchun pastdan pixel
destroyOnClose	boolean	false	Yopilganda kesh qilingan remote maʼlumotni tozalash
labelField	string	'label'	Maxsus label kaliti
valueField	string	'value'	Maxsus value kaliti
triggerClass	string	''	Maxsus trigger klassi
triggerStyle	Record<string, string>	—	Maxsus trigger uslubi

Events

Event	Type	Description
update:modelValue	(v: any)	Tanlov oʻzgardi
change	(v: any)	Tanlov oʻzgardi
search	(query: string)	Qidiruv matni oʻzgardi
create	(value: string)	Yangi variant yaratildi
loadMore	(page: number)	Keyingi sahifa soʻraldi

Slots

Slot	Props	Description
option	{ option, label, value, selected }	Maxsus variant render qilish
tag	{ tag, remove }	Maxsus teg render qilish
prefix	—	Trigger’dagi matndan oldin
suffix	—	Trigger’dagi matndan keyin
empty	—	Variantlar yoʻq kontenti