🌏 Translated with the assistance of DeepSeek and ChatGPT

Select

A common selector that presents and selects content via a drop-down menu.

Basic Usage

Pass modelValue to enter controlled mode.
Omit it or pass undefined for uncontrolled mode, in which you can supply a defaultValue prop as the initial value.

Vue

<template>
	<px-space direction="vertical">
		<px-select v-model="value" :options="options" placeholder="Please Select"></px-select>
		<px-select :defaultValue="'vue'" :options="options" placeholder="Please Select"></px-select>
	</px-space>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('vue')
const options = [
	{ label: 'Vue', value: 'vue' },
	{ label: 'React', value: 'react' },
	{ label: 'Angular', value: 'angular' }
]
</script>

<style lang="css" scoped>
.px-select {
	width: 320px;
}
</style>

Disabled Options

Inside options, set an option's disabled field to true to disable that option.

Vue

Vanilla

<template>
	<px-space direction="vertical">
		<px-select v-model="value" :options="options" placeholder="Please Select"></px-select>
		<px-select
			:defaultValue="'vanilla'"
			:options="options"
			placeholder="Please Select"
		></px-select>
	</px-space>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('vue')
const options = [
	{ label: 'Vanilla', value: 'vanilla', disabled: true },
	{ label: 'Vue', value: 'vue' },
	{ label: 'React', value: 'react' },
	{ label: 'Angular', value: 'angular' }
]
</script>

<style lang="css" scoped>
.px-select {
	width: 320px;
}
</style>

Groups

The options array also supports option groups.

Vue

<template>
	<px-space>
		<px-select v-model="value" :options="options" placeholder="Please Select"></px-select>
	</px-space>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('vue')
const options = [
	{
		label: 'JS Framework',
		key: 'JS Framework',
		type: 'group',
		children: [
			{ label: 'Vanilla', value: 'vanilla', disabled: true },
			{ label: 'Vue', value: 'vue' },
			{ label: 'React', value: 'react' },
			{ label: 'Angular', value: 'angular' }
		]
	},
	{
		label: 'CSS Preprocessor',
		key: 'CSS Preprocessor',
		type: 'group',
		children: [
			{ label: 'Less', value: 'less' },
			{ label: 'Sass', value: 'sass' }
		]
	}
]
</script>

<style lang="css" scoped>
.px-select {
	width: 320px;
}
</style>

Remote Loading

Set the loading prop and listen to the focus event to reflect UI changes while data is being fetched or searched.

Please Select

<template>
	<px-select
		v-model="value"
		:options="options"
		placeholder="Please Select"
		@focus="focusHandler"
		:loading="loading"
	></px-select>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref(null)

const options = ref<string[]>([])
const loading = ref(false)

const list = ['Ready to work', 'Work, work', 'Work completed']

const focusHandler = () => {
	options.value = []
	loading.value = true
	setTimeout(() => {
		options.value = list
		loading.value = false
	}, 5000)
}
</script>

<style lang="css" scoped>
.px-select {
	width: 320px;
}
</style>

Multiple Selection

Add the multiple prop to enable multi-select mode.

Please Select

<template>
	<px-select
		v-model="value"
		:options="options"
		placeholder="Please Select"
		multiple
	></px-select>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref<string[]>([])

const options = ref<string[]>(['Ready for action', 'Locked and loaded', 'I await your command'])
</script>

<style lang="css" scoped>
.px-select {
	width: 320px;
}
</style>

Collapsed Tags

In multi-select mode, set collapseTags to true (default false) to collapse selected tags.
maxDisplayTags controls how many tags remain visible, and collapseTagsPopover (default true) decides whether collapsed tags are shown in a popover.

Please select

<template>
	<px-space direction="vertical">
		<px-select
			placeholder="Please select"
			v-model="value"
			collapse-tags
			:max-display-tags="3"
			multiple
			:options="options"
		></px-select>
		<px-select
			placeholder="Please select"
			v-model="value"
			collapse-tags
			:max-display-tags="3"
			:collapse-tags-popover="false"
			multiple
			:options="options"
		></px-select>
	</px-space>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref<string[]>([])
