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 search

Use the date search component to allow the user to enter a date to search with.

Contents

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

When you need the user to enter a date for data purposes or don’t want to require a day or month, use the date input component.

Open this example in new tab

HTML 

<div class="tna-form-item">
  <div class="tna-form-item__header">
    <h4 class="tna-form-item__label tna-heading-m">
      <label for="date">
        Enter a start date
      </label>
    </h4>
  </div>
  <div class="tna-form-item__body">
    <input type="date" id="date" class="tna-date-search" name="date" value="">
  </div>
</div>

Nunjucks

Nunjucks options
Primary options
Name Type Description
label string

Required.

The label for the date search field.
headingLevel number

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

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

Default value: m
id string

Required.

A unique ID for the date search component.
name string

Required.

The name of the form field.
hint string

An optional hint to display above the form field.
value string

The form field value.
error object

If set, the details of any errors.

See macro options for error.
maxWidth boolean

If true, make the date search field expand to the full width of the container.
formItemClasses string

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

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

Classes to add to the date search field.
attributes object

HTML attributes (for example data attributes) to add to the date search field.
Options for error
Name Type Description
text string

Required.

The error text to display.

 
{% from "nationalarchives/components/date-search/macro.njk" import tnaDateSearch %}

{{ tnaDateSearch({
  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
Analytics integrated
In development
Documentation complete
No

Preselected

Open this example in new tab

HTML 

<div class="tna-form-item">
  <div class="tna-form-item__header">
    <h4 class="tna-form-item__label tna-heading-m">
      <label for="date">
        Enter a start date
      </label>
    </h4>
  </div>
  <div class="tna-form-item__body">
    <input type="date" id="date" class="tna-date-search" name="date" value="1986-09-24">
  </div>
</div>

Nunjucks

Nunjucks options
Primary options
Name Type Description
label string

Required.

The label for the date search field.
headingLevel number

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

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

Default value: m
id string

Required.

A unique ID for the date search component.
name string

Required.

The name of the form field.
hint string

An optional hint to display above the form field.
value string

The form field value.
error object

If set, the details of any errors.

See macro options for error.
maxWidth boolean

If true, make the date search field expand to the full width of the container.
formItemClasses string

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

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

Classes to add to the date search field.
attributes object

HTML attributes (for example data attributes) to add to the date search field.
Options for error
Name Type Description
text string

Required.

The error text to display.

 
{% from "nationalarchives/components/date-search/macro.njk" import tnaDateSearch %}

{{ tnaDateSearch({
  label: "Enter a start date",
  headingLevel: 4,
  headingSize: "m",
  id: "date",
  name: "date",
  value: "1986-09-24"
}) }}

Hint

Open this example in new tab

HTML 

<div class="tna-form-item">
  <div class="tna-form-item__header">
    <h4 class="tna-form-item__label tna-heading-m">
      <label for="date">
        Enter a start date
      </label>
    </h4>
  </div>
  <p id="date-hint" class="tna-form-item__hint">
    The earliest date of the record
  </p>
  <div class="tna-form-item__body">
    <input type="date" id="date" class="tna-date-search" name="date" value="" aria-describedby="date-hint ">
  </div>
</div>

Nunjucks

Nunjucks options
Primary options
Name Type Description
label string

Required.

The label for the date search field.
headingLevel number

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

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

Default value: m
id string

Required.

A unique ID for the date search component.
name string

Required.

The name of the form field.
hint string

An optional hint to display above the form field.
value string

The form field value.
error object

If set, the details of any errors.

See macro options for error.
maxWidth boolean

If true, make the date search field expand to the full width of the container.
formItemClasses string

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

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

Classes to add to the date search field.
attributes object

HTML attributes (for example data attributes) to add to the date search field.
Options for error
Name Type Description
text string

Required.

The error text to display.

 
{% from "nationalarchives/components/date-search/macro.njk" import tnaDateSearch %}

{{ tnaDateSearch({
  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-item tna-form-item--error">
  <div class="tna-form-item__header">
    <h4 class="tna-form-item__label tna-heading-m">
      <label for="date">
        Enter a start date
      </label>
    </h4>
  </div>
  <p id="date-error" class="tna-form-item__error">
    <span class="tna-!--visually-hidden">Error:</span> Date is not valid
  </p>
  <div class="tna-form-item__body">
    <input type="date" id="date" class="tna-date-search" name="date" value="" aria-describedby=" date-error">
  </div>
</div>

Nunjucks

Nunjucks options
Primary options
Name Type Description
label string

Required.

The label for the date search field.
headingLevel number

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

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

Default value: m
id string

Required.

A unique ID for the date search component.
name string

Required.

The name of the form field.
hint string

An optional hint to display above the form field.
value string

The form field value.
error object

If set, the details of any errors.

See macro options for error.
maxWidth boolean

If true, make the date search field expand to the full width of the container.
formItemClasses string

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

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

Classes to add to the date search field.
attributes object

HTML attributes (for example data attributes) to add to the date search field.
Options for error
Name Type Description
text string

Required.

The error text to display.

 
{% from "nationalarchives/components/date-search/macro.njk" import tnaDateSearch %}

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

Back to top