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
  5. Progressive

For searching by date, use the date search component.

Open this example in new tab

HTML 

<div class="tna-fieldset tna-fieldset--small-hint">
  <fieldset class="tna-fieldset__inner">
    <legend class="tna-fieldset__legend">
      <h4 class="tna-fieldset__heading tna-heading-m">
        Enter a start date
      </h4>
    </legend>
    <div class="tna-fieldset__body">
      <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>
    </div>
  </fieldset>
</div>

Nunjucks

Nunjucks options
Primary options
Name Type Description
label string

Required.

The label for the date input field.
headingLevel number

The heading level which represents an element from <h1> through to <h6>. Leave blank or set to 0 to use a plain <label> element with no heading.
headingSize string

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

Default value: m
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

An array of fields to display. Can be d, m or y. Order is preserved unless progressive is true.
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.
progressive boolean

If true, order the date fields in a year-month-day order and only show the next field when the previous has a valid value.
formItemClasses string

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

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

Classes to add to the <fieldset> element.
fieldsetAttributes object

HTML attributes (for example data attributes) to add to the <fieldset> element.
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

The value for the day field.
month string

The value for the month field. Usually a number between 1 and 12, a three character month (jan-dec) or the month name (January-December).
year string

The value for the year field.
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"
}) }}

Jinja

Important information

This is an experimental feature that outputs a Jinja template based on the Nunjucks example. Check the converted code for accuracy. 
{% from "components/date-input/macro.html" import tnaDateInput %}

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

Component status

Phase
To be reviewed
Tested without CSS
Yes
Passed DAC audit
Not yet audied
Documentation complete
No

Preselected

Open this example in new tab

HTML 

<div class="tna-fieldset tna-fieldset--small-hint">
  <fieldset class="tna-fieldset__inner">
    <legend class="tna-fieldset__legend">
      <h4 class="tna-fieldset__heading tna-heading-m">
        Enter a start date
      </h4>
    </legend>
    <div class="tna-fieldset__body">
      <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>
    </div>
  </fieldset>
</div>

Nunjucks

Nunjucks options
Primary options
Name Type Description
label string

Required.

The label for the date input field.
headingLevel number

The heading level which represents an element from <h1> through to <h6>. Leave blank or set to 0 to use a plain <label> element with no heading.
headingSize string

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

Default value: m
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

An array of fields to display. Can be d, m or y. Order is preserved unless progressive is true.
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.
progressive boolean

If true, order the date fields in a year-month-day order and only show the next field when the previous has a valid value.
formItemClasses string

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

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

Classes to add to the <fieldset> element.
fieldsetAttributes object

HTML attributes (for example data attributes) to add to the <fieldset> element.
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

The value for the day field.
month string

The value for the month field. Usually a number between 1 and 12, a three character month (jan-dec) or the month name (January-December).
year string

The value for the year field.
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"
  }
}) }}

Jinja

Important information

This is an experimental feature that outputs a Jinja template based on the Nunjucks example. Check the converted code for accuracy. 
{% from "components/date-input/macro.html" 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-fieldset tna-fieldset--small-hint">
  <fieldset class="tna-fieldset__inner" aria-describedby="date-hint">
    <legend class="tna-fieldset__legend">
      <h4 class="tna-fieldset__heading tna-heading-m">
        Enter a start date
      </h4>
    </legend>
    <p id="date-hint" class="tna-fieldset__hint">
      The earliest date of the record
    </p>
    <div class="tna-fieldset__body">
      <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>
    </div>
  </fieldset>
</div>

Nunjucks

Nunjucks options
Primary options
Name Type Description
label string

Required.

The label for the date input field.
headingLevel number

The heading level which represents an element from <h1> through to <h6>. Leave blank or set to 0 to use a plain <label> element with no heading.
headingSize string

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

Default value: m
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

An array of fields to display. Can be d, m or y. Order is preserved unless progressive is true.
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.
progressive boolean

If true, order the date fields in a year-month-day order and only show the next field when the previous has a valid value.
formItemClasses string

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

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

Classes to add to the <fieldset> element.
fieldsetAttributes object

HTML attributes (for example data attributes) to add to the <fieldset> element.
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

The value for the day field.
month string

The value for the month field. Usually a number between 1 and 12, a three character month (jan-dec) or the month name (January-December).
year string

The value for the year field.
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"
}) }}

