Skip to main content Skip to list of components
Service phase: Beta

This is a new service – give us your feedback to help improve it.

Components

Date input

Use the date input component to allow the user to enter a date when populating data, such as submitting a record.

Contents

  1. Component status
  2. Preselected
  3. Hint
  4. Error

For searching by date, use the date search component.

Open this example in new tab

HTML 

<div class="tna-form__group">
  <fieldset class="tna-form__fieldset">
    <legend class="tna-form__legend">
      <h4 class="tna-form__heading tna-form__heading--m">
        Enter a start date
      </h4>
    </legend>
    <div class="tna-date-input" id="date">
      <div class="tna-date-input__item tna-date-input__item--day">
        <label for="date-day" class="tna-date-input__item-label">
          Day
        </label>
        <input type="text" id="date-day" value="" name="date-day" class="tna-date-input__item-input" inputmode="numeric">
      </div>
      <div class="tna-date-input__item tna-date-input__item--month">
        <label for="date-month" class="tna-date-input__item-label">
          Month
        </label>
        <input type="text" id="date-month" value="" name="date-month" class="tna-date-input__item-input" inputmode="numeric">
      </div>
      <div class="tna-date-input__item tna-date-input__item--year">
        <label for="date-year" class="tna-date-input__item-label">
          Year
        </label>
        <input type="text" id="date-year" value="" name="date-year" class="tna-date-input__item-input tna-date-input__item-input--wider" inputmode="numeric">
      </div>
    </div>
  </fieldset>
</div>

Nunjucks

Nunjucks options
Primary options
Name Type Description
label string

Required.

The label for the date input field.
headingLevel number

Required.

The heading level which represents an element from <h1> through to <h6>.
headingSize string

The physical size of the date input title (xl, l, m or s).
id string

Required.

A unique ID for the date input component.
name string

Required.

The name of the form field.
hint string

An optional hint to display above the form field.
fields array
value object

The values of the date fields.

See macro options for value.
error object

If set, the details of any errors.

See macro options for error.
inline boolean

If true, show the date inputs inline rather than vertical.
progressive boolean
formGroupClasses string

Classes to add to the date input form group.
formGroupAttributes object

HTML attributes (for example data attributes) to add to the date input form group.
classes string

Classes to add to the date input.
attributes object

HTML attributes (for example data attributes) to add to the date input.
Options for value
Name Type Description
day string
month string
year string
Options for error
Name Type Description
text string

Required.

The error text to display.

 
{% from "nationalarchives/components/date-input/macro.njk" import tnaDateInput %}

{{ tnaDateInput({
  label: "Enter a start date",
  headingLevel: 4,
  headingSize: "m",
  id: "date",
  name: "date"
}) }}

Component status

Phase
Beta
Tested without CSS
Yes
Passed DAC audit
Not yet audied
Analytics integrated
In development
Documentation complete
No

Preselected

Open this example in new tab

HTML 

<div class="tna-form__group">
  <fieldset class="tna-form__fieldset">
    <legend class="tna-form__legend">
      <h4 class="tna-form__heading tna-form__heading--m">
        Enter a start date
      </h4>
    </legend>
    <div class="tna-date-input" id="date">
      <div class="tna-date-input__item tna-date-input__item--day">
        <label for="date-day" class="tna-date-input__item-label">
          Day
        </label>
        <input type="text" id="date-day" value="24" name="date-day" class="tna-date-input__item-input" inputmode="numeric">
      </div>
      <div class="tna-date-input__item tna-date-input__item--month">
        <label for="date-month" class="tna-date-input__item-label">
          Month
        </label>
        <input type="text" id="date-month" value="09" name="date-month" class="tna-date-input__item-input" inputmode="numeric">
      </div>
      <div class="tna-date-input__item tna-date-input__item--year">
        <label for="date-year" class="tna-date-input__item-label">
          Year
        </label>
        <input type="text" id="date-year" value="1986" name="date-year" class="tna-date-input__item-input tna-date-input__item-input--wider" inputmode="numeric">
      </div>
    </div>
  </fieldset>
</div>

Nunjucks

Nunjucks options
Primary options
Name Type Description
label string

Required.

The label for the date input field.
headingLevel number

Required.

The heading level which represents an element from <h1> through to <h6>.
headingSize string

The physical size of the date input title (xl, l, m or s).
id string

Required.

A unique ID for the date input component.
name string

Required.

The name of the form field.
hint string

An optional hint to display above the form field.
fields array
value object

The values of the date fields.

See macro options for value.
error object

If set, the details of any errors.

See macro options for error.
inline boolean

If true, show the date inputs inline rather than vertical.
progressive boolean
formGroupClasses string

Classes to add to the date input form group.
formGroupAttributes object

HTML attributes (for example data attributes) to add to the date input form group.
classes string

Classes to add to the date input.
attributes object

HTML attributes (for example data attributes) to add to the date input.
Options for value
Name Type Description
day string
month string
year string
Options for error
Name Type Description
text string

Required.

The error text to display.

 
{% from "nationalarchives/components/date-input/macro.njk" import tnaDateInput %}

{{ tnaDateInput({
  label: "Enter a start date",
  headingLevel: 4,
  headingSize: "m",
  id: "date",
  name: "date",
  value: {
    day: "24",
    month: "09",
    year: "1986"
  }
}) }}

