Skip to content

MultiSelect

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
Namecombobox
Attributecombobox
Type

boolean

Default

false

Description

Options can be filtered by typing into a text input field.

defaultValue
NamedefaultValue
Attributedefault-value
Type

string[]

Default

[]

disabledreflects
Namedisabled
Attributedisabled
Type

boolean

Description

The element cannot be used and is not focusable.

filter
Namefilter
Attributefilter
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
Namefocused
Attributefocused
Type

boolean

Default

false

Description

Its value is true when element is focused.

formreadonly
Nameform
formAssociatedstatic
NameformAssociated
Type

boolean

Default

true

invalidreflects
Nameinvalid
Attributeinvalid
Type

boolean

Default

false

Description

Sets the invalid state manually.

namereflects
Namename
Attributename
Type

string | undefined

Default

undefined

openreflects
Nameopen
Attributeopen
Type

boolean

Default

false

Description

Toggle the dropdown visibility.

options
Nameoptions
Attributeoptions
Type

Option[]

positionreflects
Nameposition
Attributeposition
Type

'above' | 'below'

Default

'below'

Description

Position of the options list when visible.

requiredreflects
Namerequired
Attributerequired
Type

boolean

Default

false

selectedIndexes
NameselectedIndexes
Type

number[]

validationMessagereadonly
NamevalidationMessage
Type

string

validityreadonly
Namevalidity
Type

ValidityState

value
Namevalue
Attributevalue
Type

string[]

versionreadonly
Nameversion
Type

string

Description

VSCode Elements version

willValidatereadonly
NamewillValidate

Methods

checkValidity() : boolean
NamecheckValidity
reportValidity() : boolean
NamereportValidity

Events

change
Namechange
TypeEvent
input
Nameinput
TypeEvent
vsc-changedeprecated
Namevsc-change
TypeCustomEvent
Description

CSS Custom Properties

--dropdown-z-index
Name--dropdown-z-index
Default value2
Description

workaround for dropdown z-index issues

--vscode-badge-background
Name--vscode-badge-background
--vscode-badge-foreground
Name--vscode-badge-foreground
--vscode-focusBorder
Name--vscode-focusBorder
--vscode-font-family
Name--vscode-font-family
--vscode-font-size
Name--vscode-font-size
--vscode-font-weight
Name--vscode-font-weight
--vscode-foreground
Name--vscode-foreground
--vscode-list-activeSelectionBackground
Name--vscode-list-activeSelectionBackground
--vscode-list-activeSelectionForeground
Name--vscode-list-activeSelectionForeground
--vscode-list-focusHighlightForeground
Name--vscode-list-focusHighlightForeground
--vscode-list-focusOutline
Name--vscode-list-focusOutline
--vscode-list-highlightForeground
Name--vscode-list-highlightForeground
--vscode-list-hoverBackground
Name--vscode-list-hoverBackground
--vscode-list-hoverBackground
Name--vscode-list-hoverBackground
--vscode-list-hoverBackground
Name--vscode-list-hoverBackground
--vscode-list-hoverForeground
Name--vscode-list-hoverForeground
--vscode-settings-checkboxBackground
Name--vscode-settings-checkboxBackground
--vscode-settings-dropdownBackground
Name--vscode-settings-dropdownBackground
--vscode-settings-dropdownBorder
Name--vscode-settings-dropdownBorder
--vscode-settings-dropdownListBorder
Name--vscode-settings-dropdownListBorder
--vscode-settings-textInputBackground
Name--vscode-settings-textInputBackground