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