Storybook
SketchExamples
Loading
Code
React
| Name | Type | Default | Description |
|---|---|---|---|
autoComplete | boolean | Adds autocomplete attributes bday-day, bday-month and bday-year to the corresponding <MultiInputDateField> inputs | |
dateFormatter | (...args: any[]) => any | Optional method to format the input field values. If this
method is provided, the returned value will be passed as a second argument
to the onBlur and onChange callbacks. This method receives an object as
its only argument, in the shape of: { day, month, year }
By default dateFormatter will be set to the defaultDateFormatter function, which prevents days/months more than 2 digits & years more than 4 digits. | |
label | 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 | 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 | ReactNode | Label for the day field | |
dayName | string | name for the day input field | |
dayDefaultValue | DateFieldDayDefaultValue | Initial value for the day input field. Use this for an uncontrolled
component; otherwise, use the dayValue property. | |
dayFieldRef | (...args: any[]) => any | Access a reference to the day input | |
dayInvalid | boolean | Apply error styling to the day input | |
dayValue | DateFieldDayValue | Sets the day input's value. Use this in combination with onChange
for a controlled component; otherwise, set dayDefaultValue. | |
monthLabel | ReactNode | Label for the month field | |
monthName | string | name for the month input field | |
monthDefaultValue | DateFieldMonthDefaultValue | Initial value for the month input field. Use this for an uncontrolled
component; otherwise, use the monthValue property. | |
monthFieldRef | (...args: any[]) => any | Access a reference to the month input | |
monthInvalid | boolean | Apply error styling to the month input | |
monthValue | DateFieldMonthValue | Sets the month input's value. Use this in combination with onChange
for a controlled component; otherwise, set monthDefaultValue. | |
yearDefaultValue | DateFieldYearDefaultValue | Initial value for the year input field. Use this for an uncontrolled
component; otherwise, use the yearValue property. | |
yearFieldRef | (...args: any[]) => any | Access a reference to the year input | |
yearInvalid | boolean | Apply error styling to the year input | |
yearLabel | ReactNode | Label for the year input field | |
yearName | string | name for the year field | |
yearValue | DateFieldYearValue | Sets the year input's value. Use this in combination with onChange
for a controlled component; otherwise, set yearDefaultValue. | |
className | string | Additional classes to be added to the root element. | |
id | string | A unique id for the field element. Useful for referencing the field from
other components with aria-describedby. | |
errorMessage | ReactNode | Enable the error state by providing an error message. | |
errorMessageClassName | string | Additional classes to be added to the error message | |
errorId | string | The ID of the error message applied to this field. | |
hint | ReactNode | Additional hint text to display | |
inversed | boolean | Set to true to apply the "inverse" theme | |
textClassName | string | Additional classes to be added to the label text. | |
errorPlacement | "top" | "bottom" | Location of the error message relative to the field input | |
labelClassName | string | Additional classes to be added to the field label |
Styles
The following CSS 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.