Three text fields are the easiest way for users to enter most dates.
Optional method to format the
The primary label, rendered above the individual month/day/year fields
A unique ID to be used for the MultiInputDateField label. If one isn't provided, a unique ID will be generated.
Text showing the requirement ("Required", "Optional", etc.). See Required and Optional Fields.
Called anytime any date input is blurred
Called when any date input is blurred and the focus does not land on one of the other date inputs inside this component (i.e., when the whole component loses focus)
Called anytime any date input is changed
Label for the day field
Initial value for the day
Access a reference to the day
Apply error styling to the day
Sets the day input's
Label for the month field
Initial value for the month
Access a reference to the month
Apply error styling to the month
Sets the month input's
Initial value for the year
Access a reference to the year
Apply error styling to the year
Label for the year
Sets the year input's
When to use
- Use this format for most dates, particularly memorized dates.
When to consider alternatives
- If users are trying to schedule something, a calendar picker might make more sense. Be sure to also provide an option for text entry as well.
- Allow users to enter the date as flexibly as possible, for example, allowing
1as well as
01for a month input.
- Be sure each field is properly labeled — some countries enter dates in day, month, year order.
- It may be tempting to switch all or some of these text fields to drop downs, but these tend to be more difficult to use than text boxes.
- When handling date errors, if the part of the date that has an error is known, only highlight the part with an error. For example, if month and day are valid inputs, but the year is invalid, use
yearInvalid=trueso that only the year field will be highlighted red.
- If the entire date is incorrect, all fields can be highlighted. For example, if a date in the past is required and a date in the future is entered, all fields should be highlighted.
- These text fields should follow the accessibility guidelines for all text inputs.