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 mouse indicator one chunk to the right |
| Ctrl + Left Arrow | Move the mouse indicator 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 |
| Up Arrow | Increment the number in the input |
| Down Arrow | Decrement the number in the input |
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 percent editor with dropdown.
| Press | To |
|---|---|
| Alt + Down Arrow | Open the dropdown, when the focus is in the input |
| Alt + Up Arrow | Close the dropdown, when the focus is in the input |
| Down Arrow or Up Arrow | Navigate through the list items |
| Enter | Confirm focused item as selected |
| Enter or Alt + Up Arrow | Reject focused item and keep old selection |
View on GitHub