# Keyboard Navigation

By default, the keyboard navigation of the TimePicker is enabled.

The TimePicker supports the following keyboard shortcuts:

| Shortcut                 | Description                                                         |
| :----------------------- | :------------------------------------------------------------------ |
| `Alt`+`Down Arrow`       | Opens the popup and moves the focus to the displayed time selector. |
| `Alt`+`Up Arrow`         | Closes the popup and moves the focus to the `input` element.        |
| `Esc`                    | Closes the popup.                                                   |
| `Left Arrow/Right Arrow` | Moves focus to the next/previous time section in the popup.         |
| `Enter`                  | Accepts the current value change.                                   |

[Demo Source](https://demos.telerik.com/kendo-vue-ui/dateinputs/timepicker/keyboard/source.txt)

## Navigation Scenarios

When the input of the TimePicker is focused, it adopts the same keyboard shortcuts as the keyboard shortcuts of the [DateInput](https://www.telerik.com/kendo-vue-ui-develop/components/dateinputs/dateinput/keyboard-navigation).

When the popup of the TimePicker is opened, the hours become focused and the following shortcuts become available:

| Shortcut                 | Description                                                  |
| :----------------------- | :----------------------------------------------------------- |
| `Up Arrow`               | Increments the value of the focused time section.            |
| `Down Arrow`             | Decrements the value of the focused time section.            |
| `Left Arrow/Right Arrow` | Moves focus to the next/previous time section in the popup.  |
| `Tab`                    | Moves the focus back to the date input and closes the popup. |
| `Enter`                  | Accepts the current value change.                            |

## Suggested Links

* [API Reference of the TimePicker](https://www.telerik.com/kendo-vue-ui-develop/components/dateinputs/api/timepickerprops)
* [Accessibility](https://www.telerik.com/kendo-vue-ui-develop/components/dateinputs/timepicker/accessibility/wai-aria-support)