const options = [
	{ label: 'Vue', value: 'vue' },
	{ label: 'React', value: 'react' },
	{ label: 'Angular', value: 'angular' },
	{ label: 'Svelte', value: 'svelte' },
	{ label: 'Preact', value: 'Preact' },
	{ label: 'Next', value: 'next' },
	{ label: 'Nuxt', value: 'nuxt' },
	{ label: 'Astro', value: 'astro' }
]
</script>

<style lang="css" scoped>
.px-select {
	width: 320px;
}
</style>

Searchable Options

Set filterable to make the drop-down searchable.
For the search input itself, pass inputValue for controlled mode; otherwise supply defaultInputValue for uncontrolled mode.

inputValue:

Please select

<template>
	<px-space direction="vertical">
		<div>inputValue: {{ inputValue }}</div>
		<px-select
			placeholder="Please select"
			v-model="value"
			:options="options"
			v-model:input-value="inputValue"
			filterable
		></px-select>
		<px-select
			placeholder="Please select"
			v-model="multiValue"
			default-input-value="Nest"
			multiple
			:options="options"
			filterable
		></px-select>
	</px-space>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const multiValue = ref<string[]>([])
const value = ref<string | null>(null)
const inputValue = ref<string>()
const options = [
	{ label: 'Express', value: 'express' },
	{ label: 'Koa', value: 'koa' },
	{ label: 'Nest', value: 'nest' },
	{ label: 'Fastify', value: 'fastify' }
]
</script>

<style lang="css" scoped>
.px-select {
	width: 320px;
}
</style>

Adding Options

Set creatable to allow new options to be added (type string). filterable must also be enabled.

Please select

<template>
	<px-space direction="vertical">
		<px-select
			placeholder="Please select"
			v-model="value"
			:options="options"
			filterable
			creatable
		></px-select>
		<px-select
			placeholder="Please select"
			v-model="multiValue"
			multiple
			:options="options"
			filterable
			creatable
		></px-select>
	</px-space>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const multiValue = ref<string[]>([])
const value = ref<string | null>(null)
const options = [
	{ label: 'Morning Mood', value: 'music1' },
	{ label: 'The Death of Åse', value: 'music2' },
	{ label: "Anitra's Dance", value: 'music3' },
	{ label: 'In the Hall of the Mountain King', value: 'music4' }
]
</script>

<style lang="css" scoped>
.px-select {
	width: 320px;
}
</style>

Virtual List

Enabling the virtualScroll property activates the virtual list, which can be turned on to improve performance when there is a large amount of option data.

Please Select

<template>
	<px-select
		v-model="value"
		:options="options"
		placeholder="Please Select"
		virtual-scroll
	></px-select>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref(null)
