Description
A time picker allows the user to either insert time manually or set hours and minutes using up/down arrows.
 |
Usage & Behavior
General guidelines
Note: the user time format (24 hours or 12 hours with AM/PM indicator) can be set on the preferences window.
Structure
A time picker is a combination of:
Time input field - In the input field, the user can enter a time directly.
Time picker button - clicking the picker opens the time picker dropdown.
UP/Down arrows - Clicking those arrows increases/decreases the hours/minutes accordingly.
Hours/Miutes input fields - the labels holding the hours/minutes becomes an input field when the user selects the hours/minutes in the menu in order to change them.
AM/PM label - Clicking this toggles between AM/PM.
States
State | Visual | |
|---|---|---|
Regular |  | |
Hover |  | |
Active |  | |
Disabled |  | |
Error |  | |
Warning |  | |
Focused |  | |
Focused, Hover |  | |
Focused, Active |  | |
Focused, Disabled |  |
Interaction
Input
The time picker can have an initial value that the user can overwrite at any time.
Open the picker dropdown with one click on the picker button.
Close the picker dropdown by clicking outside the frame.
Allow the user the insert dates in loose formats
“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“.
Menu
Click the up/down arrows to move between the hours/minutes accordingly.
The iteration is cyclic. For example:
hours - when you are set on “12” hours and click to “up” arrow, you start from “1”.
minutes - when you are set on “00” and press the “down” arrow you get “59”.
Clicking AM/PM label toggles between the 2 options.
Changing values in the popover, updates the input respectively.
Clicking the hours/minutes changes the label into an input field in which the user can type the required value. When the input looses focus, the input field showing the time, is updated accordingly.
 |
Validation and Errors
Please refer to Field validation page for more information.
A time field with a warning will have an orange border and a warning icon, as displayed below:
 |
A time field with an error will have a red border and an error icon, as displayed below:
 |
Best practices
Use a time picker when:
You want the user to select a time or set a time.
You want the user to select a time range. In this case, one time picker can be used to set the starting time and a second one to set the end time.
Accessibility Compliance
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility
Design
Zeplin Link | Thumbnail |
|---|---|
 |