Three text fields are the easiest way for users to enter most dates.
When to use the date input component
- Appropriate for most dates. 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 dropdowns. It may be tempting to switch all or some of these text fields to dropdowns, but these tend to be more difficult to use than text boxes.
- 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.
Using the date input 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.
Date input settings
This component has no settings.
Date input variants
This component has no variants.