A cursor appears within the field
The dropdown appears. Note, the size of the input isn’t tied to the width of the dropdown.
No time is selected by default

The dropdown closes when:

The user makes a selection from the dropdown
The user begins to manually type in the field
Focus is lost from field or dropdown

If the user closes the dropdown without making a selection, it reverts back to Default State.

Focus State (w/selected time)

Upon focus:

The dropdown appears and shows the selected time
The text in the field is highlighted

The dropdown closes when:

The user makes a selection from the dropdown
The user begins to manually type in the field
Focus is lost from field or dropdown

Note that for the first and second points, focus remains on the field until the user clicks elsewhere.

Selected Date (no focus)

If the user has made a selection and removed 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).

Range Input

This type of time picker is to be used for choosing a range with specific start and end times (ex. course beginning and end).

Default State

The default state of the first time input (start) initially behaves the same way as a single time input field.

Default state of double input field time picker (start/end).

Start Time Focus w/o Selection

When the user interacts with the start time input field, it gains focus and the dropdown appears.

Double input field start time focus state

Start Time Focus w/ Selection

End Time Focus w/o Selection

Note that once the user has made a start time selection, focus should automatically switch to the end time and the dropdown for the end time should open. Time selected in the start time and prior will not be in the dropdown.

The time list can be customized to show shorter or longer increments (ex. 50 minutes class sessions).

End Time Focus and Highlight w/ Selection

Reopening the Start Time After Selecting Both Start and End Times

If the user refocuses on the start time after having selected both a start and end time:

The time picker appears with the start time selected
The 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 the user chooses a new start time before the previously chosen end time, the end time selection will be retained and the user will be automatically moved to the end time input field to confirm their selection.

If the user chooses a new start time after the previously chosen end time, the end time selection will clear and the user will be automatically moved moved to the end time input field to make a new end time selection.