...
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 |  |
|
Interaction
The time can be set either via direct input or by using the controls in the time picker drop-down.
Direct input
...
menu. Additional keyboard interactions can be found under the Focus management section below.
Direct input
The time picker can have an initial value, which the user can edit at any time.
When clicking the text, the relevant input section will be highlighted (HH, MM, or AM/PM.).
For example:
When HH or MM are highlighted, only numerical value inputs will be permitted.
When AM/PM is clicked on, it will toggle between the two options.
Once an input section has been filled, the highlight will move to the next section.
On Apply, the time picker field will lose focus (nothing is highlighted).
The user should be allowed to enter times in loose formats, which where possible. These should be automatically corrected when the field is out of loses focus. For example:
5 :08 becomes 05:08
508 becomes 05:08
When the user’s should be auto-corrected to 05.
when the time format is set to 12 hours, 15:08 becomes auto-corrects to 03:08 PM.
If the drop-down is opened, hitting Enter will close it.
Using the controls
Time picker menu
Clicking on the clock Icon Button or any blank space will open the time picker drop-downmenu.
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.
Alternatively, the user can use the mouse wheel to increase or decrease the values, as long as the corresponding control is selected.The iteration is The time picker menu will be closed:
when a time is applied, or
by clicking outside of the time picker menu.
The time inputs are cyclical:
When the hours are hour is set to 12 (in 12 hour time format) and , the up arrow is clicked, loops the value loops back to 101.
When the hours are hour is set to 23 (in 24 hour time format) and , the up arrow is clicked, loops the value loops back to 000.
When the minutes are set to 00 and , the down arrow is clicked, changes the value changes to 59.
When the minutes are set to 59, the up arrow changes the value to 00.
When AM/PM icon toggles is clicked on, it will toggle between the 2 two options.
Changing values in the drop-down will also update the values in the top input field accordingly.
...
Validation and Errors
Please refer to Field validation page for more information.
...
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
Focus management
Keyboard | Time picker field | Time picker menu |
|---|---|---|
| | |
Tab |
| Navigates between the different sections in a cyclical order:
|
Shift + Tab |
| Reverses the order of navigation described for Tab. |
Space | Opens the time picker menu. |
|
Enter | Applies the time. |
|
Esc | N/A | Closes the menu and returns the focus to the field, without applying any changes. |
Arrows |
|
|
Design
Zeplin Link | Thumbnail |
|---|---|
 |
...