New to Kendo UI for Angular? Start a free 30-day trial
Keyboard Navigation
The ListBox component contains a list of items and (optionally) a ToolBar. When ToolBar is not enabled, the component is a single-tab-stop component. When the ToolBar is present, it is included in the page tab-sequence. Depending on its position and the LTR/RTL configuration, the ToolBar can either preceed or succeed the list of ListBox items. Its tab position will respect its position on the screen.
The ListBox supports the following keyboard shortcuts:
| SHORTCUT | DESCRIPTION |
|---|---|
F10 | Focuses the ListBox ToolBar. The last focused, or the first button in it. |
Up Arrow | Selects previous item. |
Down Arrow | Selects next item. |
Ctrl + Space / Cmd + Enter (MacOS) | Selects / deselects item. |
Ctrl / Cmd (MacOS) + Up Arrow | Moves the focus to the previous item. |
Ctrl / Cmd (MacOS) + Down Arrow | Moves the focus to the next item. |
Ctrl / Cmd (MacOS) + Shift + Up Arrow | Shifts selected items upwards. |
Ctrl / Cmd (MacOS) + Shift + Down Arrow | Shifts selected items downwards. |
Delete | Deletes selected item. |
Ctrl / Cmd (MacOS) + Right Arrow | Adds the selected items to the connected ListBox. |
Ctrl / Cmd (MacOS) + Left Arrow | Adds the selected items from the connected ListBox to the current. |
Ctrl / Cmd (MacOS) + Shift + Right Arrow | Transfers all items to the connected ListBox. |
Ctrl / Cmd (MacOS) + Shift + Left Arrow | Transfers all items from the connected ListBox. |
The Toolbar of the ListBox supports the following keyboard shortcuts:
| SHORTCUT | DESCRIPTION |
|---|---|
Right Arrow / Down Arrow | Focuses the next button in the ToolBar. |
Left Arrow / Up Arrow | Focuses the previous button in the ToolBar. |
Enter | Executes the currently focused button command (if enabled)". |
The following example demonstrates the available ListBox keyboard navigation shortcuts in action.
Example
View Source
Change Theme:
