...
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.
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.
...
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 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-downUsing the controls
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 up and Down 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 in focus.
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.
...
Validation and Errors
Please refer to Field validation page for more information.
...
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
Design
Zeplin Link | Thumbnail |
|---|---|
 |
...