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: "", title: "", id: "65a92c02ccba3", url: "" }) }}
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: "", title: "", id: "667012f3610c1", url: "" }) }}
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.
{{ aspTable({
head: [
{ text: 'Development criteria'},
{ text: 'Status'}
],
rows: [
{
cells: [
{ text: 'WCAG 2.2 compliant'},
{ html: '<span class="status">Not started</span>'}
]
},
{
cells: [
{ text: 'WCAG 2.1 compliant'},
{ html: '<span class="status status–green">Completed</span>'}
]
},
{
cells: [
{ text: 'HTML / Nunjucks version'},
{ html: '<span class="status status–yellow">In Progress</span>'}
]
},
{
cells: [
{ text: 'Figma version'},
{ html: '<span class="status status">Not started</span>'}
]
},
{
cells: [
{ text: 'M365 versions'},
{ html: '<span class="status status">Not started</span>'}
]
},
{
cells: [
{ text: 'Documentation'},
{ html: '<span class="status status–yellow">In progress</span>'}
]
}
]
}) }}