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\">Provide an estimated time if not known. For example, 22:00</p>
<div class=\"form__group–inner\">
<div class=\"form__date\">
<label class=\"form__label form__label–date\" for=\"time-input-example-1-hour\">Hours</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\">Minutes</label>
<input class=\"form__input\" id=\"time-input-example-1-minute\" type=\"number\">
</div>
</div>
</fieldset>", nunjucks: "", json: "", title: "", example: "", id: "667a73c910ef6" }) }}

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\">Provide an estimated time if not known. For example, 22:00</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\">Hours</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\">Minutes</label>
<input class=\"form__input form__input–error\" id=\"time-input-example-2-minute\" type=\"number\">
</div>
</div>
</fieldset>", nunjucks: "", json: "", title: "", example: "", id: "667a73c910fb4" }) }}

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.