...
The drop-down consists of:
...
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:
...
Keyboard | Trigger area | Options list |
|---|
|  |  |
Tab | Navigates to the next component. | |
Shift + Tab | Navigates to the previous component. | |
Space | Opens the menu. | Regular (single-select) - Selects the focused item and closes the menu. Multi-select - Selects the focused item. Menu stays open. In case of a search bar - Acts as text input.
|
Enter | Opens the menu. | Regular (single-select) - Selects the focused item and closes the menu. Multi-select - Selects the focused item. Menu stays open. In case of a search bar - Acts as text input.
|
Esc | N/A | Closes the menu without updating the selection. |
Arrows | Up/Down - Opens the menu. | Up - Navigates to the previous action. Stops at the first item in the list. Down - Navigates to the next action. Stops at the last item in the list. In case of a search bar - The right and left arrows act as arrows within a Text Field.
Holding down the key will scroll continuously. |
Page Up/Home | N/A | Navigates to the first item. |
Page Down/End | N/A | Navigates to the last item. |
...