---
title: Keyboard Navigation
page_title: Keyboard Navigation - TimePicker - Kendo UI Wrappers for React
description: "Use the Kendo UI TimePicker wrapper keyboard navigation in React projects."
slug: keyboard_navigation_timepicker
position: 3
---

# Keyboard Navigation

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

When the popup of the TimePicker is closed, it supports the following keyboard shortcuts:

| Shortcut                            | Description         |
|:---                                 |:---                 |
| `Alt` & `Down Arrow`                | Opens the popup.    |
| `Alt` & `Up Arrow`                  | Closes the popup.   |
| `Esc`                               | Closes the popup.   |
| `Enter`                             | Triggers the `change` event.  |


When the popup of the TimePicker is in the `date` view and its popup is opened, the TimePicker supports the following keyboard shortcuts:

| Shortcut                            | Description         |
|:---                                 |:---                 |
| `Up Arrow`                          | Selects the previous available time portion.  |
| `Down Arrow`                        | Selects the next available time portion.      |

```jsx-preview

    class LayoutsContainer extends React.Component {
      constructor(props) {
        super(props);
        this.date = props.date
      }

      render() {
        return (
        <div class="example-wrapper" >
            <p>Select a date:</p>
            <TimePicker
               value={this.date}
            />
            <p>(use Alt+↓ to open the popup, ↑ to increment and ↓ to decrement the value)</p>
        </div>
        );
      }
    }

    ReactDOM.render(
      <LayoutsContainer date = {new Date()} />,
      document.querySelector('my-app')
    );
```

## Navigation Scenarios

When the input of the TimePicker is focused, it adopts the same keyboard shortcuts as the keyboard shortcuts of the [DateInput]({% slug keyboard_navigation_dateinput %}).

## Suggested Links

* [Kendo UI TimePicker for jQuery](https://docs.telerik.com/kendo-ui/api/javascript/ui/timepicker)
* [API Reference of the TimePicker Widget](http://docs.telerik.com/kendo-ui/api/javascript/ui/timepicker)