const data = [
	'pear',
	'plum',
	'cherry',
	'blueberry',
	'raspberry',
	'blackberry',
	'lemon',
	'lime',
	'pomegranate',
	'apricot',
	'apple',
	'banana',
	'orange',
	'grape',
	'strawberry',
	'mango',
	'pineapple',
	'peach',
	'kiwi',
	'watermelon',
	'grapefruit',
	'tangerine',
	'mandarin',
	'nectarine',
	'fig',
	'date',
	'olive',
	'coconut',
	'avocado',
	'papaya',
	'guava',
	'passion fruit',
	'lychee',
	'longan',
	'dragon fruit',
	'durian',
	'rambutan',
	'star fruit',
	'persimmon',
	'cantaloupe',
	'honeydew',
	'mulberry',
	'gooseberry',
	'currant',
	'elderberry',
	'cranberry',
	'boysenberry',
	'loganberry',
	'cloudberry',
	'salmonberry',
	'lingonberry',
	'bilberry',
	'huckleberry',
	'acai berry',
	'goji berry',
	'maqui berry',
	'camu camu',
	'cupuacu',
	'mamey',
	'sapodilla',
	'soursop',
	'guanabana',
	'jackfruit',
	'pulasan',
	'mangosteen',
	'star apple',
	'rose apple',
	'wax apple',
	'java plum',
	'black plum',
	'white sapote',
	'black sapote',
	'marmalade plum',
	'pepino',
	'tamarillo',
	'cape gooseberry',
	'ground cherry',
	'physalis',
	'naranjilla',
	'lulo',
	'tomato',
	'potato',
	'carrot',
	'onion',
	'garlic',
	'cucumber',
	'bell pepper',
	'spinach',
	'lettuce',
	'broccoli',
	'cauliflower',
	'green bean',
	'pea',
	'zucchini',
	'eggplant',
	'celery',
	'asparagus',
	'brussels sprout',
	'kale',
	'chard',
	'radish',
	'turnip',
	'parsnip',
	'yam',
	'pumpkin',
	'squash',
	'artichoke',
	'leek',
	'shallot',
	'chive',
	'scallion',
	'beet',
	'swiss chard',
	'collard green',
	'mustard green',
	'dandelion green',
	'endive',
	'escarole',
	'fennel',
	'bok choy',
	'napa cabbage',
	'green cabbage',
	'red cabbage',
	'purple cabbage',
	'watercress',
	'mushroom',
	'okra',
	'sweet corn',
	'corn',
	'rhubarb',
	'kohlrabi',
	'rutabaga',
	'celtuce',
	'bamboo shoot',
	'heart of palm',
	'jerusalem artichoke',
	'sunchoke',
	'chayote',
	'pattypan squash',
	'butternut squash',
	'acorn squash',
	'spaghetti squash',
	'yellow squash',
	'crookneck squash',
	'aubergine',
	'cherry tomato',
	'plum tomato',
	'beefsteak tomato',
	'roma tomato',
	'grape tomato',
	'heirloom tomato',
	'red bell pepper',
	'green bell pepper',
	'yellow bell pepper',
	'orange bell pepper',
	'jalapeno',
	'habanero',
	'serrano',
	'cayenne pepper',
	'tabasco pepper',
	'poblano',
	'ancho',
	'chipotle',
	'fresno pepper',
	'banana pepper',
	'pepperoncini',
	'shishito pepper',
	'string bean',
	'snap bean',
	'haricot vert',
	'lima bean',
	'butter bean',
	'fava bean',
	'broad bean',
	'black bean',
	'kidney bean',
	'pinto bean',
	'navy bean',
	'cannellini bean',
	'great northern bean',
	'adzuki bean',
	'mung bean',
	'soybean',
	'lentil',
	'red lentil',
	'green lentil',
	'brown lentil',
	'black lentil',
	'chickpea',
	'garbanzo bean',
	'green pea',
	'snow pea',
	'sugar snap pea',
	'split pea',
	'black-eyed pea',
	'cowpea',
	'okra pod',
	'baby spinach',
	'flat-leaf spinach',
	'malabar spinach',
	'water spinach',
	'curly kale',
	'tuscan kale',
	'lacinato kale',
	'red kale',
	'kale rabe',
	'rapini',
	'collard greens',
	'mustard greens',
	'turnip greens',
	'dandelion greens',
	'rainbow chard',
	'beet greens',
	'spinach beet',
	'curly endive',
	'frisée',
	'radicchio',
	'arugula',
	'rocket',
	'land cress',
	'nasturtium',
	'sorrel',
	'iceberg lettuce',
	'romaine lettuce',
	'butterhead lettuce',
	'boston lettuce',
	'bibb lettuce',
	'leaf lettuce',
	'green leaf lettuce',
	'red leaf lettuce',
	'mixed greens',
	'mesclun',
	'microgreens',
	'alfalfa sprouts',
	'bean sprouts',
	'mung bean sprouts',
	'radish sprouts',
	'broccoli sprouts',
	'sunflower sprouts',
	'yellow onion',
	'red onion',
	'white onion',
	'sweet onion',
	'vidalia onion',
	'walla walla onion',
	'green onion',
	'garlic clove',
	' elephant garlic',
	'ramp',
	'wild leek',
	'garlic chive',
	'chives',
	'green asparagus',
	'white asparagus',
	'purple asparagus',
	'celery stalk',
	'celery root',
	'celeriac',
	'fennel bulb',
	'fennel frond',
	'orange carrot',
	'purple carrot',
	'yellow carrot',
	'white carrot',
	'baby carrot',
	'swede',
	'red radish',
	'daikon radish',
	'black radish',
	'watermelon radish',
	'horseradish',
	'wasabi',
	'red beet',
	'golden beet',
	'chioggia beet',
	'sugar beet',
	'orange sweet potato',
	'purple sweet potato',
	'white sweet potato',
	'true yam',
	'russet potato',
	'yukon gold potato',
	'red potato',
	'white potato',
	'fingerling potato',
	'sweet potato',
	'taro',
	'eddoe',
	'malanga',
	'yucca',
	'cassava',
	'manioc',
	'jicama',
	' Jerusalem artichoke',
	'ginger',
	'fresh ginger',
	'galangal',
	'turmeric',
	'fresh bamboo shoot',
	'canned bamboo shoot',
	'globe artichoke',
	'broccoli crown',
	'broccoli floret',
	'broccoli stem',
	'white cauliflower',
	'purple cauliflower',
	'green cauliflower',
	'romanesco broccoli',
	'baby brussels sprout',
	'cabbage',
	'savoy cabbage',
	'chinese cabbage',
	'pak choi',
	'baby bok choy',
	'tatsoi',
	'mizuna',
	'komatsuna',
	'white button mushroom',
	'cremini mushroom',
	'portobello mushroom',
	'shiitake mushroom',
	'oyster mushroom',
	'enoki mushroom',
	'beech mushroom',
	'shimeji mushroom',
	'maitake mushroom',
	'reishi mushroom',
	'cordyceps',
	'truffle',
	'black truffle',
	'white truffle',
	'morel',
	'chanterelle',
	'ceps',
	'porcini',
	'pie pumpkin',
	'sugar pumpkin',
	'jack-o-lantern pumpkin',
	'hubbard squash',
	'kabocha squash',
	'delicata squash',
	'summer squash',
	'winter squash',
	'mirliton',
	'tomatillo',
	'chinese eggplant',
	'Japanese eggplant',
	'white eggplant',
	'grape eggplant',
	'ladyfinger',
	'baby corn',
	'corn on the cob',
	'popcorn',
	'water chestnut',
	'lotus root',
	'elephant garlic',
	'Jerusalem artichoke',
	'starfruit',
	'carambola',
	'kiwifruit',
	'kiwi berry',
	'golden kiwi',
	'green kiwi',
	'fuyu persimmon',
	'hachiya persimmon',
	'medjool date',
	'deglet noor date',
	'black fig',
	'green fig',
	'mission fig',
	'kadota fig',
	'green olive',
	'black olive',
	'kalamata olive',
	'gaeta olive',
	'young coconut',
	'mature coconut',
	'coconut water',
	'coconut meat',
	'hass avocado',
	' fuerte avocado',
	'zutano avocado',
	'pinkerton avocado',
	'solo papaya',
	'maradol papaya',
	'strawberry guava',
	'common guava',
	'purple passion fruit',
	'yellow passion fruit',
	'litchi',
	'dragon eye',
	'red dragon fruit',
	'yellow dragon fruit',
	'caimito',
	'jambu',
	'jamun',
	'chocolate pudding fruit',
	'melon pear',
	'tree tomato',
	'uchuva',
	'aguaymanto',
	'breadfruit',
	'chempedak',
	'cempedak',
	'graviola',
	'custard apple',
	'cherimoya',
	'atemoya',
	'sweetsop',
	'annon',
	'mamey sapote',
	'chico',
	'naseberry',
	'sapote',
	'yellow sapote',
	'canistel',
	'eggfruit',
	'lucuma',
	'pawpaw',
	'asimina',
	'pommegranate',
	'quince',
	'loquat',
	'Japanese plum',
	'date plum',
	'sloe',
	'blackthorn',
	'serviceberry',
	'juneberry',
	'hawthorn berry',
	'rowan berry',
	'mountain ash',
	'black elderberry',
	'red elderberry',
	'aronia berry',
	'chokeberry',
	'highbush blueberry',
	'lowbush blueberry',
	'rabbiteye blueberry',
	'whortleberry',
	'black huckleberry',
	'blue huckleberry',
	'cowberry',
	'partridgeberry',
	'American cranberry',
	'European cranberry',
	'bearberry',
	'kinnikinnick',
	'garden strawberry',
	'alpine strawberry',
	'wild strawberry',
	'red raspberry',
	'black raspberry',
	'purple raspberry',
	'golden raspberry',
	'dewberry',
	'tayberry',
	'marionberry',
	'olallieberry',
	'youngberry',
	'bakeapple',
	'thimbleberry',
	'wineberry',
	'black mulberry',
	'red mulberry',
	'white mulberry',
	'green gooseberry',
	'red gooseberry',
	'golden gooseberry',
	'red currant',
	'black currant',
	'white currant',
	'pink currant',
	'wolfberry',
	'goji',
	'acai',
	'copuacu',
	'bacuri',
	'buriti',
	'pupunha',
	'jaca',
	'mangaba',
	'murici',
	'pitanga',
	'surinam cherry',
	'pitaya',
	'prickly pear',
	'cactus fruit',
	'tuna',
	'sabra',
	'green grape',
	'red grape',
	'purple grape',
	'black grape',
	'seedless grape',
	'concord grape',
	'thompson seedless',
	'crimson seedless',
	'muscat grape',
	'champagne grape',
	'raisin',
	'sultana',
	'dried currant',
	'dried apricot',
	'prune',
	'dried plum',
	'sweet cherry',
	'sour cherry',
	'tart cherry',
	'bing cherry',
	'rainier cherry',
	'cherry plum',
	'myrobalan',
	'bartlett pear',
	'bosc pear',
	'anjou pear',
	'comice pear',
	'seckel pear',
	'red apple',
	'green apple',
	'yellow apple',
	'honeycrisp apple',
	'fuji apple',
	'gala apple',
	'pink lady apple',
	'granny smith apple',
	'golden delicious apple',
	'red delicious apple',
	'mcintosh apple',
	'braeburn apple',
	'jazz apple',
	'envy apple',
	'cosmic crisp apple',
	'navel orange',
	'valencia orange',
	'blood orange',
	'clementine',
	'satsuma',
	'tangelo',
	'minneola',
	'ugli fruit',
	'white grapefruit',
	'pink grapefruit',
	'red grapefruit',
	'pomelo',
	'shaddock',
	'meyer lemon',
	'eureka lemon',
	'lisbon lemon',
	'key lime',
	'persian lime',
	'kaffir lime',
	'bergamot',
	'yuzu',
	'kumquat',
	'calamondin',
	'finger lime',
	'lemonade fruit',
	'rangpur',
	'mandarin lime',
	'smooth cayenne pineapple',
	'golden pineapple',
	'sugarloaf pineapple',
	'baby pineapple',
	'alphonso mango',
	'tommy atkins mango',
	'haden mango',
	'kent mango',
	'keitt mango',
	'ataulfo mango',
	'manila mango',
	'seedless watermelon',
	'yellow watermelon',
	'mini watermelon',
	'muskmelon',
	'charentais melon',
	'green honeydew',
	'orange honeydew',
	'crenshaw melon',
	'casaba melon',
	'canary melon',
	'galia melon',
	'melon',
	'winter melon',
	'wax gourd',
	'ash gourd',
	'bitter melon',
	'bitter gourd',
	' karela',
	'sponge gourd',
	'luffa',
	'ridge gourd',
	'snake gourd',
	'bottle gourd',
	'calabash'
]

