Select Component

Select is a form component that allows users to choose one or more options from a predefined list of options.

Basic Usage

Basic select for choosing a single option from a dropdown list.

Current value:

Input type

Text type

Show Code

Disabled State

Set the disabled attribute to disable the entire select, or set the disabled attribute of a specific option in options to disable that particular option.

Fully Disabled

Partial Options Disabled

Show Code

Different Sizes

Select supports three sizes: small, default, and large.

Small Size

Default Size

Large Size

Show Code

Clearable

Set the clearable attribute to create a clearable select, allowing users to quickly clear selected items.

Clear count: 0

Current value: 2

Show Code

Multiple Mode

Set the multiple attribute to enable multiple selection mode, allowing users to select multiple options.

Current value: []

Filterable Multiple

Custom View

Show Code

Filterable and Remote Search

Set the filterable attribute to enable filtering functionality, supporting local filtering, or implement remote search through remote-method.

Local Filtering

Custom Filter Method

Remote Search

Results will show after 1 second of typing

Show Code

Custom Options

Select supports customizing option content and prefix icons through slots.

Custom Prefix Icon

Custom Option Content

Custom Empty State

Show Code

Cascade Selection

Select supports cascade selection functionality, configure multi-level data through the children attribute.

Basic Cascade Selection

Current value:

Path Display Mode

Show Full Path

Show Last Level Only

Selection Mode Control

Strict Mode

Free Mode

Show Code

Select API

Attributes

Attribute	Description	Type	Accepted Values	Default
v-model	Binding value	string / number / object / array	—	—
v-model:loading	Loading state	boolean	—	false
options	Option data	array	—	[]
type	Select type	string	input / text	input
size	Size	string	small / default / large	default
clearable	Whether clearable	boolean	—	true
disabled	Whether disabled	boolean	—	false
empty-text	Text displayed when no data	string	—	No data
filterable	Whether filterable	boolean	—	false
multiple	Whether multiple selection	boolean	—	false
placeholder	Placeholder text	string	—	Please select
show-all-levels	Whether to show complete cascade path	boolean	—	true
check-strictly	Whether to strictly select leaf nodes	boolean	—	true
select-parent	Whether parent can be selected	boolean	—	false
remote-method	Remote search method	function(query)	—	—
filter-method	Custom filter method	function(option, query)	—	—

Option Configuration

Parameter	Description	Type	Accepted Values	Default
value	Option value	string / number / object	—	—
label	Option label	string	—	—
disabled	Whether to disable this option	boolean	—	false
children	Child option list for cascade selection	array	—	—
subLabel	Option sub-label	string	—	—

Events

Event Name	Description	Parameters
change	Triggered when option changes	(option: OptionsItemType)
clear	Triggered when clear button is clicked	—
visible-change	Triggered when dropdown visibility changes	(visible: boolean)
focus	Triggered when gaining focus	(event: FocusEvent)
blur	Triggered when losing focus	(event: FocusEvent)
remove-tag	Triggered when removing tag in multiple mode	(value: SingleValueType)
input	Triggered when input value changes in filterable mode	(value: string)
cascade-change	Triggered when cascade menu switches	(path: OptionsItemType[])

Methods

Method Name	Description	Parameters
focus	Focus select	—
blur	Blur select	—
clear	Clear selection	—

Slots

Slot Name	Description	Scope Parameters
default	Custom option content	{ row: OptionsItemType, index: number }
prefix	Select header content	—
multiple-view	Custom view in multiple mode	{ model: ValueType }
empty	Custom empty state content	—

Style Variables

The select component uses the following style variables, which can be customized through SCSS variables:

Variable Name	Description
$theme-color-primary	Theme color - Primary
$border-color-default	Default border color
$text-color-default	Default text color
$bg-color-default	Default background color
$bg-color-hover	Hover background color
$opacity-disabled	Disabled state opacity
$font-size-small	Small font size
$font-size-default	Default font size
$font-size-large	Large font size
$color-white	White color
$z-index-up	Upper layer z-index