Skip to content

MemorableDate

C-48 · Components · Inputs

All elements · MemorableDate on the Components page

Last checked 2026-10-22 · Awaiting approval · Accessibility tests

Copies the bun run a11y:approve command for MemorableDate.

MemorableDate

C-48WCAG 2.2 AA · Passed

A date the user already knows, such as a date of birth or the day a benefit started, typed into Month, Day and Year instead of picked from a calendar (USWDS Memorable date). A fieldset and legend around three Fields; for a date the user has to look up or choose, use DatePicker.

Axis Values
data-month select (default, a native select of month names) · text (a two-digit box)
data-required · data-invalid · :disabled state on the fieldset; an invalid box's Field carries data-invalid and its input aria-invalid="true"
__legend · __hint · __error · __fields the question, "For example: January 19 2000", the message, and the row of boxes
__month · __day · __year (each a .qf-field) Day and Year: inputmode="numeric", pattern="[0-9]*", maxlength 2 and 4; aria-describedby the hint (and the error)
autocomplete bday-month · bday-day · bday-year on a date of birth only (1.3.5); none otherwise
Date of birth: month select, autocomplete bday-*
Date of birth For example: January 19 2000
Date of birth (filled) For example: January 19 2000
Month as text
When did your coverage start? For example: January 19 2000
When did your coverage start? (filled) For example: January 19 2000
Error · disabled
Date of birth For example: January 19 2000

Enter a real date: February has 28 or 29 days

When did your coverage start? For example: January 19 2000

Enter the year with four digits, for example 2024

Date of birth (disabled) For example: January 19 2000

Guidance

When to use

  • Ask for a date the user knows by heart or can read off a document: a date of birth, a hire date, the day a coverage or benefit started.
  • Use the month select (the default) when users may not know a month's number; use data-month="text" when they copy the date from a form that writes it as numbers.
  • Set autocomplete="bday-month", "bday-day" and "bday-year" on a date of birth so browsers and assistive tools can fill it (1.3.5).
  • Use it inside a Form wherever the date is far from today, so a calendar would take many clicks to reach.

When to consider something else

  • When the user has to choose a date near today, or needs to see weekdays (an appointment, a due date), use DatePicker. See DatePicker.
  • When only a month and year are needed (a card expiry), use two Fields or a Select and leave the day out. See Field.
  • When the value is a date and a time, use DatePicker with its time field. See DatePicker.
  • When the date is one of a few fixed options, use Select. See Select.

Usability

Do
  • Write the legend as the question ("Date of birth", "When did your coverage start?") and keep the hint's example in the same Month Day Year order as the boxes.
  • Accept one- or two-digit days and months ("4" and "04") and trim spaces; only the year needs all four digits.
  • Validate when the user leaves the group or submits, not on every keystroke, and name the box that is wrong in the message ("Enter the year with four digits").
  • Mark only the boxes that are wrong data-invalid and aria-invalid="true"; keep the user's values in them.
  • Keep the three boxes on one row where they fit; they wrap at narrow widths.
Don’t
  • Don't move focus to the next box automatically when one is full; users who correct a digit lose their place.
  • Don't use type="number"; it adds spin buttons, drops leading zeros and accepts "e". Use type="text" with inputmode="numeric".
  • Don't use placeholders such as "MM" or "YYYY" as the only label; the visible Month, Day and Year labels stay.
  • Don't use a memorable date for a date the user has to work out, such as "the Monday after next".

Accessibility

Keyboard

MemorableDate keyboard
Keys Action
Tab / Shift+Tab Moves between Month, Day and Year; focus never jumps on its own.
Arrow Up / Arrow Down In the month select, changes the month (Alt+Arrow Down opens the list on Windows).
Type a letter In the month select, jumps to the first month starting with it.

Roles and names

  • The group is a fieldset and its legend names the date, so each box is announced as "Date of birth, Month" and so on.
  • Every box has a visible label (Month, Day, Year) tied by for; there are no placeholder-only boxes.
  • Every box carries aria-describedby pointing at the hint; while invalid, at the hint and the error message too, and aria-invalid="true" on the box that is wrong.
  • Day and Year are type="text" with inputmode="numeric", pattern="[0-9]*" and a maxlength of 2 and 4, so phones show a number pad.
  • A date of birth uses autocomplete bday-month, bday-day and bday-year (1.3.5, Identify Input Purpose); other dates set none.
  • A required date sets required on each box and data-required on the fieldset, which adds the asterisk to the legend.

Focus

  • Each box shows the Field focus ring.
  • On a failed submit, move focus to the error summary or to the first invalid box, not to the fieldset.

Other requirements

  • The error is text with an icon and a rule down the group's edge, not color alone (1.4.1); the message is error-700, 5.22:1 on the page (10.32:1 in dark).
  • Every box is a full control height (2rem) tall and at least 3.5rem wide, meeting 2.5.8.
  • The boxes wrap onto a new line at narrow widths and 400% zoom instead of overflowing (1.4.10).
  • Give users enough time: never clear the date or time out the form while they look up a document (2.2.1).

Test your implementation too. This guidance covers the element as specified here. How a screen composes it (labels, order, announcements) still needs its own keyboard and screen reader check.

Accessibility tests

WCAG 2.2 AA · Passed

Passed the gate (run 358b316 on 2026-10-22): no finding in any theme. Awaiting a person’s approval of the checklist below.

MemorableDate test checklist
Area Automated A person checks
General Passed Color is never the only cue, text alternatives say the same thing as the graphic, and the element reads the same in the light and the dark theme.
Zoom Passed At 200% zoom, at 320 CSS pixels wide and with the WCAG text-spacing overrides, nothing is lost, clipped or overlapping.
Keyboard Passed Every row of the Keyboard table works, focus is always visible and never trapped, and the tab order follows the reading order. (3 rows)
Screen reader Passed With NVDA or JAWS on Windows and VoiceOver on macOS, names, roles and states are announced as Roles and names says, and changes are announced once. (6 items)

Approving. When the checklist passes on the checked run, record it with bun run a11y:approve -- memorable-date --by "Your name" and commit a11y/approvals.json with the rebuilt pages. All test status

Package

Consumers link one stylesheet, css/classic/index.css, which includes every element. The files below are where this element is defined.

MemorableDate package
Source css/classic/components/memorable-date.css
Specimens also use Box · Card · Chip · Control · Field · Icon · Table · Text · Toolbar
Sprites sprites/icons.svg
React Not yet available: the React binding has not started.

Latest updates

MemorableDate latest updates
Date Version Breaking Description
2026-10-20 0.1 No MemorableDate (C-48), modeled on the USWDS Memorable date: a fieldset and legend around three C-09 Fields (Month as a native select, or data-month="text" for a two-digit box; Day and Year as type="text" boxes with inputmode="numeric"), the hint "For example: January 19 2000" every box points at with aria-describedby, an error state (data-invalid on the fieldset and on the wrong box's Field, aria-invalid on its input, the message added to its description) and autocomplete="bday-*" for a date of birth (components/memorable-date.css)

All release notes