const options = ref(data)
</script>

<style lang="css" scoped>
.px-select {
	width: 320px;
}
</style>

Custom Rendering of Options

Render options in a custom way via slots.

Please input

<template>
	<px-select placeholder="Please input" v-model="input" :options="options">
		<template #group-label="{ option }">
			{{ option.label }}
			<div
				style="margin-left: 12px; color: red; font-size: 16px"
				v-if="option.label === 'citrus fruits'"
			>
				HOT!
			</div>
		</template>
		<template #option="{ option }">
			{{ option.label }}
			<px-tag style="margin-left: 12px" v-if="option.value === 'orange'">NEW!</px-tag>
		</template>
		<template #label="{ label, value }">
			{{ label }}
			<px-tag style="margin-left: 12px" v-if="value === 'orange'">NEW!</px-tag>
		</template>
	</px-select>
</template>
<script setup lang="ts">
import { ref } from 'vue'

const input = ref<null | string>(null)

const options = ref([
	{
		type: 'group',
		label: 'citrus fruits',
		children: [
			{ label: 'orange', value: 'orange' },
			{ label: 'lemon', value: 'lemon' },
			{ label: 'lime', value: 'lime' },
			{ label: 'grapefruit', value: 'grapefruit' },
			{ label: 'tangerine', value: 'tangerine' }
		]
	},
	{
		type: 'group',
		label: 'tropical fruits',
		children: [
			{ label: 'mango', value: 'mango' },
			{ label: 'pineapple', value: 'pineapple' },
			{ label: 'papaya', value: 'papaya' },
			{ label: 'dragon fruit', value: 'dragon fruit' },
			{ label: 'durian', value: 'durian' },
			{ label: 'lychee', value: 'lychee' },
			{ label: 'longan', value: 'longan' }
		]
	}
])
</script>