Hint

Open this example in new tab

HTML 

<div class="tna-form__group">
  <fieldset class="tna-form__fieldset" aria-describedby="date-hint ">
    <legend class="tna-form__legend">
      <h4 class="tna-form__heading tna-form__heading--m">
        Enter a start date
      </h4>
    </legend>
    <p id="date-hint" class="tna-form__hint">
      The earliest date of the record
    </p>
    <div class="tna-date-input" id="date">
      <div class="tna-date-input__item tna-date-input__item--day">
        <label for="date-day" class="tna-date-input__item-label">
          Day
        </label>
        <input type="text" id="date-day" value="" name="date-day" class="tna-date-input__item-input" inputmode="numeric">
      </div>
      <div class="tna-date-input__item tna-date-input__item--month">
        <label for="date-month" class="tna-date-input__item-label">
          Month
        </label>
        <input type="text" id="date-month" value="" name="date-month" class="tna-date-input__item-input" inputmode="numeric">
      </div>
      <div class="tna-date-input__item tna-date-input__item--year">
        <label for="date-year" class="tna-date-input__item-label">
          Year
        </label>
        <input type="text" id="date-year" value="" name="date-year" class="tna-date-input__item-input tna-date-input__item-input--wider" inputmode="numeric">
      </div>
    </div>
  </fieldset>
</div>

Nunjucks

Nunjucks options
Primary options
Name Type Description
label string

Required.

The label for the date input field.
headingLevel number

Required.

The heading level which represents an element from <h1> through to <h6>.
headingSize string

The physical size of the date input title (xl, l, m or s).
id string

Required.

A unique ID for the date input component.
name string

Required.

The name of the form field.
hint string

An optional hint to display above the form field.
fields array
value object

The values of the date fields.

See macro options for value.
error object

If set, the details of any errors.

See macro options for error.
inline boolean

If true, show the date inputs inline rather than vertical.
progressive boolean
formGroupClasses string

Classes to add to the date input form group.
formGroupAttributes object

HTML attributes (for example data attributes) to add to the date input form group.
classes string

Classes to add to the date input.
attributes object

HTML attributes (for example data attributes) to add to the date input.
Options for value
Name Type Description
day string
month string
year string
Options for error
Name Type Description
text string

Required.

The error text to display.

 
{% from "nationalarchives/components/date-input/macro.njk" import tnaDateInput %}

{{ tnaDateInput({
  label: "Enter a start date",
  headingLevel: 4,
  headingSize: "m",
  id: "date",
  name: "date",
  hint: "The earliest date of the record"
}) }}

Error

Open this example in new tab

HTML 

<div class="tna-form__group tna-form__group--error">
  <fieldset class="tna-form__fieldset" aria-describedby=" date-error">
    <legend class="tna-form__legend">
      <h4 class="tna-form__heading tna-form__heading--m">
        Enter a start date
      </h4>
    </legend>
    <p id="date-error" class="tna-form__error-message">
      <span class="tna-!--visually-hidden">Error:</span> Date is not valid
    </p>
    <div class="tna-date-input" id="date">
      <div class="tna-date-input__item tna-date-input__item--day">
        <label for="date-day" class="tna-date-input__item-label">
          Day
        </label>
        <input type="text" id="date-day" value="" name="date-day" class="tna-date-input__item-input" inputmode="numeric">
      </div>
      <div class="tna-date-input__item tna-date-input__item--month">
        <label for="date-month" class="tna-date-input__item-label">
          Month
        </label>
        <input type="text" id="date-month" value="" name="date-month" class="tna-date-input__item-input" inputmode="numeric">
      </div>
      <div class="tna-date-input__item tna-date-input__item--year">
        <label for="date-year" class="tna-date-input__item-label">
          Year
        </label>
        <input type="text" id="date-year" value="" name="date-year" class="tna-date-input__item-input tna-date-input__item-input--wider" inputmode="numeric">
      </div>
    </div>
  </fieldset>
</div>

Nunjucks

Nunjucks options
Primary options
Name Type Description
label string

Required.

The label for the date input field.
headingLevel number

Required.

The heading level which represents an element from <h1> through to <h6>.
headingSize string

The physical size of the date input title (xl, l, m or s).
id string

Required.

A unique ID for the date input component.
name string

Required.

The name of the form field.
hint string

An optional hint to display above the form field.
fields array
value object

The values of the date fields.

See macro options for value.
error object

If set, the details of any errors.

See macro options for error.
inline boolean

If true, show the date inputs inline rather than vertical.
progressive boolean
formGroupClasses string

Classes to add to the date input form group.
formGroupAttributes object

HTML attributes (for example data attributes) to add to the date input form group.
classes string

Classes to add to the date input.
attributes object

HTML attributes (for example data attributes) to add to the date input.
Options for value
Name Type Description
day string
month string
year string
Options for error
Name Type Description
text string

Required.

The error text to display.

 
{% from "nationalarchives/components/date-input/macro.njk" import tnaDateInput %}

{{ tnaDateInput({
  label: "Enter a start date",
  headingLevel: 4,
  headingSize: "m",
  id: "date",
  name: "date",
  error: {
    text: "Date is not valid"
  }
}) }}

Back to top