Use the date input component to let users enter memorable dates, like dates of birth. The date input component consists of three fields grouped together, to let users enter a day, month and year.
+
+
This approach is advised in most cases because it allows for precise input and reduces the chances of making mistakes.
+
+
Do:
+
+
+
adjust the order of day, month, and year fields according to the regional format familiar to your users.
+
accept month names written out in full or abbreviated form (for example, ‘january’ or ‘jan’) as some users may enter months in this way.
+
ensure each field is clearly labeled ‘Day’, ‘Month’, ‘Year’
+
use a hint to show the expected date format, for example, ‘07 11 2022’
+
use a "text" vs "numeric" input type.
+
limit individual field character length.
+
require a four-digit year to avoid potential confusion.
+
+
+
Do not:
+
+
+
auto-advance focus from one field to the next. This makes it difficult for keyboard-only users to navigate and correct mistakes.
+
use placeholder text as it disappears when the user starts typing and may not be accessible to all users.
+
use visual separators between fields.
+
disable copy and paste.
+
use in instances where only part of a date is needed, like a month or a year without a specific day.
+
+
+
How this component works
+
+
The three fields in the date input component are grouped together in a fieldset with a legend that describes them, as shown in the examples on this page. The legend is usually a question, such as 'What is your date of birth?'.
+
+
Use the autocomplete attribute on the date input component when you're asking for a date of birth. This allows browsers to autofill the information on a user's behalf if they've entered it previously.
+
+
The year input is set to accept only a four-digit number while the month and day inputs can accept up to a two-digit number.
+
+
Accessibility
+
All components are responsive and meet WCAG 2.1 AA accessibility guidelines.
diff --git a/src/components/date-input/blank.hbs b/src/components/date-input/blank.hbs
new file mode 100644
index 000000000..ea0e7f56e
--- /dev/null
+++ b/src/components/date-input/blank.hbs
@@ -0,0 +1,41 @@
+---
+title: Date input
+width: wide
+page: true
+---
+{{#>_layout-container}}
+
+
+
+ {{>_date-input
+ id="date"
+ label="Date of birth"
+ helper-text="For example 08 12 1990"
+ }}
+
+
+
+
+
+ {{>_date-input
+ id="date-error"
+ label="Date of birth"
+ required=true
+ error-text="This field is required"
+ helper-text="For example 08 12 1990"
+ }}
+
+
+
+
+
+ {{>_date-input
+ id="date-success"
+ label="Date of birth"
+ valid-text="This field has been validated"
+ helper-text="For example 08 12 1990"
+ }}
+
+
+
+{{/_layout-container}}
diff --git a/src/components/date-input/index.hbs b/src/components/date-input/index.hbs
new file mode 100644
index 000000000..9d2e44f26
--- /dev/null
+++ b/src/components/date-input/index.hbs
@@ -0,0 +1,52 @@
+---
+title: Date input
+width: wide
+tabs: true
+directory: date-input
+intro: 'A date input allows users to enter a date.'
+figma: 'URL'
+meta-description: 'A date input allows users to enter a date.'
+meta-index: true
+---
+
+
Default
+{{#>_docs-example separated=true}}
+
+
+ {{>_date-input
+ id="date"
+ label="Date of birth"
+ helper-text="For example 08 12 1990"
+ }}
+
+
+{{/_docs-example}}
+
+
Error
+{{#>_docs-example separated=true}}
+
+
+ {{>_date-input
+ id="date-error"
+ label="Date of birth"
+ required=true
+ error-text="This field is required"
+ helper-text="For example 08 12 1990"
+ }}
+
+
+{{/_docs-example}}
+
+
Success
+{{#>_docs-example separated=true}}
+
+
+ {{>_date-input
+ id="date-success"
+ label="Date of birth"
+ valid-text="This field has been validated"
+ helper-text="For example 08 12 1990"
+ }}
+