Skip to main content Skip to list of components
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. Status
  2. Preselected
  3. Hint
Open this example in new tab

HTML 

<div class="tna-search-field">
  <div class="tna-form__group">
    <div class="tna-form__group-contents">
      <h1 class="tna-form__heading tna-form__heading--l">
        <label class="tna-form__label" for="search">
          Catalogue search results
        </label>
      </h1>
    </div>
    <div class="tna-search-field__fields">
      <input type="search" id="search" class="tna-search-field__input " name="q" value="" spellcheck="false">
      <button type="submit" class="tna-button tna-search-field__button">
        Search
        <i class="fa-solid fa-fw fa-arrow-right tna-!--hide-on-tiny" aria-hidden="true"></i>
      </button>
    </div>
  </div>
</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
formGroupClasses string

Classes to add to the search form group.
formGroupAttributes string

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

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-search-field">
  <div class="tna-form__group">
    <div class="tna-form__group-contents">
      <h1 class="tna-form__heading tna-form__heading--l">
        <label class="tna-form__label" for="search">
          Catalogue search results
        </label>
      </h1>
    </div>
    <div class="tna-search-field__fields">
      <input type="search" id="search" class="tna-search-field__input " name="q" value="badgers" spellcheck="false">
      <button type="submit" class="tna-button tna-search-field__button">
        Search
        <i class="fa-solid fa-fw fa-arrow-right tna-!--hide-on-tiny" aria-hidden="true"></i>
      </button>
    </div>
  </div>
</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
formGroupClasses string

Classes to add to the search form group.
formGroupAttributes string

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-search-field">
  <div class="tna-form__group">
    <div class="tna-form__group-contents">
      <h1 class="tna-form__heading tna-form__heading--l">
        <label class="tna-form__label" for="search">
          Catalogue search results
        </label>
      </h1>
      <p id="search-hint" class="tna-form__hint">
        Try searching for something interesting
      </p>
    </div>
    <div class="tna-search-field__fields">
      <input type="search" id="search" class="tna-search-field__input " name="q" value="" spellcheck="false" aria-describedby="search-hint">
      <button type="submit" class="tna-button tna-search-field__button">
        Search
        <i class="fa-solid fa-fw fa-arrow-right tna-!--hide-on-tiny" aria-hidden="true"></i>
      </button>
    </div>
  </div>
</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
formGroupClasses string

Classes to add to the search form group.
formGroupAttributes string

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