Single Select

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

Types

interface Option {
 label: string;
 value: string;
 description: string;
 selected: boolean;
 disabled: boolean;
}

Properties

combobox reflected: Attribute combobox
Type boolean
Default false
defaultValue: Attribute default-value
Type string
Default ''
disabled reflected: Attribute disabled
Type boolean
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.

Attribute filter
Type 'contains' | 'fuzzy' | 'startsWith' | 'startsWithPerTerm'
Default 'fuzzy'
focused reflected: Attribute focused
Type boolean
Default false
form readonly: Type HTMLFormElement | null
invalid reflected: Sets the invalid state manually.

Attribute invalid
Type boolean
Default false
name reflected: Attribute name
Type string | undefined
Default undefined
options: Attribute options
Type Option[]
position reflected: Position of the options list when visible.

Attribute position
Type 'above' | 'below'
Default 'below'
required reflected: Attribute required
Type boolean
Default false
selectedIndex: Attribute selected-index
Type number
validationMessage readonly: Type string
validity readonly: Type ValidityState
value: Attribute value
Type string
version readonly: VSC Element version

Attribute	combobox
Type	`boolean`
Default	`false`

Attribute	default-value
Type	`string`
Default	`''`

Attribute	disabled
Type	`boolean`

Attribute	filter
Type	`'contains' \| 'fuzzy' \| 'startsWith' \| 'startsWithPerTerm'`
Default	`'fuzzy'`

Attribute	focused
Type	`boolean`
Default	`false`

Type	`HTMLFormElement \| null`

Attribute	invalid
Type	`boolean`
Default	`false`

Attribute	name
Type	`string \| undefined`
Default	`undefined`

Attribute	options
Type	`Option[]`

Attribute	position
Type	`'above' \| 'below'`
Default	`'below'`

Attribute	required
Type	`boolean`
Default	`false`

Attribute	selected-index
Type	`number`

Type	`string`

Type	`ValidityState`

Attribute	value
Type	`string`

Methods

checkValidity: Return boolean
reportValidity: Return boolean

Return	`boolean`

Return	`boolean`

Events

change: Type Event
vsc-change deprecated: Type CustomEvent

Type	`Event`

Type	`CustomEvent`

Custom CSS Properties

--dropdown-z-index: workaround for dropdown z-index issues

Default 2