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

Date input (with hint)

{{ aspExample({ code: "<fieldset class=\"asp-form__group\" id=\"change-date-input-example-1\">
<legend class=\"asp-form__label\">Date agreed</legend>
<p class=\"asp-form__hint\">For example, 30 09 2026</p>
<p class=\"asp-form__error-message\"></p>
<div class=\"asp-form__inner asp-form__inner–column\">
<div class=\"asp-form–width-2-chars\">
<label class=\"asp-form__label asp-form__label–small\" for=\"date-input-example-1-day\">Day</label>
<input class=\"asp-form__input\" id=\"date-input-example-1-day\" type=\"number\">
</div>
<div class=\"asp-form–width-2-chars\">
<label class=\"asp-form__label asp-form__label–small\" for=\"date-input-example-1-month\">Month</label>
<input class=\"asp-form__input\" id=\"date-input-example-1-month\" type=\"number\">
</div>
<div class=\"asp-form–width-4-chars\">
<label class=\"asp-form__label asp-form__label–small\" for=\"date-input-example-1-year\">Year</label>
<input class=\"asp-form__input\" id=\"date-input-example-1-year\" type=\"number\">
</div>
</div>
</fieldset>", nunjucks: "", json: "", title: "", example: "", id: "65a92c02ccba3" }) }}

Date input with (hint and) submission error

{{ aspExample({ code: "<fieldset class=\"asp-form__group asp-form__group–error\" id=\"change-date-input-example-2\">
<legend class=\"asp-form__label\">Date agreed</legend>
<p class=\"asp-form__hint\">For example, 30 09 2026</p>
<p class=\"asp-form__error-message\">\"Date of birth\" must be in the past</p>
<div class=\"asp-form__inner asp-form__inner–column\">
<div class=\"asp-form–width-2-chars\">
<label class=\"asp-form__label asp-form__label–small\" for=\"date-input-example-2-day\">Day</label>
<input class=\"asp-form__input asp-form__input–error\" id=\"date-input-example-2-day\" type=\"number\" value=\"01\">
</div>
<div class=\"asp-form–width-2-chars\">
<label class=\"asp-form__label asp-form__label–small\" for=\"date-input-example-2-month\">Month</label>
<input class=\"asp-form__input asp-form__input–error\" id=\"date-input-example-2-month\" type=\"number\" value=\"01\">
</div>
<div class=\"asp-form–width-4-chars\">
<label class=\"asp-form__label asp-form__label–small\" for=\"date-input-example-2-year\">Year</label>
<input class=\"asp-form__input asp-form__input–error\" id=\"date-input-example-2-year\" type=\"number\" value=\"3000\">
</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.