Skip to main content Skip to list of components
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. Status
  2. Preselected
  3. Hint
  4. Error
  5. Inline

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__group">
  <div class="tna-form__group-contents">
    <h4 class="tna-form__heading tna-form__heading--m">
      <label class="tna-form__label" for="date">
        Enter a start date
      </label>
    </h4>
  </div>
  <input type="date" id="date" class="tna-date-search " name="date" value="">
</div>

Nunjucks

Nunjucks options
Primary options
Name Type Description
label string

Required.

headingLevel number

Required.

headingSize string
id string

Required.

name string

Required.

hint string
value string
error object

See error.
maxWidth boolean
inline boolean
formGroupClasses string

Classes to add to the date search form group.
formGroupAttributes string

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. 

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

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

Status

Status
In development
Tested without CSS
Yes
WCAG 2.2 AA compliant
In development
Analytics integrated
In development
Documentation complete
No

Preselected

Open this example in new tab

HTML 

<div class="tna-form__group">
  <div class="tna-form__group-contents">
    <h4 class="tna-form__heading tna-form__heading--m">
      <label class="tna-form__label" for="date">
        Enter a start date
      </label>
    </h4>
  </div>
  <input type="date" id="date" class="tna-date-search " name="date" value="1986-09-24">
</div>

Nunjucks

Nunjucks options
Primary options
Name Type Description
label string

Required.

headingLevel number

Required.

headingSize string
id string

Required.

name string

Required.

hint string
value string
error object

See error.
maxWidth boolean
inline boolean
formGroupClasses string

Classes to add to the date search form group.
formGroupAttributes string

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. 

{% 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__group">
  <div class="tna-form__group-contents">
    <h4 class="tna-form__heading tna-form__heading--m">
      <label class="tna-form__label" for="date">
        Enter a start date
      </label>
    </h4>
    <p id="date-hint" class="tna-form__hint">
      The earliest date of the record
    </p>
  </div>
  <input type="date" id="date" class="tna-date-search " name="date" value="" aria-describedby="date-hint ">
</div>

Nunjucks

Nunjucks options
Primary options
Name Type Description
label string

Required.

headingLevel number

Required.

headingSize string
id string

Required.

name string

Required.

hint string
value string
error object

See error.
maxWidth boolean
inline boolean
formGroupClasses string

Classes to add to the date search form group.
formGroupAttributes string

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. 

{% 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__group tna-form__group--error">
  <div class="tna-form__group-contents">
    <h4 class="tna-form__heading tna-form__heading--m">
      <label class="tna-form__label" for="date">
        Enter a start date
      </label>
    </h4>
    <p id="date-error" class="tna-form__error-message">
      <span class="tna-!--visually-hidden">Error:</span> Date is not valid
    </p>
  </div>
  <input type="date" id="date" class="tna-date-search " name="date" value="" aria-describedby=" date-error">
</div>

Nunjucks

Nunjucks options
Primary options
Name Type Description
label string

Required.

headingLevel number

Required.

headingSize string
id string

Required.

name string

Required.

hint string
value string
error object

See error.
maxWidth boolean
inline boolean
formGroupClasses string

Classes to add to the date search form group.
formGroupAttributes string

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. 

{% 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"
  }
}) }}

Inline

Open this example in new tab

HTML 

<div class="tna-form__group tna-form__group--inline">
  <div class="tna-form__group-contents">
    <h4 class="tna-form__heading tna-form__heading--m">
      <label class="tna-form__label" for="date">
        Enter a start date
      </label>
    </h4>
  </div>
  <input type="date" id="date" class="tna-date-search " name="date" value="">
</div>

Nunjucks

Nunjucks options
Primary options
Name Type Description
label string

Required.

headingLevel number

Required.

headingSize string
id string

Required.

name string

Required.

hint string
value string
error object

See error.
maxWidth boolean
inline boolean
formGroupClasses string

Classes to add to the date search form group.
formGroupAttributes string

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. 

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

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

Back to top