Date Select

We use date selects to allow users to enter a date into a form by either selecting it from a calendar or typing it into a date field.
Demo and Developer GuidelinesFigma Component


The date select component consists of both a date picker and a calendar dropdown. Date selects will appear as a simple date input when the user enters the page, and it will open a calendar dialog once the user clicks in to the input.

Date Picker

Date pickers have placeholder text of lowercase mm/dd/yyyy.

Date Abbreviation

Day abbreviations at the top fo the calendar are as follows: Su, Mo, Tu, We, Th, Fr, Sa


When activated, the date picker displays under the date select input.




Color & Shadow