New to Telerik UI for Blazor? Download Free 30-day trial

TimePicker - Keyboard Navigation

  • Keyboard-navigation.razor
Loading the demo source code...please wait.

Focus

  • Alt + W focuses the first component in the example

Supported keys and user actions

When the input is focused, there are actions available in addition to the standard DateInput actions.

  • Alt + Down arrow opens the popup with the time selection popup.
  • Alt + Up arrow or Esc closes the time selection popup.

Date Input

  • Up arrow increases the value of the date portion that contains the cursor. Takes the corresponding Step into account.
  • Down arrow decreases the value of the date portion that contains the cursor. Takes the corresponding Step into account.
  • Left arrow moves the cursor one position to the left.
  • Right arrow moves the cursor one position to the right.

Time Popup

  • Right arrow moves focus to the next carousel (time portion selector) in the time popup.
  • Left arrow moves focus to the previous carousel (time portion selector) in the time popup.
  • Up arrow selects the previous time in the current carousel (time portion selector) in the time popup.
  • Down arrow selects the next time in the current carousel (time portion selector) in the time popup.
  • Tab and Shift + Tab moves the focus in the time popup between the time carousels and the buttons (such as the Now button and the Set button).
  • Enter activates the focused buttons in the time popup.

Support & Learning Resources

An error has occurred. This application may no longer respond until reloaded.
Reload