SingleSelect

• Docs
• API

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

Name	willValidate

Methods

checkValidity() : boolean

Name	checkValidity

reportValidity() : boolean

Name	reportValidity

Events

change

Name	change
Type	Event

input

Name	input
Type	Event

vsc-changedeprecated

Name	vsc-change
Type	CustomEvent
Description	Deprecation warning! true

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

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