...
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
States
Add warning
...
Interaction
The time picker can have an initial value which 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 selcted value, as shown below:
...
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.
...
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.
...
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 which 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 selcted value, as shown below:
...
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
Design
Zeplin Link | Thumbnail |
|---|---|
 |
...