Tag name: <vscode-single-select>
Allows to select an item from multiple 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 |
---|
Type | boolean
|
---|
Default | false
|
---|
Description | Options can be filtered by typing into a text input field.
|
---|
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 |
---|
Type | HTMLFormElement | null
|
---|
invalidreflects
Name | invalid |
---|
Attribute | invalid |
---|
Type | boolean
|
---|
Default | false
|
---|
Description | Sets the invalid state manually.
|
---|
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
|
---|
selectedIndex
Name | selectedIndex |
---|
Attribute | selected-index |
---|
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
Methods
checkValidity()
: boolean
reportValidity()
: boolean
Events
change
input
vsc-changedeprecated
Name | vsc-change |
---|
Type | CustomEvent |
---|
Description | |
---|
CSS Custom Properties
--dropdown-z-index
Name | --dropdown-z-index |
---|
Default value | 2 |
---|
Description | workaround for dropdown z-index issues
|
---|
--vscode-badge-background
Name | --vscode-badge-background |
---|
--vscode-badge-foreground
Name | --vscode-badge-foreground |
---|
--vscode-focusBorder
--vscode-font-family
--vscode-font-size
--vscode-font-weight
--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-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 |
---|