Multi Select

<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

combobox reflected
Attributecombobox
Typeboolean
Defaultfalse
defaultValue
Attributedefault-value
Typestring[]
Default[]
disabled reflected
Attributedisabled
Typeboolean
filter

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.
Attributefilter
Type'contains' | 'fuzzy' | 'startsWith' | 'startsWithPerTerm'
Default'fuzzy'
focused reflected
Attributefocused
Typeboolean
Defaultfalse

form readonly

formAssociated static
Typeboolean
Defaulttrue
invalid reflected

Sets the invalid state manually.

Attributeinvalid
Typeboolean
Defaultfalse
name reflected
Attributename
Typestring | undefined
Defaultundefined
options
Attributeoptions
TypeOption[]
position reflected

Position of the options list when visible.

Attributeposition
Type'above' | 'below'
Default'below'
required reflected
Attributerequired
Typeboolean
Defaultfalse
selectedIndexes
Typenumber[]
validationMessage readonly
Typestring
validity readonly
TypeValidityState
value
Attributevalue
Typestring[]
version readonly

VSC Element version

willValidate readonly

Methods

checkValidity
Returnboolean
reportValidity
Returnboolean

Events

change
TypeEvent
input
TypeEvent
vsc-change deprecated
TypeCustomEvent

Custom CSS Properties

--dropdown-z-index

workaround for dropdown z-index issues

Default2

--vscode-badge-background

--vscode-badge-foreground

--vscode-focusBorder

--vscode-font-family

--vscode-font-size

--vscode-font-weight

--vscode-foreground

--vscode-list-activeSelectionBackground

--vscode-list-activeSelectionForeground

--vscode-list-focusHighlightForeground

--vscode-list-focusOutline

--vscode-list-highlightForeground

--vscode-list-hoverBackground

--vscode-list-hoverBackground

--vscode-list-hoverBackground

--vscode-list-hoverForeground

--vscode-settings-checkboxBackground

--vscode-settings-dropdownBackground

--vscode-settings-dropdownBorder

--vscode-settings-dropdownListBorder

--vscode-settings-textInputBackground