Examples
Code
React
Name | Type | Default | Description |
---|---|---|---|
autoComplete | boolean | Adds | |
dateFormatter | (...args: any[]) => any | Optional method to format the By default | |
label | React.ReactNode | The primary label, rendered above the individual month/day/year fields | |
labelId | string | A unique ID to be used for the MultiInputDateField label. If one isn't provided, a unique ID will be generated. | |
requirementLabel | React.ReactNode | Text showing the requirement ("Required", "Optional", etc.). See Required and Optional Fields. | |
onBlur | (...args: any[]) => any | Called anytime any date input is blurred | |
onComponentBlur | (...args: any[]) => any | 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) | |
onChange | (...args: any[]) => any | Called anytime any date input is changed | |
dayLabel | React.ReactNode | Label for the day field | |
dayName | string |
| |
dayDefaultValue | string | number | Initial value for the day | |
dayFieldRef | (...args: any[]) => any | Access a reference to the day | |
dayInvalid | boolean | Apply error styling to the day | |
dayValue | string | number | Sets the day input's | |
monthLabel | React.ReactNode | Label for the month field | |
monthName | string |
| |
monthDefaultValue | string | number | Initial value for the month | |
monthFieldRef | (...args: any[]) => any | Access a reference to the month | |
monthInvalid | boolean | Apply error styling to the month | |
monthValue | string | number | Sets the month input's | |
yearDefaultValue | string | number | Initial value for the year | |
yearFieldRef | (...args: any[]) => any | Access a reference to the year | |
yearInvalid | boolean | Apply error styling to the year | |
yearLabel | React.ReactNode | Label for the year | |
yearName | string |
| |
yearValue | string | number | Sets the year input's |
Styles
The following Sass variables can be overridden to customize Input/Form components:
Form components
This component also makes use of form field styles, which can be customized by the following variables:
Guidance
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.
Usage
- 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.
Accessibility
- These text fields should follow the accessibility guidelines for all text inputs.
- Do not use JavaScript to auto advance the focus from one field to the next. This makes it difficult for keyboard-only users to navigate and correct mistakes.
Related patterns
Component maturity
For more information about how we tested and validated our work for each checklist item, read our component maturity documentation.