Memorable Date

formUSWDS-derivedinteractive

Three separate inputs for month, day, and year — easier to remember than a date picker.

Reference: USWDS documentation ↗

Variants

Default Memorable Date

Date of birth

Month

Day

Year

<flex-memorable-date>
  <fieldset class="flex-fieldset">
    <legend class="flex-legend">Date of birth</legend>
    <div class="flex-memorable-date__fields">
      <div class="flex-memorable-date__field flex-memorable-date__field--month">
        <label class="flex-label" for="dob-month">Month</label>
        <input class="flex-input" id="dob-month" name="dob-month" type="text" maxlength="2" pattern="[0-9]*" inputmode="numeric"/>
      </div>
      <div class="flex-memorable-date__field flex-memorable-date__field--day">
        <label class="flex-label" for="dob-day">Day</label>
        <input class="flex-input" id="dob-day" name="dob-day" type="text" maxlength="2" pattern="[0-9]*" inputmode="numeric"/>
      </div>
      <div class="flex-memorable-date__field flex-memorable-date__field--year">
        <label class="flex-label" for="dob-year">Year</label>
        <input class="flex-input" id="dob-year" name="dob-year" type="text" maxlength="4" pattern="[0-9]*" inputmode="numeric"/>
      </div>
    </div>
  </fieldset>
</flex-memorable-date>

Required Memorable Date

Start date

Month

Day

Year

<flex-memorable-date>
  <fieldset class="flex-fieldset">
    <legend class="flex-legend">Start date</legend>
    <div class="flex-memorable-date__fields">
      <div class="flex-memorable-date__field flex-memorable-date__field--month">
        <label class="flex-label" for="start-date-month">Month</label>
        <input class="flex-input" id="start-date-month" name="start-date-month" type="text" maxlength="2" pattern="[0-9]*" inputmode="numeric" required=""/>
      </div>
      <div class="flex-memorable-date__field flex-memorable-date__field--day">
        <label class="flex-label" for="start-date-day">Day</label>
        <input class="flex-input" id="start-date-day" name="start-date-day" type="text" maxlength="2" pattern="[0-9]*" inputmode="numeric" required=""/>
      </div>
      <div class="flex-memorable-date__field flex-memorable-date__field--year">
        <label class="flex-label" for="start-date-year">Year</label>
        <input class="flex-input" id="start-date-year" name="start-date-year" type="text" maxlength="4" pattern="[0-9]*" inputmode="numeric" required=""/>
      </div>
    </div>
  </fieldset>
</flex-memorable-date>

Contract

Class mapping

USWDS	Flex	Notes
`usa-memorable-date`	`<flex-memorable-date> (custom element)`	Container element
`usa-fieldset`	`.flex-fieldset`	Fieldset wrapper
`usa-legend`	`.flex-legend`	Legend text
`usa-form-group--month`	`.flex-memorable-date__field--month`	Month field wrapper
`usa-form-group--day`	`.flex-memorable-date__field--day`	Day field wrapper
`usa-form-group--year`	`.flex-memorable-date__field--year`	Year field wrapper

Verified properties

displayflex-wrapfont-weightfont-size

Intentional differences

width: ours = fit-content, USWDS = fit-content

Both use fit-content for field wrappers; input widths match USWDS (3rem month/day, 4.5rem year)

Behavior promises

✓ Auto-advance from month to day after 2 digits
✓ Auto-advance from day to year after 2 digits
✓ Invalid month (0, 13) shows error on blur
✓ Invalid day (0, 32) shows error on blur
✓ Year with fewer than 4 digits shows error on blur
✓ Valid values clear error state
✓ Accessibility audit passes

Source CSS

Base styles: Form Control Base

/* flex-memorable-date — USWDS Memorable Date conformance
   Three separate inputs (month, day, year) for date entry.
   Extends: Form Control Base (base-classes.css#form-control) for inputs
   Extends: Typography Base (base-classes.css#typography) for labels/legend */

flex-memorable-date {
  display: block;
}

.flex-fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

.flex-legend {
  font-weight: 700;
  font-size: 1.34rem;
  padding: 0;
  margin-block-end: 0.5rem;
}

.flex-memorable-date__fields {
  display: flex;
  flex-wrap: wrap;
}

.flex-memorable-date__field {
  flex: 0 1 auto;
  margin-inline-end: 1rem;
  margin-block-start: 1rem;
  inline-size: fit-content;

  /* Labels within memorable-date fields should not add extra top margin */
  .flex-label {
    margin-block-start: 0;
  }
}

/* Month and day inputs: narrow (USWDS usa-form-group--month/day: 3rem) */
.flex-memorable-date__field--month input,
.flex-memorable-date__field--day input {
  inline-size: 3rem;
}

/* Year input: wider (USWDS usa-form-group--year: 4.5rem) */
.flex-memorable-date__field--year input {
  inline-size: 4.5rem;
}