<style lang="css" scoped>
.px-select {
	width: 320px;
}
</style>

More Options

The Select component also inherits parts of Input, InputTag, and AutoComplete functionalities.

Disabled, Readonly, Loading & Clearable

Please input

Shape

Please input

Size

Please input

Slot

prefix

Please input

suffix

Composite

Please input

Status

Please input

Expose

Please input

Tag Render

Please input

<template>
	<px-space direction="vertical">
		<h4>Disabled, Readonly, Loading & Clearable</h4>
		<px-space>
			<px-select placeholder="Please input" disabled :options="options"></px-select>
			<px-select placeholder="Please input" readonly :options="options"></px-select>
			<px-select placeholder="Please input" loading :options="options"></px-select>
			<px-select placeholder="Please input" clearable :options="options"></px-select>
		</px-space>
		<h4>Shape</h4>
		<px-space>
			<px-select placeholder="Please input" shape="round" :options="options"></px-select>
			<px-select placeholder="Please input" :options="options"></px-select>
		</px-space>
		<h4>Size</h4>
		<px-space>
			<px-select placeholder="Please input" size="small" :options="options"></px-select>
			<px-select placeholder="Please input" :options="options"></px-select>
			<px-select placeholder="Please input" size="large" :options="options"></px-select>
		</px-space>
		<h4>Slot</h4>
		<px-space>
			<px-select placeholder="Please input" :options="options">
				<template #prefix>prefix</template>
				<template #suffix>suffix</template>
			</px-select>
		</px-space>
		<h4>Composite</h4>
		<px-space>
			<px-input-group>
				<px-input-group-label>
					<IconBolt></IconBolt>
				</px-input-group-label>
				<px-select placeholder="Please input" :options="options"> </px-select>
				<px-button>Confirm</px-button>
			</px-input-group>
		</px-space>
		<h4>Status</h4>
		<px-space>
			<px-select placeholder="Please input" :options="options"> </px-select>
			<px-select placeholder="Please input" :options="options" status="success"> </px-select>
			<px-select placeholder="Please input" :options="options" status="warning"> </px-select>
			<px-select placeholder="Please input" :options="options" status="error"> </px-select>
		</px-space>
		<h4>Expose</h4>
		<px-space direction="vertical">
			<px-space>
				<px-button theme="info" @click="focusHandler">Focus & Blur after 5s</px-button>
				<px-button theme="warning" @click="clearHandler">Clear</px-button>
			</px-space>
			<px-select placeholder="Please input" :options="options" ref="selectRef"></px-select>
		</px-space>
		<h4>Tag Render</h4>
		<px-select placeholder="Please input" multiple :options="options">
			<template #tag="{ label }">
				<div style="display: flex; align-items: center">
					<IconBolt style="margin-right: 4px"></IconBolt> {{ label }}
				</div>
			</template>
		</px-select>
	</px-space>
