Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Keyboard

Time picker field

Time picker menu

Tab

  • Navigates to the next input section.

  • When on the last input section, navigates to the next component.

Navigates between the different sections in a cyclical order:

  • Hours.

  • Minutes.

  • AM/PM.

Shift + Tab

  • Navigates to the previous input section.

  • When on the first input section, navigates to the previous component.

Reverses the order of navigation described for Tab.

Space

Opens the time picker menu.

  • Hours - N/A

  • Minutes - N/A

  • AM/PM - toggles between the values.

Enter

Applies the time.

  • Applies the time.

  • Closes the menu.

Esc

N/A

Closes the menu and returns the focus to the field, without applying any changes.

Arrows

  • Up - Increases the highlighted value.

  • Down - Decreases the highlighted value.

  • Holding down the up/down keys will scroll continuously.

  • Right/Left - Moves the input highlight accordingly.

  • Up - Increases the highlighted value for the focused section.

  • Down - Decreases the highlighted value for the focused section.

  • Holding down the up/down keys will scroll continuously.

  • Right/Left - Moves the focused section accordingly.

Mouse

Time picker field

Time picker menu

Right Click

Set Focus state on field

Set Regular state on component

Design

Zeplin Link

Thumbnail

https://zpl.io/adOXdRV

...