Examples

Code

React

Preact/React documentation for Storybook

Style customization

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

• Date field (single-input)
• Date field (with calendar)

Component maturity