ASP Digital Design System

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)

Open this example in a new tab: date-input

<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

Open this example in a new tab: date-input

<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