Patterns
Search
Allow users to search and filter for things in your service.
Contents
Avoid allowing forms that are used for searching to produce errors.
Fields
Use the search field component for the main search query term.
Searching for dates should use the date search component. Using this component should mean that there is less chance of producing an error.
Use the select component to offer simple options for sorting.
Use any of the other form fields to helpp with filtering results.
HTML
<div class="tna-container">
<div class="tna-column tna-column--full">
<form novalidate>
<div class="tna-form-item">
<div class="tna-form-item__header">
<h1 class="tna-form-item__label tna-heading-l">
<label for="search">
Search for a record
</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>
<div class="tna-form-item">
<div class="tna-form-item__header">
<label class="tna-form-item__label tna-heading-s" for="date">
Earliest record date
</label>
</div>
<div class="tna-form-item__body">
<input type="date" id="date" class="tna-date-search" name="date" value="">
</div>
</div>
<div class="tna-form-item">
<div class="tna-form-item__header">
<label class="tna-form-item__label tna-heading-s" for="sort">
Sort by
</label>
</div>
<div class="tna-form-item__body">
<select class="tna-select" name="sort" id="sort">
<option value="relevance">Relevance</option>
<option value="date">Date</option>
<option value="title">Title</option>
</select>
</div>
</div>
<div class="tna-button-group">
<button class="tna-button" type="submit">
Update results
</button>
</div>
</form>
</div>
</div>Nunjucks
{% from "nationalarchives/components/button/macro.njk" import tnaButton %}
{% from "nationalarchives/components/date-search/macro.njk" import tnaDateSearch %}
{% from "nationalarchives/components/select/macro.njk" import tnaSelect %}
{% from "nationalarchives/components/search-field/macro.njk" import tnaSearchField %}
<div class="tna-container">
<div class="tna-column tna-column--full">
<form novalidate>
{{ tnaSearchField({
label: "Search for a record",
headingLevel: 1,
headingSize: "l",
id: "search",
name: "q"
}) }}
{{ tnaDateSearch({
label: "Earliest record date",
headingSize: "s",
id: "date",
name: "date"
}) }}
{{ tnaSelect({
label: "Sort by",
headingSize: "s",
id: "sort",
name: "sort",
items: [
{
text: "Relevance",
value: "relevance"
},
{
text: "Date",
value: "date"
},
{
text: "Title",
value: "title"
}
]
}) }}
<div class="tna-button-group">
{{ tnaButton({
text: "Update results",
buttonElement: true,
buttonType: "submit"
}) }}
</div>
</form>
</div>
</div>Jinja
Important information
{% from "components/button/macro.html" import tnaButton %}
{% from "components/date-search/macro.html" import tnaDateSearch %}
{% from "components/select/macro.html" import tnaSelect %}
{% from "components/search-field/macro.html" import tnaSearchField %}
<div class="tna-container">
<div class="tna-column tna-column--full">
<form novalidate>
{{ tnaSearchField({
"label": "Search for a record",
"headingLevel": 1,
"headingSize": "l",
"id": "search",
"name": "q"
}) }}
{{ tnaDateSearch({
"label": "Earliest record date",
"headingSize": "s",
"id": "date",
"name": "date"
}) }}
{{ tnaSelect({
"label": "Sort by",
"headingSize": "s",
"id": "sort",
"name": "sort",
"items": [
{
"text": "Relevance",
"value": "relevance"
},
{
"text": "Date",
"value": "date"
},
{
"text": "Title",
"value": "title"
}
]
}) }}
<div class="tna-button-group">
{{ tnaButton({
"text": "Update results",
"buttonElement": True,
"buttonType": "submit"
}) }}
</div>
</form>
</div>
</div>Displaying results
Use an unordered list (<ul>) element to display results.
Paginate search results using the pagination component at the bottom of the page.
Select a result page size of between 10-100, depending on your service needs and result size.
Number of results
Tell the user how many results were found, which results they are looking at and the main term used for the search (if there is one).
Use commas for large numbers. Make the current results range and total count bold.
Good examples of result text are:
- Showing 1–20 of 2,000 results
- Showing 1–20 of 200 results for "pizza"
- Showing 1–20 of 1,000 results for "cheese" or "pizza"
If there is only one type of result, use that in the text rather than "results":
- Showing 1–20 of 100 teaching resources