Components

Search field

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

Status: Official

How it works
When to use this component
Prefilled
Hint

HTML

<div class="tna-form-item">
  <div class="tna-form-item__header">
    <h1 class="tna-form-item__label tna-heading-l">
      <label for="search">
        Search the catalogue
      </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" title="Search">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" height="24" aria-hidden="true" focusable="false"><!--!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.
buttonText	string	The value of the visually hidden search button text. Default value: `Search`
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: "Search the catalogue",
  headingLevel: 1,
  headingSize: "l",
  id: "search",
  name: "q"
}) }}

Jinja

Important information

This is an experimental feature showing a Jinja2 macro based on the Nunjucks example. Check the converted code for accuracy.

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

{{ tnaSearchField({
  "label": "Search the catalogue",
  "headingLevel": 1,
  "headingSize": "l",
  "id": "search",
  "name": "q"
}) }}

How it works

The search field component does not have the ability to show errors like other input fields.

For handling user input:

If nothing has been entered, return either no results or all results, depending on your service needs. This field shouldn’t require a value.
If the user enters an invalid search term (for example a broken query with unbalanced brackets) then show a warning where the results would normally be to explain the issue.

When to use this component

Use the search field as an entry point into search results.

Prefilled

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">
        Search the catalogue
      </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" title="Search">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" height="24" aria-hidden="true" focusable="false"><!--!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.
buttonText	string	The value of the visually hidden search button text. Default value: `Search`
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: "Search the catalogue",
  headingLevel: 1,
  headingSize: "l",
  id: "search",
  name: "q",
  value: "badgers"
}) }}

Jinja

Important information

This is an experimental feature showing a Jinja2 macro based on the Nunjucks example. Check the converted code for accuracy.

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

{{ tnaSearchField({
  "label": "Search the catalogue",
  "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">
        Search the catalogue
      </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" title="Search">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" height="24" aria-hidden="true" focusable="false"><!--!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.
buttonText	string	The value of the visually hidden search button text. Default value: `Search`
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: "Search the catalogue",
  headingLevel: 1,
  headingSize: "l",
  id: "search",
  name: "q",
  hint: "Try searching for something interesting"
}) }}

Jinja

Important information

This is an experimental feature showing a Jinja2 macro based on the Nunjucks example. Check the converted code for accuracy.

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

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

Search field

Contents

Contents

HTML

Nunjucks

Jinja

Important information

How it works

When to use this component

Prefilled

Contents

HTML

Nunjucks

Jinja

Important information

Hint

Contents

HTML

Nunjucks

Jinja

Important information

Something not right?

This website uses cookies

Search field

Contents

Contents

HTML

Nunjucks

Jinja

Important information!

How it works

When to use this component

Prefilled

Contents

HTML

Nunjucks

Jinja

Important information!

Hint

Contents

HTML

Nunjucks

Jinja

Important information!

Something not right?

Important information

Important information

Important information