MultiSelect

• Docs
• API

Tag name: <vscode-multi-select>

Allows to select multiple items from a list of options.

When participating in a form, it supports the :invalid pseudo class. Otherwise the error styles can be applied through the invalid property.

Properties

comboboxreflects

Name	combobox
Attribute	combobox
Description	Options can be filtered by typing into a text input field.

creatablereflects

Name	creatable
Attribute	creatable
Type	boolean
Default	false

defaultValue

Name	defaultValue
Attribute	default-value
Type	string[]
Default	[]

disabledreflects

Name	disabled
Attribute	disabled
Type	boolean
Description	The element cannot be used and is not focusable.

filter

Name	filter
Attribute	filter
Type	'contains' | 'fuzzy' | 'startsWith' | 'startsWithPerTerm'
Default	'fuzzy'
Description	Search method in the filtered list within the combobox mode. contains - The list item includes the searched pattern at any position. fuzzy - The list item contains the letters of the search pattern in the same order, but at any position. startsWith - The search pattern matches the beginning of the searched text. startsWithPerTerm - The search pattern matches the beginning of any word in the searched text.

focusedreflects

Name	focused
Attribute	focused
Type	boolean
Default	false
Description	Its value is true when element is focused.

formreadonly

Name	form

formAssociatedstatic

Name	formAssociated
Type	boolean
Default	true

invalidreflects

Name	invalid
Attribute	invalid
Type	boolean
Default	false
Description	Sets the invalid state manually.

labelreflects

Name	label
Attribute	label
Type	string
Default	''
Description	Accessible label for screen readers. When a <vscode-label> is connected to the component, it will be filled automatically.

multiSelect

Name	multiSelect
Type	boolean
Default	true

namereflects

Name	name
Attribute	name
Type	string | undefined
Default	undefined

openreflects

Name	open
Attribute	open
Type	boolean
Default	false
Description	Toggle the dropdown visibility.

options

Name	options
Attribute	options
Type	Option[]

positionreflects

Name	position
Attribute	position
Type	'above' | 'below'
Default	'below'
Description	Position of the options list when visible.

requiredreflects

Name	required
Attribute	required
Type	boolean
Default	false

selectedIndexes

Name	selectedIndexes
Type	number[]

validationMessagereadonly

Name	validationMessage
Type	string

validityreadonly

Name	validity
Type	ValidityState

value

Name	value
Attribute	value
Type	string[]

versionreadonly

Name	version
Type	string
Description	VSCode Elements version

willValidatereadonly

Name	willValidate

Methods

checkValidity() : boolean

Name	checkValidity

reportValidity() : boolean

Name	reportValidity

selectAll()

Name	selectAll

selectNone()

Name	selectNone

Events

change

Name	change
Type	Event

input

Name	input
Type	Event

CSS Custom Properties

--dropdown-z-index

Name	--dropdown-z-index
Default value	2

--vscode-badge-background

Name	--vscode-badge-background
Default value	#616161

--vscode-badge-foreground

Name	--vscode-badge-foreground
Default value	#f8f8f8

--vscode-focusBorder

Name	--vscode-focusBorder
Default value	#0078d4

--vscode-font-family

Name	--vscode-font-family
Default value	sans-serif

--vscode-font-size

Name	--vscode-font-size
Default value	13px

--vscode-font-weight

Name	--vscode-font-weight
Default value	normal

--vscode-foreground

Name	--vscode-foreground
Default value	#cccccc

--vscode-inputValidation-errorBackground

Name	--vscode-inputValidation-errorBackground
Default value	#5a1d1d

--vscode-inputValidation-errorBorder

Name	--vscode-inputValidation-errorBorder
Default value	#be1100

--vscode-list-activeSelectionBackground

Name	--vscode-list-activeSelectionBackground
Default value	#04395e

--vscode-list-activeSelectionForeground

Name	--vscode-list-activeSelectionForeground
Default value	#ffffff

--vscode-list-focusHighlightForeground

Name	--vscode-list-focusHighlightForeground
Default value	#2aaaff

--vscode-list-focusOutline

Name	--vscode-list-focusOutline
Default value	#0078d4

--vscode-list-highlightForeground

Name	--vscode-list-highlightForeground
Default value	#2aaaff

--vscode-list-hoverBackground

Name	--vscode-list-hoverBackground
Default value	#2a2d2e

--vscode-list-hoverForeground

Name	--vscode-list-hoverForeground
Default value	#ffffff

--vscode-settings-checkboxBackground

Name	--vscode-settings-checkboxBackground
Default value	#313131

--vscode-settings-dropdownBackground

Name	--vscode-settings-dropdownBackground
Default value	#313131

--vscode-settings-dropdownBorder

Name	--vscode-settings-dropdownBorder
Default value	#3c3c3c

--vscode-settings-dropdownForeground

Name	--vscode-settings-dropdownForeground
Default value	#cccccc

--vscode-settings-dropdownListBorder

Name	--vscode-settings-dropdownListBorder
Default value	#454545