</template>

<script setup lang="ts">
import { IconBolt } from '@pixelium/web-vue/icon-hn/es'
import { ref } from 'vue'
import { Select } from '@pixelium/web-vue'

// If on-demand import
// import { Select } from '@pixelium/web-vue/es'

const selectRef = ref<InstanceType<typeof Select> | null>(null)

const focusHandler = () => {
	setTimeout(() => {
		selectRef.value?.focus()
		setTimeout(() => {
			selectRef.value?.blur()
		}, 5000)
	}, 50)
}
const clearHandler = () => {
	selectRef.value?.clear()
}

const options = ref([
	{
		type: 'group',
		label: 'citrus fruits',
		children: [
			{ label: 'orange', value: 'orange' },
			{ label: 'lemon', value: 'lemon' },
			{ label: 'lime', value: 'lime' },
			{ label: 'grapefruit', value: 'grapefruit' },
			{ label: 'tangerine', value: 'tangerine' }
		]
	},
	{
		type: 'group',
		label: 'tropical fruits',
		children: [
			{ label: 'mango', value: 'mango' },
			{ label: 'pineapple', value: 'pineapple' },
			{ label: 'papaya', value: 'papaya' },
			{ label: 'dragon fruit', value: 'dragon fruit' },
			{ label: 'durian', value: 'durian' },
			{ label: 'lychee', value: 'lychee' },
			{ label: 'longan', value: 'longan' }
		]
	}
])
</script>

