Date field (multi-input) provides date entry, spaced over three separate inputs for month, day, and year.
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 date field when:
- User flow requires inputs be separated
- Functionality/back-end systems can't support a single date field entry
Generally used for more memorable dates like date of birth, marriage date, or income start date.
When to consider alternatives
- Don't use this date field if either single-input or date picker are feasible. This pattern is least effective with users.
- Allow users to enter one-digit numbers with or without the "0" prior to the number. Example: "1" as well as "01" for a month or day.
- These text fields should follow the accessibility guidelines for all text inputs.
The following Sass variables can be overridden to customize Input/Form components: