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-right" type="submit">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" height="24" aria-hidden="true" focusable="false"><!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
          <path d="M566.6 342.6C579.1 330.1 579.1 309.8 566.6 297.3L406.6 137.3C394.1 124.8 373.8 124.8 361.3 137.3C348.8 149.8 348.8 170.1 361.3 182.6L466.7 288L96 288C78.3 288 64 302.3 64 320C64 337.7 78.3 352 96 352L466.7 352L361.3 457.4C348.8 469.9 348.8 490.2 361.3 502.7C373.8 515.2 394.1 515.2 406.6 502.7L566.6 342.7z" />
        </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>.
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"
}) }}

Component status

Phase
Official (ready to use in production)
Analytics integrated
Yes

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-right" type="submit">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" height="24" aria-hidden="true" focusable="false"><!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
          <path d="M566.6 342.6C579.1 330.1 579.1 309.8 566.6 297.3L406.6 137.3C394.1 124.8 373.8 124.8 361.3 137.3C348.8 149.8 348.8 170.1 361.3 182.6L466.7 288L96 288C78.3 288 64 302.3 64 320C64 337.7 78.3 352 96 352L466.7 352L361.3 457.4C348.8 469.9 348.8 490.2 361.3 502.7C373.8 515.2 394.1 515.2 406.6 502.7L566.6 342.7z" />
        </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>.
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"
}) }}

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-right" type="submit">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" height="24" aria-hidden="true" focusable="false"><!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
          <path d="M566.6 342.6C579.1 330.1 579.1 309.8 566.6 297.3L406.6 137.3C394.1 124.8 373.8 124.8 361.3 137.3C348.8 149.8 348.8 170.1 361.3 182.6L466.7 288L96 288C78.3 288 64 302.3 64 320C64 337.7 78.3 352 96 352L466.7 352L361.3 457.4C348.8 469.9 348.8 490.2 361.3 502.7C373.8 515.2 394.1 515.2 406.6 502.7L566.6 342.7z" />
        </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>.
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"
}) }}

Back to top