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 |
|---|
| 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 |
|---|
