Regular

Hover

Active

Disabled

Error

Warning

Focused

Focused, Hover

Focused, Active

Focused, Disabled

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.

https://zpl.io/adOXdRV