Components

Memorable date

A select for month followed by two text fields is the easiest way for users to enter most dates.

Passed WCAG 2.1 AA

Testing has revealed some issues with this component. Learn more in the known issues section on this page.

Date of Birth For example: January 19 2000 

<fieldset class="usa-fieldset">
  <legend class="usa-legend">Date of Birth</legend>
  <span class="usa-hint" id="mdHint">For example: January 19 2000</span>
  <div class="usa-memorable-date">
    <div class="usa-form-group usa-form-group--month usa-form-group--select">
      <label class="usa-label" for="date_of_birth_month">Month</label>
      <select
        class="usa-select"
        id="date_of_birth_month"
        name="date_of_birth_month"
        aria-describedby="mdHint"
      >
        <option value>- Select -</option>
        <option value="1">January</option>
        <option value="2">February</option>
        <option value="3">March</option>
        <option value="4">April</option>
        <option value="5">May</option>
        <option value="6">June</option>
        <option value="7">July</option>
        <option value="8">August</option>
        <option value="9">September</option>
        <option value="10">October</option>
        <option value="11">November</option>
        <option value="12">December</option>
      </select>
    </div>
    <div class="usa-form-group usa-form-group--day">
      <label class="usa-label" for="date_of_birth_day">Day</label>
      <input
        class="usa-input"
        aria-describedby="mdHint"
        id="date_of_birth_day"
        name="date_of_birth_day"
        maxlength="2"
        pattern="[0-9]*"
        inputmode="numeric"
        value=""
      />
    </div>
    <div class="usa-form-group usa-form-group--year">
      <label class="usa-label" for="date_of_birth_year">Year</label>
      <input
        class="usa-input"
        aria-describedby="mdHint"
        id="date_of_birth_year"
        name="date_of_birth_year"
        minlength="4"
        maxlength="4"
        pattern="[0-9]*"
        inputmode="numeric"
        value=""
      />
    </div>
  </div>
</fieldset>

Guidance

When to use the memorable date component

  • Appropriate for most dates. This component is appropriate for most dates.

When to consider something else

  • Consider a date picker for scheduling. If users are trying to schedule something, the date picker might make more sense. Be sure to also provide an option for text entry as well.

Usability guidance

  • Label each field. Be sure each field is properly labeled — some countries enter dates in day, month, year order
  • Avoid select elements for day or year. It may be tempting to switch all or some of these text fields to select elements, but these tend to be more difficult to use than text inputs.

Accessibility guidance

Test the memorable date component in your own project.

USWDS tested the memorable date component for accessibility. You should test your implementation, too.

Use memorable date accessibility tests
  • Follow input guidance. These text fields should follow the accessibility guidelines for all text inputs.
  • Don’t auto-advance focus. Do not use JavaScript to auto advance the focus from one field to the next. This makes it difficult for keyboard-only users to navigate and correct mistakes.
  • Use “text” instead of “number” inputs. Research indicates that numeric inputs still carry many usability problems, according to the gov.uk Technology in Government blog.

Related

Using the memorable date component

  • The year input is set to accept only a four-digit number while the month and day inputs can accept up to a two-digit number.
  • Always use back-end validation on dates for correctness.

Memorable date settings

This component has no settings.

Memorable date variants

This component has no variants.

Accessibility test status

The USWDS team did 12 tests based on WCAG 2.1 AA success criteria.

Overview of recent accessibility test results:
Total tests
Passed
Passed with exceptions
Conditional
Failed
12 11 0 1 0

Overview of recent accessibility test results:

  • Passed: 11
  • Passed with exceptions: 0
  • Conditional: 1
  • Failed: 0

Learn more on the memorable date accessibility tests page.

Known issues

All known issues for memorable date are tracked in GitHub . Notable usability issues are tracked below:

  • Screen reader users experienced friction understanding formatting requirements for each input. More information on GitHub: uswds#5902

Help fix these issues or add details on GitHub. Don't have an account? Please join our community to share feedback and contribute to USWDS.

Package

  • Package usage: @forward "usa-memorable-date";
  • Dependencies: uswds-fonts, usa-form-group, usa-input

Latest updates

Meaningful code and guidance updates are listed in the following table:

Date USWDS version Affects Breaking Description
2024-11-19 N/A
  • Guidance
 No

Added WCAG compliance tag and accessibility test status section. More information: uswds-site#2919

2024-11-06 N/A
  • Guidance
 No

Added known issues section. More information: uswds-site#2716

2024-10-04 3.9.0
  • Accessibility
  • Content
  • Markup
 No

Removed numeric representation of months from the select element. Recent usability testing indicated that having both numbers and names to represent months was confusing for screen reader users. More information: uswds#6028

2023-08-23 3.6.0
  • Accessibility
  • Styles
 No

Updated styles to allow the component to wrap to multiple lines at narrow widths. More information: uswds#5372

2022-11-14 3.3.0
  • Guidance
  • Markup
  • Styles
 No

Updated the month entry to a select from an input. Recent usability testing indicated that using a select for month entry was more clear and reduced mistakes. More information: uswds#4937

2022-04-28 N/A
  • Guidance
 No

Added guidance for adding labels and using text boxes in place of select elements. More information: uswds-site#1538

2022-04-28 N/A
  • Guidance
 No

Updated package name to usa-memorable-date. More information: uswds-site#1538

2022-04-28 N/A
  • Guidance
 No

Renamed component from “date input” to “memorable date”. More information: uswds-site#1538

2022-04-28 3.0.0
  • Assets
  • JavaScript
  • Styles
 Breaking

Breaking Updated to Sass module syntax and new package structure. More information: uswds#4656

2022-04-13 N/A
  • Guidance
 No

Updated package name to form-controls. More information: uswds-site#1497