- A-Z
- Accordion
- Action
- Alert
- Breadcrumbs
- Button
- Card
- Checkboxes
- Confirmation
- Cookie banner
- Date input
- Details
- Env
- Filter
- Footer
- Forms
- Group
- Header
- Help
- Hero
- Horizontal rule
- Leave site
- Notification
- Pagination
- Progress
- Radios
- Select
- Signage
- Skip link
- Status
- Steps
- Summary list
- Table
- Tabs
- Text input
- 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, 3, 2024”
Date input (with hint)
<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>
Date input with (hint and) submission error
<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>
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 |
Submit a request
Request a change or addition to the design system: this form.
Published 3 May 2024
Last updated 6 August 2024