This topic explains how to use keyboard navigation so that end-users can easily and quickly navigate through inputs and interact with them.
This topic contains the following sections:
You can use the standard key combinations for functionalists such as copy, cut, paste, undo and redo and these further ones.
Press | To |
---|---|
Right Arrow | Move the mouse indicator one char to the right |
Left Arrow | Move the mouse indicator one char to the left |
Ctrl + Right Arrow | Move the caret one chunk to the right |
Ctrl + Left Arrow | Move the caret one chunk to the left |
Ctrl + Home or just Home | Move the mouse indicator to the start of the input |
Ctrl + End or just End | Move the mouse indicator to the end of the input |
Backspace | Delete the previous char |
Delete | Delete the following char |
Ctrl + Backspace | Delete the previous chunk |
Ctrl + Delete | Delete the following chunk |
Delete or Backspace | Delete selected content |
Enter and Alt + Enter | Go to new row in multiline text editor |
In this section you can see the key combinations that can be used to focus the editor and select part of its value or the whole one.
Press | To |
---|---|
Tab or Shift + Tab | Focus the editor |
Shift + Tab | Focus the previous component |
Tab | Focus the following component |
Shift + Right Arrow | Select char to the right |
Shift + Left Arrow | Select char to the left |
Ctrl + Shift + Right Arrow | Select to current chunk end or select one chunk to the right |
Ctrl + Shift + Left Arrow | Select to current chunk start or select one chunk to the left |
Ctrl + Shift + Home or Shift + Home | Select value in the input till start |
Ctrl + Shift + End or Shift + End | Select value in the input till end |
Ctrl + A | Select the whole value in the input |
In this section you can see what key combinations can be used when you have a text editor with dropdown.
Press | To |
---|---|
Alt + Down Arrow or Down Arrow | Open the dropdown, when the focus is in the input |
Alt + Up Arrow or Esc | Close the dropdown, when the focus is on the dropdown list |
Up Arrow | Close the dropdown, when the focus is on the top item of the dropdown list |
Down Arrow | Move to next item, when the focus is on the list of items |
Up Arrow | Move to previous item, when the focus is on the list of items |
Enter | Confirm focused item as selected |
Enter or Alt + Up Arrow | Reject focused item and keep old selection |
View on GitHub