...
Time input field. The time can be directly edited here.
Time picker button. A clock Icon Button which opens the time picker drop-down.
Time picker drop-down, which consists of:
Hours and minutes fields. Can be directly edited when selected.
Up and Down arrows. Clicking those arrows increases or decreases the hours and minutes in increments of 1.
AM/PM label. Appears when the user’s time format is set to 12 hours. Clicking this toggles between AM and PM.
Default
The time picker may have an initial value, which the user can edit at any time.
States
State | Visual | |
|---|---|---|
Regular |  | |
Hover |  | |
Active |  | |
Disabled |  | |
Error |  | |
Warning |  | |
Focused |  | |
Focused, Hover |  | |
Focused, Active |  | |
Focused, Disabled |  |
...
The time can be set either via direct input or by using the controls in the time picker drop-down.
Direct input
...
Allow the user to enter times in loose formats, which should be automatically corrected when the field loses is out of focus.
5:08 becomes 05:08
508 becomes 05:08
When the user’s time format is set to 12 hours, 15:08 becomes 03:08 PM.
If the drop-down is opened, hitting Enter will close it.
Time picker drop-down
Clicking on the clock Icon Button will open the picker drop-down.
Clicking the hours or minutes will change them into a Text Field, where the user can directly type the required value. When the input field loses focus, the time will be updated in the top input field accordingly.
Clicking outside the picker drop-down or hitting Enter will close it with updated input.
Clicking on the Up and Down arrows will increase or decrease the hours or minutes accordingly.
The iteration is cyclical:
When the hours are set to 12 (in 12 hour time format) and the up arrow is clicked, the value loops back to 1.
When the hours are set to 23 (in 24 hour time format) and the up arrow is clicked, the value loops back to 0.
When the minutes are set to 00 and the down arrow is clicked, the value changes to 59.
Clicking the AM/PM icon toggles between the 2 options.
Changing values in the drop-down will also update the values in the top input field accordingly.Clicking the hours or minutes will change them into a Text Field, where the user can directly type the required value. When the input field looses focus, the time will be updated in the top input field accordingly.
...