<style lang="css" scoped>
.px-select {
	width: 320px;
}
</style>

API

SelectProps

Attribute	Type	Optional	Default	Description	Version
modelValue	`any`	True		Current value (controlled), supports `v-model`.	0.0.2
defaultValue	`any`	True		Default value when uncontrolled.	0.0.2
options	`string`	True		Array of options.	0.0.2
placeholder	`string`	True		Placeholder text.	0.0.2
disabled	`boolean`	True	`false`	Disable the whole selector.	0.0.2
readonly	`boolean`	True	`false`	Make the selector read-only.	0.0.2
clearable	`boolean`	True	`false`	Show a clear button.	0.0.2
multiple	`boolean`	True	`false`		0.0.2
loading	`boolean`	True	`false`	Show loading state.	0.0.2
inputValue	`string \| null`	True		Search input text (controlled), supports `v-model`.	0.0.2
defaultInputValue	`string \| null`	True		Default search input text when uncontrolled.	0.0.2
filterable	`boolean`	True	`false`	Enable search within options.	0.0.2
shouldShowPopover	`(value: string, optionsFiltered: (string \| SelectOption \| SelectGroupOption)[]) => boolean`	True		Function to determine whether to show the popover.	0.0.2
filter	`(keyword: string, options: (string \| SelectOption \| SelectGroupOption)[]) => (string \| SelectOption \| SelectGroupOption)[]`	True		Function to filter options.	0.0.2
creatable	`boolean`	True	`false`	Allow creating new options; requires `filterable`.	0.0.2
collapseTags	`boolean`	True	`false`	Collapse selected tags in multi-select mode.	0.0.2
maxDisplayTags	`number`	True		Max number of visible tags when `collapseTags` is on.	0.0.2
collapseTagsPopover	`boolean`	True	`true`	Show collapsed tags in a popover when `collapseTags` is on.	0.0.2
virtualScroll	`boolean`	True	`false`	Whether render options with virtual list.	0.0.3
virtualListProps	`Omit<VirtualListProps, 'list' \| 'fixedHeight'>`	True		Properties of virtual list.	0.0.3
tagProps	`Omit<TagProps, 'size' \| 'disabled' \| 'closable'> & EmitEvent<TagEvents>`	True		Properties of tags.	0.0.3
size	`'medium' \| 'large' \| 'small'`	True	`'medium'`	Size of the selector.	0.0.2
shape	`'rect' \| 'round'`	True	`'rect'`	Shape of the selector.	0.0.3
borderRadius	`NumberOrPercentage \| NumberOrPercentage[]`	True		Border-radius value; higher priority than `shape`. Single value or 1-item array → all corners; 2-item array → [top-left & bottom-right, top-right & bottom-left]; 3-item array → [top-left, top-right & bottom-left, bottom-right]; 4-item array → clockwise order for all four corners.	0.0.2
status	`'success' \| 'warning' \| 'error' \| 'normal'`	True	`'normal'`	Form validation status.	0.0.2
tagTheme	`'primary' \| 'sakura' \| 'success' \| 'warning' \| 'danger' \| 'info'`	True	`'info'`	Deprecated `theme` properties for tags (color theme).	0.0.2
tagVariant	`'primary' \| 'plain' \| 'outline'`	True	`'plain'`	Deprecated `variant` properties for tags (style variant).	0.0.2
tagColor	`string`	True		Deprecated `color` properties for tags (custom color).	0.0.2
popoverProps	`Omit<PopoverProps, 'visible' \| 'content'> & EmitEvent<PopoverEvents>`	True		Popover component properties when tags are collapsed.	0.0.3
optionsDestroyOnHide	`boolean`	True	`false`	Whether the dropdown options will be destroyed when hidden.	0.0.3

