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

Common Characteristics

The Date 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 Date Picker input is displayed in mm/dd/yyyy format.

The Date Picker supports keyboard navigation and input, along with the ability to set a default date, and exclude dates.


The Date 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.


Use a pair of Date Picker inputs to input a start date and end date.

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