Skip to content
Design System

Date picker

Show developer docs

Date Pickers allow users to enter a date either through text input, or by choosing a date from the calendar.

Native HTML date picker

Section titled “Native HTML date picker”
Used when selecting a single date is needed. This implementation uses the text field component property type “date”.

Date range picker

Section titled “Date range picker”
Used when selecting a preset time period and/or date range is needed.

In Practice

Section titled “In Practice”

Date pickers can display past, present, or future dates. They should use sensible defaults based on their context.

Date Range

Section titled “Date Range”
  • The start and end dates may be manually entered or edited in the text field.
  • May or may not include a dropdown with preset time periods.
    • If a preset time period is selected, the system displays the corresponding dates in the text input field.
  • The expandable calendar menu includes day, month, and year selections for start and end dates and highlights all dates between them.
  • The calendar closes after an end date is selected.

Accessibility

Section titled “Accessibility”
  • Date pickers are keyboard operable.
  • Always give users the option to enter the date using the text field.
  • For more information, see our accessibility guidelines.

Design resources

Section titled “Design resources”
View component in Figma