SelectEvents

Event	Parameter	Description	Version
input	`value: string, e: Event`	Fired on search input.	0.0.2
update:modelValue	`value: any`	Fired when `modelValue` changes.	0.0.2
update:inputValue	`value: string`	Fired when `inputValue` changes.	0.0.2
change	`value: any`	Fired when selection changes.	0.0.2
change	`value: string, e: Event \| undefined`	Fired when selection changes.	0.0.2
clear	`value: any`	Fired when the clear button is clicked.	0.0.2
blur		Fired when the selector loses focus.	0.0.2
focus	`event: FocusEvent`	Fired when the selector gains focus.	0.0.2
select	`value: any, e: MouseEvent`	Fired when an option is selected.	0.0.2
tagClose	`value: any, e: MouseEvent`	Fired when a tag is closed.	0.0.2

SelectSlots

Slot	Parameter	Description	Version
prefix		Prefix content.	0.0.2
suffix		Suffix content.	0.0.2
option	`option: string \| SelectOption`	Custom option content.	0.0.2
group-label	`option: SelectGroupOption`	Custom group-label content.	0.0.2
tag	`value: any, label: string, index: number, disabled: boolean, readonly: boolean`	Custom tag content.	0.0.3
label	`value: any, label: string, disabled: boolean, readonly: boolean`	Selected content.	0.0.3

SelectExpose

Attribute	Type	Optional	Description	Version
focus	`() => void`	False	Focus the selector.	0.0.2
blur	`() => void`	False	Blur the selector.	0.0.2
clear	`() => void`	False	Clear the current input.	0.0.2

SelectOption, SelectGroupOption

export interface Option<T = any> {
	value: T
	label: string
}

export interface GroupOption<T = any> {
	children: (Option<T> | string)[]
	type: typeof GROUP_OPTION_TYPE
}

export interface OptionListOption<T = any> extends Option<T> {
	disabled?: boolean
	key?: string | number | symbol
}

export interface OptionListGroupOption extends GroupOption {
	label: string
	key: string | number | symbol
	children: (OptionListOption | string)[]
}

export interface SelectOption extends OptionListOption<any> {
}

export interface SelectGroupOption extends OptionListGroupOption {
	children: (SelectOption | string)[]
}

EmitEvent

export type EmitEvent<T extends Record<string, any>> = {
	[K in keyof T as `on${Capitalize<K & string>}`]?: (...args: T[K]) => void
}

Select ​

Basic Usage ​

Disabled Options ​

Groups ​

Remote Loading ​

Multiple Selection ​

Collapsed Tags ​

Searchable Options ​

Adding Options ​

Virtual List ​

Custom Rendering of Options ​

More Options ​

Disabled, Readonly, Loading & Clearable

Shape

Size

Slot

Composite

Status

Expose

Tag Render

API ​

SelectProps ​

SelectEvents ​

SelectSlots ​

SelectExpose ​

SelectOption, SelectGroupOption ​

EmitEvent ​

Select

Basic Usage

Disabled Options

Groups

Remote Loading

Multiple Selection

Collapsed Tags

Searchable Options

Adding Options

Virtual List

Custom Rendering of Options

More Options

API

SelectProps

SelectEvents

SelectSlots

SelectExpose

SelectOption, SelectGroupOption

EmitEvent