...
The drop-down consists of:
...
State | Visual | |
---|
Regular |  | |
Hover |  | |
Active |  | |
Selected |  | |
Disabled |  | |
Read-Only | Image Added | |
Error |  | |
Warning |  | |
Focused |  | |
Focused, Hover |  | |
Focused, Active |  | |
Focused, Disabled |  | |
...
Interaction | Visual | Details |
---|
Click the trigger area |  | |
Enter Search |  | As characters are entered, the list is filtered to show matching results only. The filter can match anywhere within the value string (at the beginning, middle, or end). The part of the option label which matches the search string should be shown in bold. The user may use the Up and Down keys to navigate between options and Enter to select.
|
Select an option |  | The option label is added to the trigger area. The options list remains open, so the user can select another item. The selected options are checked.
|
Delete search string |  | A search string can be cleared using the X button, or manually by using the delete key. The full options list is presented. The search field is in focus.
|
Validations and errors
Please refer to the Field Validation page for more information.
A drop-down with a warning:
...