Description
| Status | ||||
|---|---|---|---|---|
|
Time pickers allow users to select a single time. A time picker allows the user to either insert the time manually or select hours and minutes via scrolling.
...
Usage & Behavior
General guidelines
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.
Time picker dropdown - In the time picker dropdown, the user can select a time by setting hours, minutes, seconds and AM/PM or a subset of these.
Usage & Behavior
General guidelines
Use a time picker when:
You want the user to select 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.
You want the user to select a detailed duration, such as 1 minute and 30 seconds.
States
Add warning
...
Interaction
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 either by choosing a time (clicking on it), or clicking outside the frame.
The selected time will be marked with a blue V sign to the left of the selected value, as shown below:
...
UP/Down arrows - Clicking those arrows increases/decreases the hours/minutes accordingly.
AM/PM label - Clicking this toggles between AM/PM.
States
Add warning
...
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.
Popover
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.
Validation and Errors
Please refer to Field validation page for more information.
...
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.
Design
Zeplin Link | Thumbnail |
|---|---|
Add an updated ZEPLIN |
Current appearances in our products
...