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
The following Sass variables can be overridden to customize Input/Form components:
This component also makes use of form field styles, which can be customized by the following variables:
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.
- 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.
For more information about how we tested and validated our work for each checklist item, read our component maturity documentation.
ColorMeets AA color contrast standards for accessibility and color blindness.Complete
Forced Colors Mode (FCM)While using FCM the components text is legible and improves readability.Complete
WCAG 2.1 Level AA ConformanceAll Axe checks for WCAG AA compliance have passed.Complete
Screen readersVoiceOver, NVDA, and JAWS screen readers provide concise communication and interaction.Complete
Keyboard navigationComponent is fully navigable with a keyboard.Complete
StorybookComponent has stories to cover all defined props.Complete
ResponsiveComponent designed to work in all responsive breakpoints.Complete
Spanish translationsIncludes Spanish translations for default text content.Complete
CodeTokens implemented in code.Complete
DesignTokens implemented in the Sketch.Complete