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-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.

The label for the search field.
headingLevel number

Required.

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 or s).
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.
formGroupClasses string

Classes to add to the search form group.
formGroupAttributes 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
Ready for production
Tested without CSS
Yes
Passed DAC audit
Not yet audied
Analytics integrated
Yes
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.

The label for the search field.
headingLevel number

Required.

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 or s).
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.
formGroupClasses string

Classes to add to the search form group.
formGroupAttributes 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-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.

The label for the search field.
headingLevel number

Required.

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 or s).
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.
formGroupClasses string

Classes to add to the search form group.
formGroupAttributes 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