The date entry component offers two ways to enter a date:

  • Direct text entry into a text field
  • Through the date picker dialog

The calendar icon is the exclusive entry point for the date picker.

Text entry

Automatically format the date after the user hits “Enter“ or navigates out of the text field.

Don’t automatically format the date by adding slashes or other special characters while the user is typing (also known as input masks). This can cause confusion for people using screen readers because it changes what they typed.

To reduce errors, accept a range of formats including dashes, spaces, slashes, dots, and 0 to the left of a single digit month/day. This is especially helpful for assistive technology users who might be more prone to errors when interacting with complex inputs.

Material guidance

Related date picker entries