Skip to main content
U.S. flag

An official website of the United States government

Dot gov

The .gov means it’s official.
Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you’re on a federal government site.

Https

The site is secure.
The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

Components

Memorable Date

use: deployed English, Spanish Web
Three text fields are the easiest way for users to enter most dates.

Examples

Default

View va-memorable-date in Storybook

Month select

View va-memorable-date with month select in Storybook

Extra hint text

View va-memorable-date with extra hint text in Storybook

Custom validation

View va-memorable-date with custom validation in Storybook

Forms pattern single default

View va-memorable-date forms pattern single default in Storybook

Forms pattern multiple

View va-memorable-date forms pattern multiple in Storybook

Error

View va-memorable-date error in Storybook

Error with month select

View va-memorable-date error with month select in Storybook

Forms pattern single error

View va-memorable-date forms pattern single error in Storybook

Forms pattern multiple error

View va-memorable-date forms pattern multiple error in Storybook

Internationalization

View va-memorable-date internationalization in Storybook

Usage

Choosing between variations

  • Unlike the USWDS, the default component uses a text input instead of a select input for the month. This was done after user testing showed inconsistencies between field types led to challenges for users of assistive technology. Teams should note the maturity of this component and proceed with caution.

Errors

  • Refer to the specific error examples above.

Hint text

  • During workflows where dates of life events, periods of service, and more, come in heavy multiples, the default hint text can be hidden using the remove-date-hint attribute.
  • For adding extra hint text, refer to the hint text example above.

Code usage

Accessibility considerations

Component checklist

Web Platform

80%

8 of 10 complete

Maturity

Guidance

Web

Examples, usage, code usage, content considerations, and accessibility considerations are all complete.

Research

Web

VFS team conducted research on this component which is linked from this page.

Stability

Web

Component has been in production for more than 3 months with no significant issues found.

Adoption

Web

Multiple teams have adopted this component.
Note: This component was introduced in August 2022.

Accessibility

While this component has been previously tested against older criteria, it has not yet been audited with the updated testing criteria.

Code assets

Variations

Web

Storybook includes all variations (style, size, orientation, optional iconography, selection, error state, etc.)

Responsive

Web

Component depicted in all responsive breakpoints.

Interactive states

Web

Includes all interactive states that are applicable (hover, active, focus, keyboard focus, disabled).

Tokens

N/A Web

All design attributes (color, typography, layout, etc.) are available as tokens.

Internationalization

N/A Web

Describes i18n attributes.

Visual assets

Variations

Web

Figma library includes all variations (style, size, orientation, optional iconography, selection, error state, etc.)

Responsive

Web

Component designed to work in all responsive breakpoints.

Interactive states

Web

Includes all interactive states that are applicable (hover, active, focus, keyboard focus, disabled).

Tokens

N/A Web

All design attributes (color, typography, layout, etc.) are available as tokens.

Legend:

  • Complete
  • Incomplete
  • N/A Not applicable

Provide feedback

Share your feedback, report issues, or suggest improvements for the Memorable Date component. Your input helps us make the design system better for everyone.

Edit this page in GitHub (Permissions required)
Last updated: Apr 22, 2026