Skip to content
ASP Digital Design System

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.

Cookies disabled

Cookies are currently not enabled in your web browser. You need to enable cookies to ensure you can complete this form.

Time input

WIP -- By default an example of 24 hour time format is used as a hint. “For example, 22:00”

Time input (with hint)

Open this example in a new tab: time-input

<fieldset class="asp-form__group" id="change-time-input-example-1">  
  <legend class="asp-form__label">Time agreed</legend>  
  <p class="asp-form__hint">For example, 22:00</p>  
  <p class="asp-form__error-message"></p>  
  <div class="asp-form__inner asp-form__inner--column">  
    <div class="asp-form--width-2-chars">  
      <label class="asp-form__label asp-form__label--small" for="time-input-example-1-hours">Hours</label>  
      <input class="asp-form__input" id="time-input-example-1-hours" type="number">  
    </div>  
    <div class="asp-form--width-2-chars">  
      <label class="asp-form__label asp-form__label--small" for="time-input-example-1-minutes">Minutes</label>  
      <input class="asp-form__input" id="time-input-example-1-minutes" type="number">  
    </div>  
  </div>  
</fieldset>

Time input with (hint and) submission error

Open this example in a new tab: time-input

<fieldset class="asp-form__group asp-form__group--error" id="change-time-input-example-2">  
  <legend class="asp-form__label">Time agreed</legend>  
  <p class="asp-form__hint">"Time agreed" is required</p>  
  <p class="asp-form__error-message"></p>  
  <div class="asp-form__inner asp-form__inner--column">  
    <div class="asp-form--width-2-chars">  
      <label class="asp-form__label asp-form__label--small" for="time-input-example-2-hours">Hours</label>  
      <input class="asp-form__input asp-form__input--error" id="time-input-example-2-hours" type="number">  
    </div>  
    <div class="asp-form--width-2-chars">  
      <label class="asp-form__label asp-form__label--small" for="time-input-example-2-minutes">Minutes</label>  
      <input class="asp-form__input asp-form__input--error" id="time-input-example-2-minutes" type="number">  
    </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

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.

Published 25 June 2024
Last updated 3 August 2026