Select

Use drop-down menus to display and select content from many options.

Basic Usage

Standard single select for a wide variety of scenarios.

Basic Usage

Disabled Option

Set the disabled property in an option to disable it.

Disabled Option

Disabled State

Use the disabled property to disable the entire select component.

Option 1

Disabled State

Clearable Single Select

Set the clearable property to allow clearing the selected value.

Option 1

Clearable

Multiple Select

Set the multiple property to enable multiple selection. In this case, v-model will be an array of selected values.

Multiple Select

Collapse Tags

When in multiple selection mode, use the collapse-tags property to collapse tags.

Option 1Option 2 +1

Collapse Tags

Filterable

Set the filterable property to enable the search feature.

Filterable

Remote Search

Set the remote and remote-method properties to search for data from a server.

Remote Search

Allow Create

Set the allow-create property to allow users to create new items. Must be used with filterable.

Allow Create

Virtual Scroll

When dealing with a large number of options, use virtual scrolling to optimize performance. Set the virtual-scroll property to enable it.

Virtual Scroll

Full Virtual Scroll Configuration

Customize row height and container height for virtual scrolling using item-height and height properties.

• virtual-scroll: Enable virtual scrolling.
• item-height: Height for each option (default 34px).
• height: Height for the dropdown container (default 274px).

Full Virtual Scroll Configuration

Different Sizes

Use the size property to change the size of the select input.

Different Sizes

Use in Nuxt

The Select component fully supports Nuxt 3/4 SSR rendering. In Nuxt projects, the component is auto-imported.

Use in Nuxt

SSR Notes:

• ✅ Basic selection functionality is fully supported.
• ✅ Multiple selection and tag collapsing are supported.
• ✅ Option grouping and searching are supported.
• ✅ Remote search is supported.
• ✅ Virtual scrolling (initializes in basic mode on the server, optimizes automatically upon client activation).
• ⚠️ DOM methods like focus() and blur() must be called inside onMounted.

SSR Safety

The Select component has passed comprehensive SSR tests, ensuring that server-side and client-side rendered HTML structures are consistent, maintaining compatibility with Nuxt's hydration process.

API

Props

Prop	Description	Type	Default
model-value / v-model	Binding value	string | number | boolean | array	—
options	Option data	SelectOption[]	[]
placeholder	Placeholder text	string	—
disabled	Whether to disable	boolean	false
clearable	Whether it is clearable	boolean	false
size	Input size	'large' | 'default' | 'small'	'default'
multiple	Whether multiple selection is enabled	boolean	false
multiple-limit	Max number of labels in multiple selection, 0 for unlimited	number	0
filterable	Whether search is enabled	boolean	false
filter-method	Custom filter method	(query: string) => void	—
remote	Whether to load options from a remote server	boolean	false
remote-method	Remote search method	(query: string) => void	—
loading	Whether data is loading	boolean	false
loading-text	Loading text	string	'Loading...'
no-match-text	Text displayed when no data matches the search	string	'No matching data'
no-data-text	Text displayed when there is no data	string	'No data'
allow-create	Whether to allow creating new options	boolean	false
collapse-tags	Whether to collapse tags in multiple selection	boolean	false
max-collapse-tags	Max number of visible tags before collapsing	number	1
virtual-scroll	Whether to enable virtual scrolling	boolean	false
item-height	Height for each virtual scroll item	number	34
height	Height for the virtual scroll container	number	274
teleported	Whether to insert the dropdown into body	boolean	true
fit-input-width	Whether the dropdown width matches the input width	boolean	true
tag-type	Type of tags	'success' | 'info' | 'warning' | 'danger' | ''	''
value-key	Key name for the value	string	'value'
label-key	Key name for the label	string	'label'

SelectOption

Prop	Description	Type	Required
value	Option value	string | number | boolean	Yes
label	Option label	string	Yes
disabled	Whether the option is disabled	boolean	No

Events

Event Name	Description	Callback Parameters
change	Triggered when the selected value changes	(value: any) => void
focus	Triggered on focus	(event: FocusEvent) => void
blur	Triggered on blur	(event: FocusEvent) => void
clear	Triggered when the clear button is clicked	() => void
visible-change	Triggered when the dropdown visibility changes	(visible: boolean) => void
remove-tag	Triggered when a tag is removed in multiple selection	(value: any) => void

Slots

Slot Name	Description	Scope
default	Custom option content	{ option: SelectOption }
prefix	Content before the input	—
empty	Content when there is no data	—

Expose

Name	Description	Type
focus	Focus the Select input	() => void
blur	Blur the Select input	() => void

Theme Variables

The Select component uses the following CSS variables, which can be overridden for custom styling:

Variable	Description	Default
--yh-select-border-color	Border color	var(--yh-border-color)
--yh-select-hover-border-color	Hover border color	var(--yh-border-color-hover)
--yh-select-focus-border-color	Focus border color	var(--yh-color-primary)
--yh-select-disabled-bg-color	Disabled background color	var(--yh-fill-color-light)
--yh-select-tag-bg-color	Tag background color	var(--yh-fill-color)