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).
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 | " |
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.
Name | Value | Description | Example |
---|---|---|---|
filterInputChanged |
string |
Returns search term when filter input changes | 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 | " |
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 |
Name | Parameter | Description | Example |
---|---|---|---|
select |
value: string |
Select option with given value | example |
clear |
- | Clear selection. | example |