Documentation

The IOption interface

Options must implement the IOption interface:

The label contains the text that is displayed in the drop-down. The value is the value to which the select component is set if the option is selected. The (optional) disabled property can be used to disable an option (disabled options cannot be selected).

Input properties

Name Type Default Description Example
options Array<IOption> [] Options that will populate the select drop down
multiple boolean false Set to true for multi-select
allowClear boolean false Only for single select, a clear selected button is shown if set to true example
disabled boolean false Disables the select component if set to true example
noFilter number 0 Filter is hidden if the number of options is smaller than the given number example
label string '' Shows a label with the given text above the select container example
placeholder string '' Text that is shown if no options are selected example
filterPlaceholder string '' Only for single select, text that is shown in empty filter input example
notFoundMsg string 'No results found' Text that is shown if there are no options found for the current filter input value example
highlightColor string '#2196f3' Background color of highlighted option example
highlightTextColor string '#fff' Text color of highlighted option "

Option template

The option labels are by default shown in the select drop-down. Alternatively, options can be customized by providing an option template. For custom rendering, other properties than the ones defined in the IOption interface can also be used. For example, the state property of the following option object:

can be used for setting a class value in the option template:

The option template example shows how an icon can be added in front of the option label.

Output events

Name Value Description Example
noOptionsFound string Returns search term if no options were found example
focus - Triggered when select component gets focus example
blur - Triggered when select component loses focus "
opened - Triggered when the select drop down is opened example
closed - Triggered when the select drop down is closed "
selected IOption Returns selected option example
deselected IOption Returns deselected option "

Keyboard interaction

Key Action
ENTER, ALT+KEYDOWN Open dropdown
ESC, ALT+KEYUP Close dropdown
KEYUP, KEYDOWN Navigate through options in the drop down
ENTER Select highlighted option
TAB Focus/blur the select container

Methods

Name Parameter Description Example
select value: string Select option with given value example
clear - Clear selection. example