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

Search field

Use the search field component as an entry point into searches.

Contents

  1. Component status
  2. Preselected
  3. Hint
Open this example in new tab

HTML 

<div class="tna-form-item">
  <div class="tna-form-item__header">
    <h1 class="tna-form-item__label tna-heading-l">
      <label for="search">
        Catalogue search results
      </label>
    </h1>
  </div>
  <div class="tna-form-item__body">
    <div class="tna-search-field">
      <input type="search" id="search" class="tna-search-field__input" name="q" value="" spellcheck="false">
      <button class="tna-button tna-search-field__button tna-button--icon-only" type="submit">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
          <path d="M480 272C480 317.9 465.1 360.3 440 394.7L566.6 521.4C579.1 533.9 579.1 554.2 566.6 566.7C554.1 579.2 533.8 579.2 521.3 566.7L394.7 440C360.3 465.1 317.9 480 272 480C157.1 480 64 386.9 64 272C64 157.1 157.1 64 272 64C386.9 64 480 157.1 480 272zM272 416C351.5 416 416 351.5 416 272C416 192.5 351.5 128 272 128C192.5 128 128 192.5 128 272C128 351.5 192.5 416 272 416z" />
        </svg>
        Search
      </button>
    </div>
  </div>
</div>

Nunjucks

Nunjucks options
Primary options
Name Type Description
label string

Required.

The label for the search 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 search field title (xl, l, m, s or xs).

Default value: m
id string

Required.

A unique ID for the search field 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.
formItemClasses string

Classes to add to the search form group.
formItemAttributes object

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

Classes to add to the search field.
attributes object

HTML attributes (for example data attributes) to add to the search field.

 
{% from "nationalarchives/components/search-field/macro.njk" import tnaSearchField %}

{{ tnaSearchField({
  label: "Catalogue search results",
  headingLevel: 1,
  headingSize: "l",
  id: "search",
  name: "q"
}) }}

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/search-field/macro.html" import tnaSearchField %}

{{ tnaSearchField({
  "label": "Catalogue search results",
  "headingLevel": 1,
  "headingSize": "l",
  "id": "search",
  "name": "q"
}) }}

Component status

Phase
Official (ready to use in production)

Preselected

Open this example in new tab

HTML 

<div class="tna-form-item">
  <div class="tna-form-item__header">
    <h1 class="tna-form-item__label tna-heading-l">
      <label for="search">
        Catalogue search results
      </label>
    </h1>
  </div>
  <div class="tna-form-item__body">
    <div class="tna-search-field">
      <input type="search" id="search" class="tna-search-field__input" name="q" value="badgers" spellcheck="false">
      <button class="tna-button tna-search-field__button tna-button--icon-only" type="submit">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
          <path d="M480 272C480 317.9 465.1 360.3 440 394.7L566.6 521.4C579.1 533.9 579.1 554.2 566.6 566.7C554.1 579.2 533.8 579.2 521.3 566.7L394.7 440C360.3 465.1 317.9 480 272 480C157.1 480 64 386.9 64 272C64 157.1 157.1 64 272 64C386.9 64 480 157.1 480 272zM272 416C351.5 416 416 351.5 416 272C416 192.5 351.5 128 272 128C192.5 128 128 192.5 128 272C128 351.5 192.5 416 272 416z" />
        </svg>
        Search
      </button>
    </div>
  </div>
</div>

Nunjucks

Nunjucks options
Primary options
Name Type Description
label string

Required.

The label for the search 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 search field title (xl, l, m, s or xs).

Default value: m
id string

Required.

A unique ID for the search field 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.
formItemClasses string

Classes to add to the search form group.
formItemAttributes object

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

Classes to add to the search field.
attributes object

HTML attributes (for example data attributes) to add to the search field.

 
{% from "nationalarchives/components/search-field/macro.njk" import tnaSearchField %}

{{ tnaSearchField({
  label: "Catalogue search results",
  headingLevel: 1,
  headingSize: "l",
  id: "search",
  name: "q",
  value: "badgers"
}) }}

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/search-field/macro.html" import tnaSearchField %}

{{ tnaSearchField({
  "label": "Catalogue search results",
  "headingLevel": 1,
  "headingSize": "l",
  "id": "search",
  "name": "q",
  "value": "badgers"
}) }}

Hint

Open this example in new tab

HTML 

<div class="tna-form-item">
  <div class="tna-form-item__header">
    <h1 class="tna-form-item__label tna-heading-l">
      <label for="search">
        Catalogue search results
      </label>
    </h1>
  </div>
  <p id="search-hint" class="tna-form-item__hint">
    Try searching for something interesting
  </p>
  <div class="tna-form-item__body">
    <div class="tna-search-field">
      <input type="search" id="search" class="tna-search-field__input" name="q" value="" spellcheck="false" aria-describedby="search-hint">
      <button class="tna-button tna-search-field__button tna-button--icon-only" type="submit">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
          <path d="M480 272C480 317.9 465.1 360.3 440 394.7L566.6 521.4C579.1 533.9 579.1 554.2 566.6 566.7C554.1 579.2 533.8 579.2 521.3 566.7L394.7 440C360.3 465.1 317.9 480 272 480C157.1 480 64 386.9 64 272C64 157.1 157.1 64 272 64C386.9 64 480 157.1 480 272zM272 416C351.5 416 416 351.5 416 272C416 192.5 351.5 128 272 128C192.5 128 128 192.5 128 272C128 351.5 192.5 416 272 416z" />
        </svg>
        Search
      </button>
    </div>
  </div>
</div>

Nunjucks

Nunjucks options
Primary options
Name Type Description
label string

Required.

The label for the search 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 search field title (xl, l, m, s or xs).

Default value: m
id string

Required.

A unique ID for the search field 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.
formItemClasses string

Classes to add to the search form group.
formItemAttributes object

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

Classes to add to the search field.
attributes object

HTML attributes (for example data attributes) to add to the search field.

 
{% from "nationalarchives/components/search-field/macro.njk" import tnaSearchField %}

{{ tnaSearchField({
  label: "Catalogue search results",
  headingLevel: 1,
  headingSize: "l",
  id: "search",
  name: "q",
  hint: "Try searching for something interesting"
}) }}

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/search-field/macro.html" import tnaSearchField %}

{{ tnaSearchField({
  "label": "Catalogue search results",
  "headingLevel": 1,
  "headingSize": "l",
  "id": "search",
  "name": "q",
  "hint": "Try searching for something interesting"
}) }}

Back to top