Date Picker Input

SCSS Location: /styles/scss/partial/_date-picker.scss
  • Status: Design
  • Status: Development
  • Status: Documentation


The date picker allows users to either type a date with MM/DD/YYYY format into the field or interact with a calendar flyout to select a date.


  • Each input should be clearly labeled with copy that informs the user of its purpose.
  • Date input should be accompanied by a calendar widget.


The date picker component should be used to display a single date selection or multiple date pickers can be used to create a range of dates.