Skip to main content

An official website of the United States government

Here's how you know

An official website of the United States government

Here's how you know


Design system switcher


Design system switcher


Design system switcher


Design system switcher

Calendar Picker

Date field (with calendar picker), also known as "date picker", provides single date entry with a text field or selection through a visual calendar element tied to the input.





The calendar picker is another name for the <SingleInputDateField> with a calendar picker button. To enable the date picker feature, you must pass both a from<TIME> property (i.e., fromDate, fromMonth, etc.) and a to<TIME> property (i.e., toDate, toMonth, etc.) to the date field component.

See Storybook for React guidance of this component.

Style customization

The following CSS variables can be overridden to customize Input/Form components:

CSS variables for text-input
VariableDefault Core Theme Value
--text-input__background-color--disabledhex value: #d9d9d9--color-border
--text-input__border-colorhex value: #262626--color-base
--text-input__border-color--disabledhex value: #a6a6a6--color-gray-light
--text-input__border-color--errorhex value: #e31c3d--color-error
--text-input__border-color--error--inversehex value: #f7bbc5--color-error-lighter
--text-input__border-color--inversehex value: #000000--color-black
--text-input__colorhex value: #262626--color-base
--text-input__divider-colorhex value: #a6a6a6--color-gray-light

Form components

This component also makes use of form field styles, which can be customized by the following variables:

CSS variables for form
VariableDefault Core Theme Value


When to use

  • Use the date picker for dates that have happened within the last year, in the future, or is relevant to selecting the day of the week.

When to consider alternatives

  • Don't use if users are entering a memorable date. Instead, use either single- or multi-input date fields.
  • Don't use if the date occurred in the distant past (like date of birth).


Allow users to have flexibility in entering the date, such as allowing one-digit numbers with or without "0" prior to the number, or entering a date with or without slashes to separate month, day, and year.

  • Example: "1" as well as "01" for a month or day.
  • Example: "05/18/2022" as well as "05182022".


  • These text fields should follow the accessibility guidelines for all text inputs.
  • Users will be able to enter a variety of date formats that automatically format to the correct date format of MM/DD/YYYY. This change happens once the form field loses focus. For example, a user enters a date as "4122020" and it changes to "04/01/2020" once focus leaves the date input.
  • Instructions are available make this more usable/accessible for assistive technology.

Component maturity

For more information about how we tested and validated our work for each checklist item, read our component maturity documentation.


  • Color

    Meets AA color contrast standards for accessibility and color blindness.
  • Forced Colors Mode (FCM)

    While using FCM the components text is legible and improves readability.
  • WCAG 2.1 Level AA Conformance

    All Axe checks for WCAG AA compliance have passed.
  • Screen readers

    VoiceOver, NVDA, and JAWS screen readers provide concise communication and interaction.
  • Keyboard navigation

    Component is fully navigable with a keyboard.


  • Storybook

    Component has stories to cover all defined props.
  • Responsive

    Component designed to work in all responsive breakpoints.
  • Spanish translations

    Includes Spanish translations for default text content.


  • Code

    Tokens implemented in code.
  • Design

    Tokens implemented in the Sketch.