API Reference e-select
This component features render debouncing.
You may have to wait for the next browser tick after rendering in your integration/E2E tests.
HTML Attributes API
Name |
Description |
Type |
Required |
Default value |
items |
Set select options
The items passed are not sanitized, you have to sanitize it in the application code to avoid XSS attacks.
|
array *
|
|
[] |
name |
Defines name for submitting value |
string |
|
|
value |
Set or gets the value that would be submitted / selects an item by its value |
string |
|
|
content |
Gets the human-readable value (content) of the selected item |
string |
|
|
tabindex |
Changes tabindex of component |
number |
|
0 |
placeholder |
Defines the select placeholder if none of the options is selected |
string |
|
|
disabled |
Sets disabled state |
boolean |
|
false |
readonly |
Sets readonly state |
boolean |
|
false |
size |
Renders select in given size |
"small" | "medium" | "large" |
|
|
inline |
Shows select as inline block |
boolean |
|
false |
borderless |
Renders borderless select |
boolean |
|
false |
error |
Sets error state of component |
boolean |
|
false |
loading |
Sets loading state of the action list |
boolean |
|
false |
opened |
Can be used to control the opened/closed state of the component from an attribute
To toggle it from JavaScript use the open() and the close() actions instead
|
boolean |
|
false |
disable-min-width |
Sets the min-width style of the component to 0 |
boolean |
|
false |
always-show-search |
Show search input even if there are less than 8 options |
boolean |
|
false |
search-hidden |
Hide search input even if there are more than 8 options |
boolean |
|
false |
clear-visible |
Shows a clear button (requires a placeholder) |
boolean |
|
false |
item-limit |
Sets the maximum number of items (options) in the select. Exceeding the limit hides items over the limit, makes them only show up by searching. |
number |
|
0 |
*
: An example of an items
property value:
[
{ type: 'option', content: 'simple option 1', value: 'option1' },
{ type: 'group', label: 'group 1', items: [
{ type: 'option', content: 'option 2', value: 'group1option2' }
] },
{ type: 'group', label: 'group 2', items: [
{ type: 'option', content: 'option 3', value: 'group2option3' },
{ type: 'option', content: 'option 4', value: 'group2item4', selected: true }
] }
]
JavaScript API
Name |
Type |
Description |
Arguments |
open() |
|
Opens the list of options |
|
close() |
|
Closes the list of options |
|
Events
Event |
Description |
Returns |
change |
Fires on item selection change |
Change event |
search |
Fires on input in search field |
{
detail: {
value: "[value]"
}
}
|
open |
Fires on popup open |
|
close |
Fires on popup close |
|
API Reference e-select-option
HTML Attributes API
Name |
Description |
Type |
Required |
Default value |
value |
Defines option value |
string |
|
|
selected |
Set option to default selected |
boolean |
|
false |
disabled |
Set option to disabled. |
boolean |
|
false |
API Reference e-select-group
HTML Attributes API
Name |
Description |
Type |
Required |
Default value |
label |
Defines name of the group |
string |
|
|