A select for month followed by two text fields is the easiest way for users to enter most dates.
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.
- 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.
- Follow input guidance. These text fields should follow the accessibility guidelines for all text inputs.
- 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.
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.
Meaningful code and guidance updates are listed in the following table:
Updated the month entry to a
Breaking Updated to Sass module syntax and new package structure. More information: uswds#4656