Jinja

Important information

This is an experimental feature that outputs a Jinja template based on the Nunjucks example. Check the converted code for accuracy. 
{% from "components/date-input/macro.html" 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-fieldset tna-fieldset--small-hint tna-fieldset--error">
  <fieldset class="tna-fieldset__inner" aria-describedby="date-error">
    <legend class="tna-fieldset__legend">
      <h4 class="tna-fieldset__heading tna-heading-m">
        Enter a start date
      </h4>
    </legend>
    <p id="date-error" class="tna-fieldset__error">
      <span class="tna-!--visually-hidden">Error:</span> Date is not valid
    </p>
    <div class="tna-fieldset__body">
      <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>
    </div>
  </fieldset>
</div>

Nunjucks

Nunjucks options
Primary options
Name Type Description
label string

Required.

The label for the date input field.
headingLevel number

The heading level which represents an element from <h1> through to <h6>. Leave blank or set to 0 to use a plain <label> element with no heading.
headingSize string

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

Default value: m
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

An array of fields to display. Can be d, m or y. Order is preserved unless progressive is true.
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.
progressive boolean

If true, order the date fields in a year-month-day order and only show the next field when the previous has a valid value.
formItemClasses string

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

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

Classes to add to the <fieldset> element.
fieldsetAttributes object

HTML attributes (for example data attributes) to add to the <fieldset> element.
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

The value for the day field.
month string

The value for the month field. Usually a number between 1 and 12, a three character month (jan-dec) or the month name (January-December).
year string

The value for the year field.
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"
  }
}) }}

Jinja

Important information

This is an experimental feature that outputs a Jinja template based on the Nunjucks example. Check the converted code for accuracy. 
{% from "components/date-input/macro.html" import tnaDateInput %}

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

Progressive

Important information

The progressive variation of the date input component is still experimental.
Open this example in new tab

HTML 

<div class="tna-fieldset tna-fieldset--small-hint">
  <fieldset class="tna-fieldset__inner" aria-describedby="date-hint">
    <legend class="tna-fieldset__legend">
      <h4 class="tna-fieldset__heading tna-heading-m">
        Search for a start date
      </h4>
    </legend>
    <p id="date-hint" class="tna-fieldset__hint">
      Enter a year, year and month, or full date
    </p>
    <div class="tna-fieldset__body">
      <div class="tna-date-input" id="date" data-module="tna-date-input-progressive">
        <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 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--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>
    </div>
  </fieldset>
</div>

Nunjucks

Nunjucks options
Primary options
Name Type Description
label string

Required.

The label for the date input field.
headingLevel number

The heading level which represents an element from <h1> through to <h6>. Leave blank or set to 0 to use a plain <label> element with no heading.
headingSize string

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

Default value: m
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

An array of fields to display. Can be d, m or y. Order is preserved unless progressive is true.
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.
progressive boolean

If true, order the date fields in a year-month-day order and only show the next field when the previous has a valid value.
formItemClasses string

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

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

Classes to add to the <fieldset> element.
fieldsetAttributes object

HTML attributes (for example data attributes) to add to the <fieldset> element.
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

The value for the day field.
month string

The value for the month field. Usually a number between 1 and 12, a three character month (jan-dec) or the month name (January-December).
year string

The value for the year field.
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: "Search for a start date",
  headingLevel: 4,
  headingSize: "m",
  id: "date",
  name: "date",
  hint: "Enter a year, year and month, or full date",
  progressive: true
}) }}

Jinja

Important information

This is an experimental feature that outputs a Jinja template based on the Nunjucks example. Check the converted code for accuracy. 
{% from "components/date-input/macro.html" import tnaDateInput %}

{{ tnaDateInput({
  "label": "Search for a start date",
  "headingLevel": 4,
  "headingSize": "m",
  "id": "date",
  "name": "date",
  "hint": "Enter a year, year and month, or full date",
  "progressive": true
}) }}

Back to top