Memorable date
A select for month followed by two text fields is the easiest way for users to enter most dates.
Default
Component Preview
Component Code
<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 that users would remember, like date of birth.
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.
Using the memorable date component
- Year input accepts four digits.
- The year input is set to accept only a four-digit number while the day input can accept up to a two-digit number.
- Always use back-end validation.
- Always use back-end validation on dates for correctness.
USWDS Documentation
For more guidance, view the USWDS Memorable Date Component Documentation.
