- A-Z
- Accordion
- Acronym
- Action
- Alert
- Breadcrumbs
- Button
- Card
- Checkboxes
- Confirmation
- Cookie banner
- Copy
- Date input
- Details
- Environment
- Error summary
- Filter
- Footer
- Forms
- Group
- Header
- Help
- Hero
- Horizontal rule
- Input
- Leave site
- Notification
- Pagination
- Panel
- Progress
- Radios
- Search input
- Select
- Signage
- Skip link
- Status
- Steps
- Summary list
- Table
- Tabs
- Textarea
- Time input
Your web browser is out of date
Your web browser (the software you use to access the internet) is out of date. You need to update it or use a different web browser to ensure you can complete this form.
Date input
WIP -- By default an example of a date format is used as a hint. “For example, 31, 01, 2026”
Date input (with hint)
<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>Date input with (hint and) submission error
<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>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.
Published 3 May 2024
Last updated 13 August 2026