<dy-select>
A select component allows users to choose one or multiple options from a dropdown list. It supports searching, custom rendering, and keyboard navigation.
Example
Loading...
<dy-select
.searchable=${true}
.multiple=${true}
.adder=${{"text":"New"}}
.placeholder=${"Please select!"}
.options=${[{"label":"Option 1"},{"label":"Option 2"}]}
@change=${(evt) => evt.target.value = evt.detail}></dy-select> <dy-select
.inline=${true}
.adder=${{"text":"New"}}
.options=${[{"label":"Option 1"},{"label":"Option 2"}]}
@change=${(evt) => evt.target.value = evt.detail}></dy-select>
API
Shadow DOM; Extends GemElement
Instance Properties
| Property(Attribute) | Reactive | Type |
|---|---|---|
multiple(multiple) |
Yes | boolean |
disabled(disabled) |
Yes | boolean |
searchable(searchable) |
Yes | boolean |
keepsearch(keepsearch) |
Yes | boolean |
inline(inline) |
Yes | boolean |
placeholder(placeholder) |
Yes | string |
borderless(borderless) |
Yes | boolean |
pinselected(pinselected) |
Yes | boolean |
loading(loading) |
Yes | boolean |
dropdownStyle |
Yes | StyleObject |
options |
Yes | Option[] |
adder |
Yes | Adder |
value |
Yes | any | any[] |
renderLabel |
Yes | (e: Option) => string | TemplateResult |
renderTag |
Yes | (e: Option) => string | TemplateResult |
change |
Emitter<any | any[]> |
|
search |
Emitter<string> |
Instance Methods
| Method | Type |
|---|---|
showPicker |
() => void |
setSearch |
(search: string) => void |
Other
| Type | Value |
|---|---|
| Event | change, search |
| Part | tag, value |
| CSS State | active |