- A-Z
- Accordion
- Action
- Alert
- Breadcrumbs
- Button
- Card
- Checkboxes
- 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
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 |
Published 3 May 2024
Last updated 6 August 2024