Time Picker
The Time Picker allows a user to input a time. When used with the Date Picker, a user can input a date and time.

Common Characteristics

The Time Picker is a variant of the input component with an icon on the right. The input may be normal (40px high) or small (32px high).

The Time Picker input is displayed in hh:mm am/pm format.

The Time Picker supports the ability to set a default time, and exclude times.


The Time Picker has these states: active, focused, filled, disabled, and error. The error state should only be necessary when input is required but the user skips the input.


Time Picker increments are configurable.

Use a pair of Time Picker inputs to input a start time and end time.

Use with a Date Picker to input a date and time.