🌏 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.

Please Select

Vue

Please Select

Vue

Hide source code

Disabled Options

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

Please Select

Vue

Please Select

Vanilla

Hide source code

Groups

The options array also supports option groups.

Please Select

Vue

Hide source code

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

Hide source code

Multiple Selection

Add the multiple prop to enable multi-select mode.

Please Select

Hide source code

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

Please select

Hide source code

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

Please select

Hide source code

Adding Options

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

Please select

Please select

Hide source code

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

Hide source code

Custom Rendering of Options

Render options in a custom way via slots.

Please input

Hide source code

More Options

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

Disabled, Readonly, Loading & Clearable

Please input

Please input

Please input

Please input

Shape

Please input

Please input

Size

Please input

Please input

Please input

Slot

prefix

Please input

suffix

Composite

Please input

Status

Please input

Please input

Please input

Please input

Expose

Please input

Tag Render

Please input

Hide source code

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'> & RestAttrs	True		Properties of virtual list.	0.0.3
tagProps	Omit<TagProps, 'size' | 'disabled' | 'closable'> & EmitEvent<TagEvents> & RestAttrs	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
popoverProps	Omit<PopoverProps, 'visible' | 'content'> & EmitEvent<PopoverEvents>	True		Popover component properties when tags are collapsed.	0.2.0
optionsDestroyOnHide	boolean	True	false	Whether the dropdown options will be destroyed when hidden.	0.0.3
pollSizeChange	boolean	True	false	Enables polling for component size changes. This also affects the property of the same name in data input components that are child components.	0.1.0

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, option: string | SelectOption, 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
dropdownOpen		Callback when the dropdown panel is opened.	0.2.0
dropdownClose		Callback when the dropdown panel is closed.	0.2.0

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	Default	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

Option, GroupOption

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

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

OptionListOption, OptionListOption

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)[]
}

SelectOption, SelectGroupOption

export interface SelectOption extends OptionListOption<any> {
}

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

RestAttrs

import type { StyleValue } from 'vue'

export type VueClassValue = string | Record<string, any> | VueClassValue[]
export type VueStyleValue = StyleValue

export type RestAttrs = {
	style?: VueStyleValue | null
	class?: VueClassValue | null
	[x: string]: any
}

EmitEvent

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