Select Multiple

Select component is used as wrapper to any existing <SELECT multiple> element and allows customisation of the dropdown, allow to search through options whilst keeping original select functionality.

It is keyboard accessible and allows to cycle through options with Up and Down arrow keys as well as Tab key.

Examples (2)

Example	Code
	`<as-select-multiple>[select multiple element]</as-select-multiple>`
	`<as-select-multiple locale="Vælg flere muligheder\|Søg...\|mere">[select multiple element]</as-select-multiple>`

Properties (1)

Property name	Description	Type
locale	Optional: Pipe-delimited string, when present defines component descriptive texts, defaults to Select multiple options\|Search...\|more	string

Events (6)

Event name	Description	Example value
as-select-multiple:created	Fired when component is rendered. Has detail object.	{id: "94899fa0-8732-4e35-b419-9aa93360865b", action: "created"}
as-select-multiple:show	Fired when dropdown is shown. Has detail object.	{id: "94899fa0-8732-4e35-b419-9aa93360865b", action: "show"}
as-select-multiple:hide	Fired when dropdown is hid. Has detail object.	{id: "94899fa0-8732-4e35-b419-9aa93360865b", action: "hide"}
as-select-multiple:selected	Fired when option is selected. Has detail object.	{id: "94899fa0-8732-4e35-b419-9aa93360865b", action: "selected", name: "Arsenic", value: "1"}
as-select-multiple:deselected	Fired when option is deselected. Has detail object.	{id: "94899fa0-8732-4e35-b419-9aa93360865b", action: "deselected", name: "Spider venom", value: "4"}
as-select-multiple:search	Fired when user start typing within component's <INPUT> element. Has detail object.	{id: "94899fa0-8732-4e35-b419-9aa93360865b", action: "search", searchword: "acid"}

Files