Time Picker

Overview

Time pickers let a user enter a time or select one from a drop-down.

Behaviors

Focus

A focus state replaces the browser default focus state for time pickers. The border also changes color on focus.

Text field

Users enter a value by typing in the text field. Time pickers use input masks that only allow for characters that match what is expected. A time picker should tell the user what the expected time format is.

A clock icon is inside the text box to the right to show it's a time picker.

Clock pop-up

Selecting the clock icon inside the text field opens a pop-up that allows users to pick a time. The pop-up mimics a digital clock and not an analog clock. Users can choose the time, minute, and AM/PM. Users then hit the Set button. When the pop-up is reopened, this set time displays in the top left corner. If no time has been selected, a default time should be set appropriate to the use case. A Now text button inputs the current time.

Input masking

When typing in the time picker, each section of the value has an input mask to prevent characters that don't match a 12-hour clock. The time picker allows numbers 1-12 for hours, 0-59 for minutes, and either AM or PM.

After a user completes a section, focus should jump to the next section. For example, when a user enters an hour focus will then jump to minutes, followed by AM or PM.

Error

Error states in a time picker change the color of the border and display an error message below the field. When the error condition is fixed, the border returns to normal and the error message is removed.

Disabled

When disabled, the time picker field is displayed at 50% opacity. The field and icons cannot be clicked, focused, or interacted with in any way.

Help text

Time picker labels can give extra context or instructions using a help text component. This appears as a question mark icon to the right of the label.

Instructional text

Instructional text appears below the time picker. It should only be used for very short messages. The text can wrap if it's longer than the field. If more instruction is needed, use help text.

Usage guidelines

Time format

As outlined in the formatting guidelines, time pickers follow an hours: minutes format, followed by AM or PM. Sometimes a user’s browser or system settings may override the AM or PM formatting rule and replace them with a.m. or p.m., but our designs should follow the guidelines.
We use a 12-hour clock, which is the default and should be used unless a 24-hour clock is unavoidable.

Content guidelines

Label

A time picker label should be short, no more than a few words. The label should indicate what will happen at the time the user selects.

👍
Try this

Start Time

Scan Time

Instructional Text
You can give more guidance in instructional text, like the format. This helps prevent errors.

👍
Try this
These times are in your local time zone.

Help Text
If there are longer instructions that could give users more context, use help text. Don’t use help text for information that the user needs to know to be successful, like the format.

👍
Try this
This is the time the next batch of computers will update.

❗️
Not this
Use the 12-hour clock.

Error Message
Error text appears below the time picker. It should be concise and jargon-free. Be specific to what went wrong and tell the user how to move forward. The text can wrap if it's longer than the field.