WIP – By default an example of a date format is used as a hint. “For example 31, 3, 2024”

Date input (with hint)

{{ aspExample({ code: "<fieldset class=\"form__fieldset form__group\" id=\"date-input-example-1\">
<legend class=\"form__label\">Date of birth</legend>
<p class=\"form__hint\">For example 31, 3, 2024</p>
<div class=\"form__group–inner\">
<div class=\"form__date\">
<label class=\"form__label form__label–date\" for=\"date-input-example-1-birth-day\">Day</label>
<input class=\"form__input\" id=\"date-input-example-1-birth-day\" type=\"number\">
</div>
<div class=\"form__date\">
<label class=\"form__label form__label–date\" for=\"date-input-example-1-birth-month\">Month</label>
<input class=\"form__input\" id=\"date-input-example-1-birth-month\" type=\"number\">
</div>
<div class=\"form__date form__date–year\">
<label class=\"form__label form__label–date\" for=\"date-input-example-1-birth-year\">Year</label>
<input class=\"form__input\" id=\"date-input-example-1-birth-year\" type=\"number\">
</div>
</div>
</fieldset>", nunjucks: "", json: "", title: "", example: "", id: "65a92c02ccba3" }) }}

Date input with (hint and) submission error

{{ aspExample({ code: "<fieldset class=\"form__fieldset form__group form__group–error\" id=\"date-input-example-2\">
<legend class=\"form__label\">Date of birth</legend>
<p class=\"form__hint form__hint–error\">For example 31, 3, 2024</p>
<p class=\"form__error-message\">\"Date of birth\" must be in the past</p>
<div class=\"form__group–inner\">
<div class=\"form__date\">
<label class=\"form__label form__label–date\" for=\"date-input-example-2-birth-day\">Day</label>
<input class=\"form__input\" id=\"date-input-example-2-birth-day\" type=\"number\" value=\"20\">
</div>
<div class=\"form__date\">
<label class=\"form__label form__label–date\" for=\"date-input-example-2-birth-month\">Month</label>
<input class=\"form__input\" id=\"date-input-example-2-birth-month\" type=\"number\" value=\"10\">
</div>
<div class=\"form__date form__date–year\">
<label class=\"form__label form__label–date\" for=\"date-input-example-2-birth-year\">Year</label>
<input class=\"form__input\" id=\"date-input-example-2-birth-year\" type=\"number\" value=\"2102\">
</div>
</div>
</fieldset>", nunjucks: "", json: "", title: "", example: "", id: "667012f3610c1" }) }}

Status of development

The below criteria all need to be met for a component to be considered as fully developed for use within the ASP Digital Design System.

Development criteria	Status
WCAG 2.2 compliant	Not started
WCAG 2.1 compliant	Completed
HTML / Nunjucks version	In Progress
Figma version	Not started
M365 versions	Not started
Documentation	In progress

Make a change to the Design System

Suggest an edit to this system, or any of the components in it, by submitting a Design System change request.