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.
<fieldset class="usa-fieldset">
<legend class="usa-legend">Date of Birth</legend>
<span class="usa-hint" aria-hidden="true" id="memorable-date-hint"
>Select a month. Enter 1 or 2 digits for the day and 4 digits for the
year.</span
>
<div class="usa-memorable-date">
<div class="usa-form-group usa-form-group--month usa-form-group--select">
<label class="usa-label" for="memorable-date-month">Month</label>
<span class="usa-hint usa-sr-only" id="memorable-date-month-hint"
>Select a month from the dropdown.</span
>
<select
class="usa-select"
id="memorable-date-month"
name="memorable-date-month"
aria-describedby="memorable-date-month-hint"
>
<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="memorable-date-day">Day</label>
<span class="usa-hint usa-sr-only" id="memorable-date-day-hint"
>Enter 1 or 2 digits for the day.</span
>
<input
class="usa-input"
aria-describedby="memorable-date-day-hint"
id="memorable-date-day"
name="memorable-date-day"
maxlength="2"
pattern="[0-9]*"
inputmode="numeric"
value=""
/>
</div>
<div class="usa-form-group usa-form-group--year">
<label class="usa-label" for="memorable-date-year">Year</label>
<span class="usa-hint usa-sr-only" id="memorable-date-year-hint"
>Enter 4 digits for the year.</span
>
<input
class="usa-input"
aria-describedby="memorable-date-year-hint"
id="memorable-date-year"
name="memorable-date-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
- 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
- Date of Birth pattern
- Phone Number pattern
- Social Security Number pattern
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.
| Total tests |
Passed
|
Passed with exceptions
|
Conditional
|
Failed
|
|---|---|---|---|---|
| 12 | 11 | 0 | 1 | 0 |
Overview of recent accessibility test results:
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 | Description |
|---|---|---|---|
| 2026-08-18 | 3.14.0 |
|
Improved screen reader hints for the memorable date fields. Each field (month, day, year) now has its own hint wired with aria-describedby, so screen readers announce only the guidance for the focused field instead of the full instruction block. A visible group hint remains for sighted users. Authors who copied the old shared mdHint markup should update to per-field hints. More information: uswds#6725 |
| 2024-11-19 | N/A |
|
Added WCAG compliance tag and accessibility test status section. More information: uswds-site#2919 |
| 2024-11-06 | N/A |
|
Added known issues section. More information: uswds-site#2716 |
| 2024-10-04 | 3.9.0 |
|
Removed numeric representation of months from the |
| 2023-08-23 | 3.6.0 |
|
Updated styles to allow the component to wrap to multiple lines at narrow widths. More information: uswds#5372 |
| 2022-11-14 | 3.3.0 |
|
Updated the month entry to a |
| 2022-04-28 | N/A |
|
Added guidance for adding labels and using text boxes in place of select elements. More information: uswds-site#1538 |
| 2022-04-28 | N/A |
|
Updated package name to |
| 2022-04-28 | N/A |
|
Renamed component from “date input” to “memorable date”. More information: uswds-site#1538 |
| 2022-04-28 | 3.0.0 |
|
Breaking Updated to Sass module syntax and new package structure. More information: uswds#4656 |
| 2022-04-13 | N/A |
|
Updated package name to |
