Time Picker

Use this type of time picker for picking a single time (e.g., assignment due time).

Default state

The single time picker consists of a specialized input field (including a time icon) and a dropdown component. The dropdown is hidden by default until users interact with the time input field. In the field label, include a formatting example (hh:mm am/pm).

Focus state without selected time

Upon focus:

• A cursor appears within the field.
• Dropdown appears. 

 Note: Size of input isn’t tied to width of dropdown.

• No time is selected by default.

Dropdown closes when:

• Users make a selection from the dropdown.
• Users start to manually type in the field.
• Focus is lost from field or dropdown.

If users close the dropdown without making a selection, it reverts back to the default state.

Focus state with selected time

Upon focus:

• Dropdown appears and shows the selected time.
• Text in the field is highlighted.

Dropdown closes when:

• Users make a selection from the dropdown.
• Users start to manually type in the field.
• Focus is lost from field or dropdown.

Note: For the first and second points, focus remains on the field until users click elsewhere.

Selected date with no focus

• If users make a selection and remove focus from the dropdown or field, then the time field shows the numeric time and period.
• If a field with a previously selected time regains focus, the field and dropdown switch to Focus state (w/selected time).

Start time focus without selection

When users interact with the start time input field, it gains focus and the dropdown appears.

Start time focus with selection

End time focus without selection

After users select a start time, the focus should automatically switch to the end time and the dropdown for the end time should open. 

Note: Time selected in the start time and prior times will not appear in the dropdown.

You can customize the time list to show shorter or longer increments (e.g., 50 minutes for class sessions).

End time focus and highlight with selection

Reopening the start time after selecting both start and end times

If users refocus on the start time after having selected both a start and end time:

• Time picker appears with the start time selected.
• Time text in the field is highlighted.
• No disabled times are shown.

Making a selection will cause focus to automatically shift once again to the end time picker and field.

If users choose a new start time:

• Before the previously chosen end time, the end time selection will be retained and users will be automatically moved to the end time input field to confirm their selection.
• After the previously chosen end time, the end time selection will clear and users will be automatically moved to the end time input field to select a new end time.

This section pertains to manual entry of times directly into the input field.

Default state

Focus state without selected time

Focus state with manual entry

• Time picker closes.
• Users can enter any characters.
• Localization can cause the time format to change.

Manual entry completed

Users complete manual entry by clicking outside of the input field and then pressing the Enter key or the Tab key.

Default state

Error text below the field.

Reopening the time picker

• Dropdown list appears below the error text.
• Text in the field is highlighted.
• No time is selected in the dropdown list.