Time Pickers

This graphical user interface widget allows the user to select a time from a time range.

A time picker visually displays the time portion of a date in hours and minutes.

Types

See the Pen Time pickers by USANA UX (@usana_ux) on CodePen.

Guidelines

Time pickers should be used when showing users past, present, or future times.

Anatomy

  • Field label - The label of an input area is often positioned to the left. The label specifies the sort of information needed.
  • Time format - A text input field where the user types the hours and minutes of the desired time.
  • Time field - Selecting this field brings up a drop-down menu with possible times for the given day. When a time is chosen, the option will be displayed in the text input.
  • Icon - clock icon
  • Time dropdown - The times available for selection are contained in this dropdown.

Specifications

These specifications should be followed by developers and designers when creating time pickers.

Do
  • Use to schedule a time from common increments, such as in 30-minute blocks. 
Don't
  • Use when it may be appropriate for historical exact times, like time of birth.