WIP – By default an example of 24 hour time format is used as a hint. “For example 16, 45”
Time input (with hint)
{{ aspExample({ code: "<fieldset class=\"form__fieldset form__group\" id=\"time-input-example-1\">
<legend class=\"form__label\">Time</legend>
<p class=\"form__hint\">For example 16, 45</p>
<div class=\"form__group–inner\">
<div class=\"form__date\">
<label class=\"form__label form__label–date\" for=\"time-input-example-1-hour\">Day</label>
<input class=\"form__input\" id=\"time-input-example-1-hour\" type=\"number\">
</div>
<div class=\"form__date\">
<label class=\"form__label form__label–date\" for=\"time-input-example-1-minute\">Month</label>
<input class=\"form__input\" id=\"time-input-example-1-minute\" type=\"number\">
</div>
</div>
</fieldset>", nunjucks: "", title: "", id: "667a73c910ef6", url: "" }) }}
Time input with (hint and) submission error
{{ aspExample({ code: "<fieldset class=\"form__fieldset form__group form__group–error\" id=\"time-input-example-2\">
<legend class=\"form__label\">Time</legend>
<p class=\"form__hint form__hint–error\">For example 16, 45</p>
<p class=\"form__error-message\">\"Time\" is required</p>
<div class=\"form__group–inner\">
<div class=\"form__date\">
<label class=\"form__label form__label–date\" for=\"time-input-example-2-hour\">Day</label>
<input class=\"form__input form__input–error\" id=\"time-input-example-2-hour\" type=\"number\">
</div>
<div class=\"form__date\">
<label class=\"form__label form__label–date\" for=\"time-input-example-2-minute\">Month</label>
<input class=\"form__input form__input–error\" id=\"time-input-example-2-minute\" type=\"number\">
</div>
</div>
</fieldset>", nunjucks: "", title: "", id: "667a73c910fb4", 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>'}
]
}
]
}) }}