Skip to main content

Time picker

Overview​

Time pickers allow users to enter a specific time value. They can be used for a wide range of scenarios.

Use when​

  • Users are entering a specific time.
  • Users are entering a time range - use two inputs side by side.
  • Users are selecting from a set of suggested times or intervals.
  • Users are entering the time now.

Don't use when​

  • Users can only select from time descriptions (ie, "now," "in thirty minnutes," "in an hour"). Use a select instead.
  • Users can enter text or times. Use a text field instead.

Variants​

Click the preview below to open the Figma project for additional detail.

Best practices​

check_circle_outline

Both 12-hour and 24-hour time systems are allowed.

check_circle_outline

If using the 12-hour format it must be accompanied by an AM/PM selection.

check_circle_outline

Use uppercase letters and no periods for the abbreviations AM and PM.

check_circle_outline

Specific times should specify a timezone.