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 ComponentAnatomy
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.
Label
Single select labels are title case without punctuation. See the Field Label Glossary for common labels and their use cases.
Character Count Limit: 25
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
Behavior
When activated, the date picker displays under the date select input.
Specifications
Padding
Typography
Color & Shadow
