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.


Single select labels are title case without punctuation. See the Field Label Glossary for common labels and their use cases.

Character Count Limit: 25

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