Select API

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