...

Two time pickers can be used, for start and end times, to allow the user to enter a time range.

Image Modified

Usage & Behavior

General guidelines

...

The time picker may have an initial value, which the user can edit at any time.

States

State	Visual
Regular	Image Modified
Hover	Image Modified
Active	Image ModifiedImage Modified
Disabled	Image Modified
Error	Image Modified
Warning	Image Modified
Focused	Image Modified	Image Added
Focused, Hover	Image Modified
Focused, Active	Image Modified
Focused, Disabled	Image Modified

Interaction

The time can be set either via direct input or by using the controls in the time picker drop-down.

...

• 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 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 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.

Image Modified

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: 

Image Modified

A time field with an error will have a red border and an error icon, as displayed below:

Image Modified

Best practices

Use when:

• You want the user to select 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 start time and a second one to set the end time.

...

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.

Design

Zeplin Link	Thumbnail
https://zpl.io/adOXdRV	Image Modified

Code

...