This topic explains how to use keyboard navigation so that end-users can easily and quickly navigate through items or change the selected/highlighted items.
This topic contains the following sections:
Press | To | When |
---|---|---|
Alt + Down arrow | Open drop down | Drop down is closed |
Alt + Up arrow | Close drop down | Drop down is opened |
Ctrl + Home | Move to very first item in drop down | Drop down is opened |
Ctrl + End | Move to very last item | Drop down is opened |
Page Up | Move to and selects the first visible item | Drop down is opened and multiselection is enabled |
Page Down | Move to and selects the last visible item | Drop down is opened and multiselection is enabled |
Up arrow | Move to and selects the prev item; Close drop down if opened | Drop down is opened or closed |
Down arrow | Move to and selects next item; Open drop down if closed | Drop down is opened or closed |
Esc key | Clear content when there isn’t selected item | There is content in the input |
Esc key | Close the drop down | The drop down is opened |
Enter key | Close the drop down | There is selected item |
Press | To | When |
---|---|---|
Page Up | Move to first visible item | Drop down is opened |
Page Down | Move to last visible item | Drop down is opened |
Up arrow | Move to prev item; Close drop down if opened | Drop down is opened or closed |
Down arrow | Move next item; Open drop down if closed | Drop down is opened or closed |
Enter key | Select the active item | There is active item |
When press | Then |
---|---|
Shift | The item is highlighted to active state |
Shift | If you don’t select more than one item nothing happens, the item stays in active state. |
Shift + Up/Down arrows | will change the active (highlighted) items and if you release Shift key the active items will be selected. |
Shift + Enter | Scenario: If you select item (with the mouse) and move the active item with up/down arrow key on Shift + Enter the items state, between the first and last selected items, will be changed to Selected. |
Note: Shift key only select items
By default if MultiSelection is enabled the end user can select multiple items by simply clicking with left mouse button. In order to select multiple items with Ctrl addWithKeyModifier
option must be set to true
.
Press | To |
---|---|
Left arrow | Move cursor one char left |
Right arrow | Move cursor one char right |
Ctr + Left | Move cursor one word to the left |
Ctr + Right | Move cursor one word to the right |
Shift | Seletion of the text when moving cursor |
Delete, Backspace | Clear only the selected text |
Delete, Backspace | Clear char by char |
Enter key | Select item |
Home key | Move cursor to input text start |
End key | Move cursor to input text end |
Backspace key | Clear all the contents of the combo box (Hold the key; Ctrl+A) |
View on GitHub