Components

Search field

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

Component status
Prefilled
Hint
Handling errors

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 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": "Search the catalogue",
  "headingLevel": 1,
  "headingSize": "l",
  "id": "search",
  "name": "q"
}) }}

Component status

Phase: Official (ready to use in production)

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 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": "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 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": "Search the catalogue",
  "headingLevel": 1,
  "headingSize": "l",
  "id": "search",
  "name": "q",
  "hint": "Try searching for something interesting"
}) }}

Handling errors

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

Use these solutions for handing user input:

When nothing has been entered, return either no results or all results, depending on your service needs. This field shouldn't need to 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.

This website uses cookies

Search field

Contents

HTML

Nunjucks

Jinja

Important information!

Component status

Prefilled

HTML

Nunjucks

Jinja

Important information!

Hint

HTML

Nunjucks

Jinja

Important information!

Handling errors

Important information

Important information

Important information