Components
Search field
Use the search field component as an entry point into searches.
Contents
<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 options
| Name | Type | Description |
|---|---|---|
| label | string |
Required. The label for the search field. |
| headingLevel | number |
Required. The heading level which represents an element from |
| headingSize | string |
The physical size of the search field title ( |
| 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
<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 options
| Name | Type | Description |
|---|---|---|
| label | string |
Required. The label for the search field. |
| headingLevel | number |
Required. The heading level which represents an element from |
| headingSize | string |
The physical size of the search field title ( |
| 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
<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 options
| Name | Type | Description |
|---|---|---|
| label | string |
Required. The label for the search field. |
| headingLevel | number |
Required. The heading level which represents an element from |
| headingSize | string |
The physical size of the search field title ( |
| 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"
}) }}