From da31348e6f64870bcd2d770ed6a3c963f878a388 Mon Sep 17 00:00:00 2001
From: Andrew Hosgood <mail@andrewhosgood.com>
Date: Fri, 1 Mar 2024 18:05:03 +0000
Subject: [PATCH] Search filters (#94)

* Initial draft of search filters

* Extra attributes on search filter fields

* Accessibility fixes to search filters

* Remove some classes from compound filters

* Fix missing data in fixtures

* More updates to search filters

* More updates to search filters

* Add hover state to button

* Add opened example
---
 .github/actions/prototype-kit-test/action.yml |   6 +-
 CHANGELOG.md                                  |   8 +-
 src/nationalarchives/all.mjs                  |   9 +
 src/nationalarchives/components/_index.scss   |   3 +-
 .../components/button/button.scss             |   1 +
 .../components/checkboxes/checkboxes.njk      |  12 +
 .../components/checkboxes/checkboxes.scss     |   1 +
 .../components/checkboxes/fixtures.json       |   4 +-
 .../components/checkboxes/template.njk        |   9 +-
 .../compound-filters/compound-filters.scss    |   2 +
 .../components/compound-filters/fixtures.json |   2 +-
 .../components/compound-filters/template.njk  |   2 +-
 .../components/date-input/fixtures.json       |   4 +-
 .../components/date-input/template.njk        |   2 +-
 .../components/date-search/date-search.njk    |   7 +
 .../components/date-search/fixtures.json      |   4 +-
 .../components/date-search/template.njk       |   7 +-
 .../components/filters/_index.scss            |   1 -
 .../components/filters/fixtures.json          |  50 -----
 .../components/filters/macro.njk              |   3 -
 .../components/filters/template.njk           |   8 -
 .../components/quick-filters/_index.scss      |   1 +
 .../components/quick-filters/fixtures.json    |  51 +++++
 .../macro-options.json                        |   4 +-
 .../components/quick-filters/macro.njk        |   3 +
 .../quick-filters.scss}                       |  18 +-
 .../quick-filters.stories.js}                 |   4 +-
 .../components/quick-filters/template.njk     |   8 +
 .../components/radios/fixtures.json           |   4 +-
 .../components/radios/radios.njk              |  12 +
 .../components/radios/template.njk            |  15 +-
 .../components/search-field/fixtures.json     |   2 +-
 .../components/search-field/search-field.scss |   2 +-
 .../components/search-field/template.njk      |   2 +-
 .../components/search-filters/_index.scss     |   1 +
 .../components/search-filters/fixtures.json   |  16 ++
 .../search-filters/macro-options.json         |  39 ++++
 .../components/search-filters/macro.njk       |   3 +
 .../search-filters/search-filters.mjs         |  67 ++++++
 .../search-filters/search-filters.scss        | 163 ++++++++++++++
 .../search-filters/search-filters.stories.js  | 207 ++++++++++++++++++
 .../components/search-filters/template.njk    | 107 +++++++++
 .../components/select/fixtures.json           |   2 +-
 .../components/select/select.scss             |   2 +-
 .../components/select/template.njk            |   2 +-
 .../components/text-input/fixtures.json       |   4 +-
 .../components/text-input/template.njk        |  10 +-
 .../components/text-input/text-input.njk      |  10 +
 .../components/text-input/text-input.scss     |   2 +-
 .../components/textarea/fixtures.json         |   4 +-
 .../components/textarea/template.njk          |   2 +-
 .../components/textarea/textarea.scss         |   2 +-
 src/nationalarchives/tools/_a11y.scss         |   4 +-
 src/nationalarchives/utilities/_forms.scss    |   6 +
 .../utilities/_typography.scss                |   2 +
 tasks/test-package.js                         |   3 +-
 56 files changed, 799 insertions(+), 130 deletions(-)
 create mode 100644 src/nationalarchives/components/checkboxes/checkboxes.njk
 create mode 100644 src/nationalarchives/components/date-search/date-search.njk
 delete mode 100644 src/nationalarchives/components/filters/_index.scss
 delete mode 100644 src/nationalarchives/components/filters/fixtures.json
 delete mode 100644 src/nationalarchives/components/filters/macro.njk
 delete mode 100644 src/nationalarchives/components/filters/template.njk
 create mode 100644 src/nationalarchives/components/quick-filters/_index.scss
 create mode 100644 src/nationalarchives/components/quick-filters/fixtures.json
 rename src/nationalarchives/components/{filters => quick-filters}/macro-options.json (91%)
 create mode 100644 src/nationalarchives/components/quick-filters/macro.njk
 rename src/nationalarchives/components/{filters/filters.scss => quick-filters/quick-filters.scss} (70%)
 rename src/nationalarchives/components/{filters/filters.stories.js => quick-filters/quick-filters.stories.js} (95%)
 create mode 100644 src/nationalarchives/components/quick-filters/template.njk
 create mode 100644 src/nationalarchives/components/radios/radios.njk
 create mode 100644 src/nationalarchives/components/search-filters/_index.scss
 create mode 100644 src/nationalarchives/components/search-filters/fixtures.json
 create mode 100644 src/nationalarchives/components/search-filters/macro-options.json
 create mode 100644 src/nationalarchives/components/search-filters/macro.njk
 create mode 100644 src/nationalarchives/components/search-filters/search-filters.mjs
 create mode 100644 src/nationalarchives/components/search-filters/search-filters.scss
 create mode 100644 src/nationalarchives/components/search-filters/search-filters.stories.js
 create mode 100644 src/nationalarchives/components/search-filters/template.njk
 create mode 100644 src/nationalarchives/components/text-input/text-input.njk

diff --git a/.github/actions/prototype-kit-test/action.yml b/.github/actions/prototype-kit-test/action.yml
index a64de58e..93005ce0 100644
--- a/.github/actions/prototype-kit-test/action.yml
+++ b/.github/actions/prototype-kit-test/action.yml
@@ -45,7 +45,6 @@ runs:
         echo -e "{% from \"nationalarchives/components/date-search/macro.njk\" import tnaDateSearch %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
         echo -e "{% from \"nationalarchives/components/error-summary/macro.njk\" import tnaErrorSummary %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
         echo -e "{% from \"nationalarchives/components/featured-records/macro.njk\" import tnaFeaturedRecords %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
-        echo -e "{% from \"nationalarchives/components/filters/macro.njk\" import tnaFilters %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
         echo -e "{% from \"nationalarchives/components/footer/macro.njk\" import tnaFooter %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
         echo -e "{% from \"nationalarchives/components/gallery/macro.njk\" import tnaGallery %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
         echo -e "{% from \"nationalarchives/components/global-header/macro.njk\" import tnaGlobalHeader %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
@@ -57,9 +56,11 @@ runs:
         echo -e "{% from \"nationalarchives/components/pagination/macro.njk\" import tnaPagination %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
         echo -e "{% from \"nationalarchives/components/phase-banner/macro.njk\" import tnaPhaseBanner %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
         echo -e "{% from \"nationalarchives/components/picture/macro.njk\" import tnaPicture %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
+        echo -e "{% from \"nationalarchives/components/quick-filters/macro.njk\" import tnaQuickFilters %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
         echo -e "{% from \"nationalarchives/components/radios/macro.njk\" import tnaRadios %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
         echo -e "{% from \"nationalarchives/components/sensitive-image/macro.njk\" import tnaSensitiveImage %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
         echo -e "{% from \"nationalarchives/components/search-field/macro.njk\" import tnaSearchField %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
+        echo -e "{% from \"nationalarchives/components/search-filters/macro.njk\" import tnaSearchFilters %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
         echo -e "{% from \"nationalarchives/components/select/macro.njk\" import tnaSelect %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
         echo -e "{% from \"nationalarchives/components/skip-link/macro.njk\" import tnaSkipLink %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
         echo -e "{% from \"nationalarchives/components/tabs/macro.njk\" import tnaTabs %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
@@ -79,7 +80,6 @@ runs:
         echo "{{ tnaDateSearch({}) }}" >> prototype/app/views/index.html &&
         echo "{{ tnaErrorSummary({}) }}" >> prototype/app/views/index.html &&
         echo "{{ tnaFeaturedRecords({}) }}" >> prototype/app/views/index.html &&
-        echo "{{ tnaFilters({}) }}" >> prototype/app/views/index.html &&
         echo "{{ tnaFooter({}) }}" >> prototype/app/views/index.html &&
         echo "{{ tnaGallery({}) }}" >> prototype/app/views/index.html &&
         echo "{{ tnaGlobalHeader({}) }}" >> prototype/app/views/index.html &&
@@ -91,9 +91,11 @@ runs:
         echo "{{ tnaPagination({}) }}" >> prototype/app/views/index.html &&
         echo "{{ tnaPhaseBanner({}) }}" >> prototype/app/views/index.html &&
         echo "{{ tnaPicture({}) }}" >> prototype/app/views/index.html &&
+        echo "{{ tnaQuickFilters({}) }}" >> prototype/app/views/index.html &&
         echo "{{ tnaRadios({}) }}" >> prototype/app/views/index.html &&
         echo "{{ tnaSensitiveImage({}) }}" >> prototype/app/views/index.html &&
         echo "{{ tnaSearchField({}) }}" >> prototype/app/views/index.html &&
+        echo "{{ tnaSearchFilters({}) }}" >> prototype/app/views/index.html &&
         echo "{{ tnaSelect({}) }}" >> prototype/app/views/index.html &&
         echo "{{ tnaSkipLink({}) }}" >> prototype/app/views/index.html &&
         echo "{{ tnaTabs({}) }}" >> prototype/app/views/index.html &&
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 88e74fc5..6a935a09 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,13 +10,19 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Error summary component
+- Initial idea for search filters
 - Allow structured data in breadcrumbs with `structuredData`
 
 ### Changed
+
+- `filters` are now `quick-filters` (and the Nunjucks has changed from `tnaFilters` to `tnaQuickFilters`)
+- Borders size around inputs has been increased
+- Removed `tna-ul tna-ul--plain` classes from compound filters
+
 ### Deprecated
 ### Removed
 
-- Removed the `tna-form__` prefix from form field IDs
+- Removed the automatic `tna-form__` prefix from form field IDs
 
 ### Fixed
 ### Security
diff --git a/src/nationalarchives/all.mjs b/src/nationalarchives/all.mjs
index 23036153..9aa56ae8 100644
--- a/src/nationalarchives/all.mjs
+++ b/src/nationalarchives/all.mjs
@@ -5,6 +5,7 @@ import { Gallery } from "./components/gallery/gallery.mjs";
 import { GlobalHeader } from "./components/global-header/global-header.mjs";
 import { Header } from "./components/header/header.mjs";
 import { Picture } from "./components/picture/picture.mjs";
+import { SearchFilters } from "./components/search-filters/search-filters.mjs";
 import { SensitiveImage } from "./components/sensitive-image/sensitive-image.mjs";
 import { SkipLink } from "./components/skip-link/skip-link.mjs";
 import { Tabs } from "./components/tabs/tabs.mjs";
@@ -80,6 +81,13 @@ const initAll = (options) => {
     new Picture($picture);
   });
 
+  const $searchFilters = $scope.querySelectorAll(
+    '[data-module="tna-search-filters"]',
+  );
+  $searchFilters.forEach(($searchFilter) => {
+    new SearchFilters($searchFilter);
+  });
+
   const $sensitiveImages = $scope.querySelectorAll(
     '[data-module="tna-sensitive-image"]',
   );
@@ -108,6 +116,7 @@ export {
   GlobalHeader,
   Header,
   Picture,
+  SearchFilters,
   SensitiveImage,
   SkipLink,
   Tabs,
diff --git a/src/nationalarchives/components/_index.scss b/src/nationalarchives/components/_index.scss
index beec5bc6..c5725cdc 100644
--- a/src/nationalarchives/components/_index.scss
+++ b/src/nationalarchives/components/_index.scss
@@ -8,7 +8,6 @@
 @use "date-search";
 @use "error-summary";
 @use "featured-records";
-@use "filters";
 @use "footer";
 @use "gallery";
 @use "global-header";
@@ -20,9 +19,11 @@
 @use "pagination";
 @use "phase-banner";
 @use "picture";
+@use "quick-filters";
 @use "radios";
 @use "sensitive-image";
 @use "search-field";
+@use "search-filters";
 @use "select";
 @use "skip-link";
 @use "tabs";
diff --git a/src/nationalarchives/components/button/button.scss b/src/nationalarchives/components/button/button.scss
index 31040f8e..5913df2b 100644
--- a/src/nationalarchives/components/button/button.scss
+++ b/src/nationalarchives/components/button/button.scss
@@ -22,6 +22,7 @@
   @include colour.colour-background("button-background");
 
   @include colour.colour-border("button-background", 0.25rem);
+  // border-radius: 0.1px;
 
   cursor: pointer;
 
diff --git a/src/nationalarchives/components/checkboxes/checkboxes.njk b/src/nationalarchives/components/checkboxes/checkboxes.njk
new file mode 100644
index 00000000..751848b1
--- /dev/null
+++ b/src/nationalarchives/components/checkboxes/checkboxes.njk
@@ -0,0 +1,12 @@
+{% macro tnaCheckboxesElement(params, extraAttributes) %}
+  <div class="tna-checkboxes{% if params.small or params.inline %} tna-checkboxes--small{% endif %}{% if params.inline %} tna-checkboxes--inline{% endif %}">
+    {%- for item in params.items %}
+    <div class="tna-checkboxes__item">
+      <input type="checkbox" id="{{ params.id }}-{{ item.value }}" value="{{ item.value }}" name="{{ params.name }}"{% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}{% for attribute, value in extraAttributes %} {{ attribute }}="{{ value }}"{% endfor %}{% if item.checked %} checked{% endif %}>
+      <label for="{{ params.id }}-{{ item.value }}" class="tna-checkboxes__item-label">
+        {{ item.text }}
+      </label>
+    </div>
+    {%- endfor %}
+  </div>
+{% endmacro %}
diff --git a/src/nationalarchives/components/checkboxes/checkboxes.scss b/src/nationalarchives/components/checkboxes/checkboxes.scss
index 55c2eca4..0335a156 100644
--- a/src/nationalarchives/components/checkboxes/checkboxes.scss
+++ b/src/nationalarchives/components/checkboxes/checkboxes.scss
@@ -61,6 +61,7 @@
           "input-border",
           forms.$form-field-border-width
         );
+        border-radius: 0.1px;
       }
 
       &::after {
diff --git a/src/nationalarchives/components/checkboxes/fixtures.json b/src/nationalarchives/components/checkboxes/fixtures.json
index 9932f213..67c847d5 100644
--- a/src/nationalarchives/components/checkboxes/fixtures.json
+++ b/src/nationalarchives/components/checkboxes/fixtures.json
@@ -130,7 +130,7 @@
           }
         ]
       },
-      "html": "<div class=\"tna-form__group \"><fieldset class=\"tna-form__fieldset\" aria-describedby=\"tna-form__categories-hint \"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Categories</h4></legend><p id=\"categories-hint\" class=\"tna-form__hint\">Select all that apply.</p><div class=\"tna-checkboxes\"><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-alpha\" value=\"alpha\" name=\"categories\"><label for=\"categories-alpha\" class=\"tna-checkboxes__item-label\">Alpha</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-beta\" value=\"beta\" name=\"categories\"><label for=\"categories-beta\" class=\"tna-checkboxes__item-label\">Beta</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-gamma\" value=\"gamma\" name=\"categories\"><label for=\"categories-gamma\" class=\"tna-checkboxes__item-label\">Gamma</label></div></div></fieldset></div>"
+      "html": "<div class=\"tna-form__group \"><fieldset class=\"tna-form__fieldset\" aria-describedby=\"categories-hint \"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Categories</h4></legend><p id=\"categories-hint\" class=\"tna-form__hint\">Select all that apply.</p><div class=\"tna-checkboxes\"><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-alpha\" value=\"alpha\" name=\"categories\"><label for=\"categories-alpha\" class=\"tna-checkboxes__item-label\">Alpha</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-beta\" value=\"beta\" name=\"categories\"><label for=\"categories-beta\" class=\"tna-checkboxes__item-label\">Beta</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-gamma\" value=\"gamma\" name=\"categories\"><label for=\"categories-gamma\" class=\"tna-checkboxes__item-label\">Gamma</label></div></div></fieldset></div>"
     },
     {
       "name": "checkboxes with an error",
@@ -158,7 +158,7 @@
           }
         ]
       },
-      "html": "<div class=\"tna-form__group tna-form__group--error \"><fieldset class=\"tna-form__fieldset\" aria-describedby=\" tna-form__categories-error\"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Categories</h4></legend><p id=\"categories-error\" class=\"tna-form__error-message\"><span class=\"tna-!--visually-hidden\">Error:</span> You must select a category</p><div class=\"tna-checkboxes\"><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-alpha\" value=\"alpha\" name=\"categories\"><label for=\"categories-alpha\" class=\"tna-checkboxes__item-label\">Alpha</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-beta\" value=\"beta\" name=\"categories\"><label for=\"categories-beta\" class=\"tna-checkboxes__item-label\">Beta</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-gamma\" value=\"gamma\" name=\"categories\"><label for=\"categories-gamma\" class=\"tna-checkboxes__item-label\">Gamma</label></div></div></fieldset></div>"
+      "html": "<div class=\"tna-form__group tna-form__group--error \"><fieldset class=\"tna-form__fieldset\" aria-describedby=\" categories-error\"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Categories</h4></legend><p id=\"categories-error\" class=\"tna-form__error-message\"><span class=\"tna-!--visually-hidden\">Error:</span> You must select a category</p><div class=\"tna-checkboxes\"><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-alpha\" value=\"alpha\" name=\"categories\"><label for=\"categories-alpha\" class=\"tna-checkboxes__item-label\">Alpha</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-beta\" value=\"beta\" name=\"categories\"><label for=\"categories-beta\" class=\"tna-checkboxes__item-label\">Beta</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-gamma\" value=\"gamma\" name=\"categories\"><label for=\"categories-gamma\" class=\"tna-checkboxes__item-label\">Gamma</label></div></div></fieldset></div>"
     },
     {
       "name": "inline checkboxes",
diff --git a/src/nationalarchives/components/checkboxes/template.njk b/src/nationalarchives/components/checkboxes/template.njk
index da6b0038..c37e093a 100644
--- a/src/nationalarchives/components/checkboxes/template.njk
+++ b/src/nationalarchives/components/checkboxes/template.njk
@@ -1,9 +1,11 @@
+{% from "nationalarchives/components/checkboxes/checkboxes.njk" import tnaCheckboxesElement %}
+
 {%- set containerClasses = [params.classes] if params.classes else [] -%}
 {%- if params.inline -%}
   {%- set containerClasses = containerClasses.concat('tna-form__group--inline') -%}
 {%- endif -%}
 <div class="tna-form__group{% if params.error %} tna-form__group--error{% endif %} {{ containerClasses | join(' ') }}"{% for attribute, value in params.formGroupAttributes %} {{ attribute }}="{{ value }}"{% endfor %}>
-  <fieldset class="tna-form__fieldset"{%- if params.hint or params.error %} aria-describedby="{%- if params.hint -%}tna-form__{{ params.id }}-hint{%- endif %} {% if params.error -%}tna-form__{{ params.id }}-error{%- endif -%}"{%- endif %}>
+  <fieldset class="tna-form__fieldset"{%- if params.hint or params.error %} aria-describedby="{%- if params.hint -%}{{ params.id }}-hint{%- endif %} {% if params.error -%}{{ params.id }}-error{%- endif -%}"{%- endif %}>
     <legend class="tna-form__legend">
       <h{{ params.headingLevel }} class="tna-form__heading tna-form__heading--{{ params.headingSize or 'm' }}">
         {{ params.label }}
@@ -19,7 +21,8 @@
       <span class="tna-!--visually-hidden">Error:</span> {{ params.error.text }}
     </p>
     {%- endif %}
-    <div class="tna-checkboxes{% if params.small or params.inline %} tna-checkboxes--small{% endif %}{% if params.inline %} tna-checkboxes--inline{% endif %}">
+    {{ tnaCheckboxesElement(params) }}
+    {# <div class="tna-checkboxes{% if params.small or params.inline %} tna-checkboxes--small{% endif %}{% if params.inline %} tna-checkboxes--inline{% endif %}">
       {%- for item in params.items %}
       <div class="tna-checkboxes__item">
         <input type="checkbox" id="{{ params.id }}-{{ item.value }}" value="{{ item.value }}" name="{{ params.name }}"{% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}{% if item.checked %} checked{% endif %}>
@@ -28,6 +31,6 @@
         </label>
       </div>
       {%- endfor %}
-    </div>
+    </div> #}
   </fieldset>
 </div>
diff --git a/src/nationalarchives/components/compound-filters/compound-filters.scss b/src/nationalarchives/components/compound-filters/compound-filters.scss
index 08cf4ebf..981b3fe1 100644
--- a/src/nationalarchives/components/compound-filters/compound-filters.scss
+++ b/src/nationalarchives/components/compound-filters/compound-filters.scss
@@ -10,6 +10,8 @@
   align-items: center;
   gap: 0.75rem 1rem;
 
+  list-style: none;
+
   &__item {
     padding: 0 0.125rem 0 0.75rem;
 
diff --git a/src/nationalarchives/components/compound-filters/fixtures.json b/src/nationalarchives/components/compound-filters/fixtures.json
index 99de9fe9..ddf1c17b 100644
--- a/src/nationalarchives/components/compound-filters/fixtures.json
+++ b/src/nationalarchives/components/compound-filters/fixtures.json
@@ -39,7 +39,7 @@
           }
         ]
       },
-      "html": "<ul class=\"tna-compound-filters tna-ul tna-ul--plain \"><li class=\"tna-compound-filters__item\"><span class=\"tna-compound-filters__label\">Medieval (974—1485)</span><a href=\"#?filter=alpha\" class=\"tna-compound-filters__link\">Remove filter</a></li><li class=\"tna-compound-filters__item\"><span class=\"tna-compound-filters__label\">Early Modern (1485—1714)</span><a href=\"#?filter=beta\" class=\"tna-compound-filters__link\">Remove filter</a></li><li class=\"tna-compound-filters__item\"><span class=\"tna-compound-filters__label\">Georgians (1714—1837)</span><a href=\"#?filter=gamma\" class=\"tna-compound-filters__link\">Remove filter</a></li><li class=\"tna-compound-filters__item\"><span class=\"tna-compound-filters__label\">Victorians (1837—1901)</span><a href=\"#?filter=delta\" class=\"tna-compound-filters__link\">Remove filter</a></li><li class=\"tna-compound-filters__item\"><span class=\"tna-compound-filters__label\">Early 20th century (1901—1918)</span><a href=\"#?filter=epsilon\" class=\"tna-compound-filters__link\">Remove filter</a></li><li class=\"tna-compound-filters__item\"><span class=\"tna-compound-filters__label\">Interwar (1918—1939)</span><a href=\"#?filter=zeta\" class=\"tna-compound-filters__link\">Remove filter</a></li><li class=\"tna-compound-filters__item\"><span class=\"tna-compound-filters__label\">Second World War (1939—1945)</span><a href=\"#?filter=eta\" class=\"tna-compound-filters__link\">Remove filter</a></li><li class=\"tna-compound-filters__item\"><span class=\"tna-compound-filters__label\">Postwar (1945—2000)</span><a href=\"#?filter=theta\" class=\"tna-compound-filters__link\">Remove filter</a></li></ul>"
+      "html": "<ul class=\"tna-compound-filters \"><li class=\"tna-compound-filters__item\"><span class=\"tna-compound-filters__label\">Medieval (974—1485)</span><a href=\"#?filter=alpha\" class=\"tna-compound-filters__link\">Remove filter</a></li><li class=\"tna-compound-filters__item\"><span class=\"tna-compound-filters__label\">Early Modern (1485—1714)</span><a href=\"#?filter=beta\" class=\"tna-compound-filters__link\">Remove filter</a></li><li class=\"tna-compound-filters__item\"><span class=\"tna-compound-filters__label\">Georgians (1714—1837)</span><a href=\"#?filter=gamma\" class=\"tna-compound-filters__link\">Remove filter</a></li><li class=\"tna-compound-filters__item\"><span class=\"tna-compound-filters__label\">Victorians (1837—1901)</span><a href=\"#?filter=delta\" class=\"tna-compound-filters__link\">Remove filter</a></li><li class=\"tna-compound-filters__item\"><span class=\"tna-compound-filters__label\">Early 20th century (1901—1918)</span><a href=\"#?filter=epsilon\" class=\"tna-compound-filters__link\">Remove filter</a></li><li class=\"tna-compound-filters__item\"><span class=\"tna-compound-filters__label\">Interwar (1918—1939)</span><a href=\"#?filter=zeta\" class=\"tna-compound-filters__link\">Remove filter</a></li><li class=\"tna-compound-filters__item\"><span class=\"tna-compound-filters__label\">Second World War (1939—1945)</span><a href=\"#?filter=eta\" class=\"tna-compound-filters__link\">Remove filter</a></li><li class=\"tna-compound-filters__item\"><span class=\"tna-compound-filters__label\">Postwar (1945—2000)</span><a href=\"#?filter=theta\" class=\"tna-compound-filters__link\">Remove filter</a></li></ul>"
     }
   ]
 }
diff --git a/src/nationalarchives/components/compound-filters/template.njk b/src/nationalarchives/components/compound-filters/template.njk
index c77e16e6..899c37b3 100644
--- a/src/nationalarchives/components/compound-filters/template.njk
+++ b/src/nationalarchives/components/compound-filters/template.njk
@@ -1,5 +1,5 @@
 {%- set containerClasses = [params.classes] if params.classes else [] -%}
-<ul class="tna-compound-filters tna-ul tna-ul--plain {{ containerClasses | join(' ') }}"{% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+<ul class="tna-compound-filters {{ containerClasses | join(' ') }}"{% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
   {%- for item in params.items -%}
   <li class="tna-compound-filters__item">
     <span class="tna-compound-filters__label">{{ item.label }}</span>
diff --git a/src/nationalarchives/components/date-input/fixtures.json b/src/nationalarchives/components/date-input/fixtures.json
index 560f5061..f25dfb11 100644
--- a/src/nationalarchives/components/date-input/fixtures.json
+++ b/src/nationalarchives/components/date-input/fixtures.json
@@ -38,7 +38,7 @@
         "name": "date",
         "hint": "The earliest date of the record."
       },
-      "html": "<div class=\"tna-form__group \"><fieldset class=\"tna-form__fieldset\" aria-describedby=\"tna-form__date-hint \"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Enter a start date</h4></legend><p id=\"date-hint\" class=\"tna-form__hint\">The earliest date of the record.</p><div class=\"tna-date-input\"><div class=\"tna-date-input__item\"><label for=\"date-day\" class=\"tna-date-input__item-label\">Day</label><input type=\"text\" id=\"date-day\" value=\"\" name=\"date-day\" class=\"tna-date-input__item-input\" inputmode=\"numeric\"></div><div class=\"tna-date-input__item\"><label for=\"date-month\" class=\"tna-date-input__item-label\">Month</label><input type=\"text\" id=\"date-month\" value=\"\" name=\"date-month\" class=\"tna-date-input__item-input\" inputmode=\"numeric\"></div><div class=\"tna-date-input__item\"><label for=\"date-year\" class=\"tna-date-input__item-label\">Year</label><input type=\"text\" id=\"date-year\" value=\"\" name=\"date-year\" class=\"tna-date-input__item-input tna-date-input__item-input--wider\" inputmode=\"numeric\"></div></div></fieldset></div>"
+      "html": "<div class=\"tna-form__group \"><fieldset class=\"tna-form__fieldset\" aria-describedby=\"date-hint \"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Enter a start date</h4></legend><p id=\"date-hint\" class=\"tna-form__hint\">The earliest date of the record.</p><div class=\"tna-date-input\"><div class=\"tna-date-input__item\"><label for=\"date-day\" class=\"tna-date-input__item-label\">Day</label><input type=\"text\" id=\"date-day\" value=\"\" name=\"date-day\" class=\"tna-date-input__item-input\" inputmode=\"numeric\"></div><div class=\"tna-date-input__item\"><label for=\"date-month\" class=\"tna-date-input__item-label\">Month</label><input type=\"text\" id=\"date-month\" value=\"\" name=\"date-month\" class=\"tna-date-input__item-input\" inputmode=\"numeric\"></div><div class=\"tna-date-input__item\"><label for=\"date-year\" class=\"tna-date-input__item-label\">Year</label><input type=\"text\" id=\"date-year\" value=\"\" name=\"date-year\" class=\"tna-date-input__item-input tna-date-input__item-input--wider\" inputmode=\"numeric\"></div></div></fieldset></div>"
     },
     {
       "name": "date input with an error",
@@ -52,7 +52,7 @@
           "text": "Date is not valid"
         }
       },
-      "html": "<div class=\"tna-form__group tna-form__group--error \"><fieldset class=\"tna-form__fieldset\" aria-describedby=\" tna-form__date-error\"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Enter a start date</h4></legend><p id=\"date-error\" class=\"tna-form__error-message\"><span class=\"tna-!--visually-hidden\">Error:</span> Date is not valid</p><div class=\"tna-date-input\"><div class=\"tna-date-input__item\"><label for=\"date-day\" class=\"tna-date-input__item-label\">Day</label><input type=\"text\" id=\"date-day\" value=\"\" name=\"date-day\" class=\"tna-date-input__item-input\" inputmode=\"numeric\"></div><div class=\"tna-date-input__item\"><label for=\"date-month\" class=\"tna-date-input__item-label\">Month</label><input type=\"text\" id=\"date-month\" value=\"\" name=\"date-month\" class=\"tna-date-input__item-input\" inputmode=\"numeric\"></div><div class=\"tna-date-input__item\"><label for=\"date-year\" class=\"tna-date-input__item-label\">Year</label><input type=\"text\" id=\"date-year\" value=\"\" name=\"date-year\" class=\"tna-date-input__item-input tna-date-input__item-input--wider\" inputmode=\"numeric\"></div></div></fieldset></div>"
+      "html": "<div class=\"tna-form__group tna-form__group--error \"><fieldset class=\"tna-form__fieldset\" aria-describedby=\" date-error\"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Enter a start date</h4></legend><p id=\"date-error\" class=\"tna-form__error-message\"><span class=\"tna-!--visually-hidden\">Error:</span> Date is not valid</p><div class=\"tna-date-input\"><div class=\"tna-date-input__item\"><label for=\"date-day\" class=\"tna-date-input__item-label\">Day</label><input type=\"text\" id=\"date-day\" value=\"\" name=\"date-day\" class=\"tna-date-input__item-input\" inputmode=\"numeric\"></div><div class=\"tna-date-input__item\"><label for=\"date-month\" class=\"tna-date-input__item-label\">Month</label><input type=\"text\" id=\"date-month\" value=\"\" name=\"date-month\" class=\"tna-date-input__item-input\" inputmode=\"numeric\"></div><div class=\"tna-date-input__item\"><label for=\"date-year\" class=\"tna-date-input__item-label\">Year</label><input type=\"text\" id=\"date-year\" value=\"\" name=\"date-year\" class=\"tna-date-input__item-input tna-date-input__item-input--wider\" inputmode=\"numeric\"></div></div></fieldset></div>"
     },
     {
       "name": "inline date input",
diff --git a/src/nationalarchives/components/date-input/template.njk b/src/nationalarchives/components/date-input/template.njk
index 76477c81..7fdd94ef 100644
--- a/src/nationalarchives/components/date-input/template.njk
+++ b/src/nationalarchives/components/date-input/template.njk
@@ -3,7 +3,7 @@
   {%- set containerClasses = containerClasses.concat('tna-form__group--inline') -%}
 {%- endif -%}
 <div class="tna-form__group{% if params.error %} tna-form__group--error{% endif %} {{ containerClasses | join(' ') }}"{% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
-  <fieldset class="tna-form__fieldset"{%- if params.hint or params.error %} aria-describedby="{%- if params.hint -%}tna-form__{{ params.id }}-hint{%- endif %} {% if params.error -%}tna-form__{{ params.id }}-error{%- endif -%}"{%- endif %}>
+  <fieldset class="tna-form__fieldset"{%- if params.hint or params.error %} aria-describedby="{%- if params.hint -%}{{ params.id }}-hint{%- endif %} {% if params.error -%}{{ params.id }}-error{%- endif -%}"{%- endif %}>
     <legend class="tna-form__legend">
       <h{{ params.headingLevel }} class="tna-form__heading tna-form__heading--{{ params.headingSize or 'm' }}">
         {{ params.label }}
diff --git a/src/nationalarchives/components/date-search/date-search.njk b/src/nationalarchives/components/date-search/date-search.njk
new file mode 100644
index 00000000..7e137276
--- /dev/null
+++ b/src/nationalarchives/components/date-search/date-search.njk
@@ -0,0 +1,7 @@
+{% macro tnaDateSearchElement(params, extraAttributes) %}
+  {%- set inputClasses = [params.classes] if params.classes else [] -%}
+  <input type="date" id="{{ params.id }}" class="tna-date-search{% if params.maxWidth %} tna-date-search--max-width{% endif %} {{ inputClasses | join(' ') }}" name="{{ params.name }}" value="{{ params.value }}"
+  {%- if params.hint or params.error %} aria-describedby="{%- if params.hint -%}{{ params.id }}-hint{%- endif %} {% if params.error -%}{{ params.id }}-error{%- endif -%}"{%- endif %}
+  {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}
+  {%- for attribute, value in extraAttributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+{% endmacro %}
\ No newline at end of file
diff --git a/src/nationalarchives/components/date-search/fixtures.json b/src/nationalarchives/components/date-search/fixtures.json
index 6dd1cb2b..40bac214 100644
--- a/src/nationalarchives/components/date-search/fixtures.json
+++ b/src/nationalarchives/components/date-search/fixtures.json
@@ -34,7 +34,7 @@
         "name": "date",
         "hint": "The earliest date of the record."
       },
-      "html": "<div class=\"tna-form__group \"><div class=\"tna-form__group-contents\"><h4 class=\"tna-form__heading tna-form__heading--m\"><label class=\"tna-form__label\" for=\"date\">Enter a start date</label></h4><p id=\"date-hint\" class=\"tna-form__hint\">The earliest date of the record.</p></div><input type=\"date\" id=\"date\" class=\"tna-date-search \" name=\"date\" value=\"\" aria-describedby=\"tna-form__date-hint \"></div>"
+      "html": "<div class=\"tna-form__group \"><div class=\"tna-form__group-contents\"><h4 class=\"tna-form__heading tna-form__heading--m\"><label class=\"tna-form__label\" for=\"date\">Enter a start date</label></h4><p id=\"date-hint\" class=\"tna-form__hint\">The earliest date of the record.</p></div><input type=\"date\" id=\"date\" class=\"tna-date-search \" name=\"date\" value=\"\" aria-describedby=\"date-hint \"></div>"
     },
     {
       "name": "date search with an error",
@@ -48,7 +48,7 @@
           "text": "Date is not valid"
         }
       },
-      "html": "<div class=\"tna-form__group tna-form__group--error \"><div class=\"tna-form__group-contents\"><h4 class=\"tna-form__heading tna-form__heading--m\"><label class=\"tna-form__label\" for=\"date\">Enter a start date</label></h4><p id=\"date-error\" class=\"tna-form__error-message\"><span class=\"tna-!--visually-hidden\">Error:</span> Date is not valid</p></div><input type=\"date\" id=\"date\" class=\"tna-date-search \" name=\"date\" value=\"\" aria-describedby=\" tna-form__date-error\"></div>"
+      "html": "<div class=\"tna-form__group tna-form__group--error \"><div class=\"tna-form__group-contents\"><h4 class=\"tna-form__heading tna-form__heading--m\"><label class=\"tna-form__label\" for=\"date\">Enter a start date</label></h4><p id=\"date-error\" class=\"tna-form__error-message\"><span class=\"tna-!--visually-hidden\">Error:</span> Date is not valid</p></div><input type=\"date\" id=\"date\" class=\"tna-date-search \" name=\"date\" value=\"\" aria-describedby=\" date-error\"></div>"
     },
     {
       "name": "inline date search",
diff --git a/src/nationalarchives/components/date-search/template.njk b/src/nationalarchives/components/date-search/template.njk
index 5249ba47..f2e8064e 100644
--- a/src/nationalarchives/components/date-search/template.njk
+++ b/src/nationalarchives/components/date-search/template.njk
@@ -1,5 +1,6 @@
+{% from "nationalarchives/components/date-search/date-search.njk" import tnaDateSearchElement %}
+
 {%- set containerClasses = [params.formGroupClasses] if params.formGroupClasses else [] -%}
-{%- set inputClasses = [params.classes] if params.classes else [] -%}
 {%- if params.inline -%}
   {%- set containerClasses = containerClasses.concat('tna-form__group--inline') -%}
 {%- endif -%}
@@ -21,7 +22,5 @@
     </p>
     {%- endif %}
   </div>
-  <input type="date" id="{{ params.id }}" class="tna-date-search{% if params.maxWidth %} tna-date-search--max-width{% endif %} {{ inputClasses | join(' ') }}" name="{{ params.name }}" value="{{ params.value }}"
-  {%- if params.hint or params.error %} aria-describedby="{%- if params.hint -%}tna-form__{{ params.id }}-hint{%- endif %} {% if params.error -%}tna-form__{{ params.id }}-error{%- endif -%}"{%- endif %}
-  {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+  {{ tnaDateSearchElement(params) }}
 </div>
diff --git a/src/nationalarchives/components/filters/_index.scss b/src/nationalarchives/components/filters/_index.scss
deleted file mode 100644
index c943be4c..00000000
--- a/src/nationalarchives/components/filters/_index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@use "filters";
diff --git a/src/nationalarchives/components/filters/fixtures.json b/src/nationalarchives/components/filters/fixtures.json
deleted file mode 100644
index e79aae47..00000000
--- a/src/nationalarchives/components/filters/fixtures.json
+++ /dev/null
@@ -1,50 +0,0 @@
-{
-  "component": "filters",
-  "fixtures": [
-    {
-      "name": "plain filters",
-      "options": {
-        "items": [
-          {
-            "label": "All",
-            "href": "#?filter=all",
-            "selected": true
-          },
-          {
-            "label": "Medieval (974—1485)",
-            "href": "#?filter=alpha"
-          },
-          {
-            "label": "Early Modern (1485—1714)",
-            "href": "#?filter=beta"
-          },
-          {
-            "label": "Georgians (1714—1837)",
-            "href": "#?filter=gamma"
-          },
-          {
-            "label": "Victorians (1837—1901)",
-            "href": "#?filter=delta"
-          },
-          {
-            "label": "Early 20th century (1901—1918)",
-            "href": "#?filter=epsilon"
-          },
-          {
-            "label": "Interwar (1918—1939)",
-            "href": "#?filter=zeta"
-          },
-          {
-            "label": "Second World War (1939—1945)",
-            "href": "#?filter=eta"
-          },
-          {
-            "label": "Postwar (1945—2000)",
-            "href": "#?filter=theta"
-          }
-        ]
-      },
-      "html": "<ul class=\"tna-filters tna-ul tna-ul--plain \"><li class=\"tna-filters__item tna-filters__item--selected\"><a href=\"#?filter=all\" class=\"tna-filters__link\">All</a></li><li class=\"tna-filters__item\"><a href=\"#?filter=alpha\" class=\"tna-filters__link\">Medieval (974—1485)</a></li><li class=\"tna-filters__item\"><a href=\"#?filter=beta\" class=\"tna-filters__link\">Early Modern (1485—1714)</a></li><li class=\"tna-filters__item\"><a href=\"#?filter=gamma\" class=\"tna-filters__link\">Georgians (1714—1837)</a></li><li class=\"tna-filters__item\"><a href=\"#?filter=delta\" class=\"tna-filters__link\">Victorians (1837—1901)</a></li><li class=\"tna-filters__item\"><a href=\"#?filter=epsilon\" class=\"tna-filters__link\">Early 20th century (1901—1918)</a></li><li class=\"tna-filters__item\"><a href=\"#?filter=zeta\" class=\"tna-filters__link\">Interwar (1918—1939)</a></li><li class=\"tna-filters__item\"><a href=\"#?filter=eta\" class=\"tna-filters__link\">Second World War (1939—1945)</a></li><li class=\"tna-filters__item\"><a href=\"#?filter=theta\" class=\"tna-filters__link\">Postwar (1945—2000)</a></li></ul>"
-    }
-  ]
-}
diff --git a/src/nationalarchives/components/filters/macro.njk b/src/nationalarchives/components/filters/macro.njk
deleted file mode 100644
index a012ae12..00000000
--- a/src/nationalarchives/components/filters/macro.njk
+++ /dev/null
@@ -1,3 +0,0 @@
-{% macro tnaFilters(params) %}
-  {%- include "nationalarchives/components/filters/template.njk" -%}
-{% endmacro %}
\ No newline at end of file
diff --git a/src/nationalarchives/components/filters/template.njk b/src/nationalarchives/components/filters/template.njk
deleted file mode 100644
index aea66b98..00000000
--- a/src/nationalarchives/components/filters/template.njk
+++ /dev/null
@@ -1,8 +0,0 @@
-{%- set containerClasses = [params.classes] if params.classes else [] -%}
-<ul class="tna-filters{% if params.stack %} tna-filters--stacked{% endif %} tna-ul tna-ul--plain {{ containerClasses | join(' ') }}"{% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
-  {%- for item in params.items -%}
-  <li class="tna-filters__item{%- if item.selected %} tna-filters__item--selected{% endif %}">
-    <a href="{{ item.href }}" {%- if item.title %} title="{{ item.title }}"{% endif %} class="tna-filters__link">{{ item.label }}</a>
-  </li>
-  {%- endfor -%}
-</ul>
diff --git a/src/nationalarchives/components/quick-filters/_index.scss b/src/nationalarchives/components/quick-filters/_index.scss
new file mode 100644
index 00000000..87e91238
--- /dev/null
+++ b/src/nationalarchives/components/quick-filters/_index.scss
@@ -0,0 +1 @@
+@use "quick-filters";
diff --git a/src/nationalarchives/components/quick-filters/fixtures.json b/src/nationalarchives/components/quick-filters/fixtures.json
new file mode 100644
index 00000000..7839d0c5
--- /dev/null
+++ b/src/nationalarchives/components/quick-filters/fixtures.json
@@ -0,0 +1,51 @@
+{
+  "component": "quick-filters",
+  "fixtures": [
+    {
+      "name": "plain quick filters",
+      "options": {
+        "items": [
+          {
+            "label": "All",
+            "href": "#?filter=all",
+            "selected": true
+          },
+          {
+            "label": "Medieval (974—1485)",
+            "href": "#?filter=alpha"
+          },
+          {
+            "label": "Early Modern (1485—1714)",
+            "href": "#?filter=beta"
+          },
+          {
+            "label": "Georgians (1714—1837)",
+            "href": "#?filter=gamma"
+          },
+          {
+            "label": "Victorians (1837—1901)",
+            "href": "#?filter=delta"
+          },
+          {
+            "label": "Early 20th century (1901—1918)",
+            "href": "#?filter=epsilon"
+          },
+          {
+            "label": "Interwar (1918—1939)",
+            "href": "#?filter=zeta"
+          },
+          {
+            "label": "Second World War (1939—1945)",
+            "href": "#?filter=eta"
+          },
+          {
+            "label": "Postwar (1945—2000)",
+            "href": "#?filter=theta"
+          }
+        ]
+      },
+      "html": "<ul class=\"tna-quick-filters \"><li class=\"tna-quick-filters__item tna-quick-filters__item--selected\"><a href=\"#?filter=all\" class=\"tna-quick-filters__link\">All</a></li><li class=\"tna-quick-filters__item\"><a href=\"#?filter=alpha\" class=\"tna-quick-filters__link\">Medieval (974—1485)</a></li><li class=\"tna-quick-filters__item\"><a href=\"#?filter=beta\" class=\"tna-quick-filters__link\">Early Modern (1485—1714)</a></li><li class=\"tna-quick-filters__item\"><a href=\"#?filter=gamma\" class=\"tna-quick-filters__link\">Georgians (1714—1837)</a></li><li class=\"tna-quick-filters__item\"><a href=\"#?filter=delta\" class=\"tna-quick-filters__link\">Victorians (1837—1901)</a></li><li class=\"tna-quick-filters__item\"><a href=\"#?filter=epsilon\" class=\"tna-quick-filters__link\">Early 20th century (1901—1918)</a></li><li class=\"tna-quick-filters__item\"><a href=\"#?filter=zeta\" class=\"tna-quick-filters__link\">Interwar (1918—1939)</a></li><li class=\"tna-quick-filters__item\"><a href=\"#?filter=eta\" class=\"tna-quick-filters__link\">Second World War (1939—1945)</a></li><li class=\"tna-quick-filters__item\"><a href=\"#?filter=theta\" class=\"tna-quick-filters__link\">Postwar (1945—2000)</a></li></ul>",
+      "hidden": false
+    }
+  ]
+}
diff --git a/src/nationalarchives/components/filters/macro-options.json b/src/nationalarchives/components/quick-filters/macro-options.json
similarity index 91%
rename from src/nationalarchives/components/filters/macro-options.json
rename to src/nationalarchives/components/quick-filters/macro-options.json
index f247596c..56751303 100644
--- a/src/nationalarchives/components/filters/macro-options.json
+++ b/src/nationalarchives/components/quick-filters/macro-options.json
@@ -41,12 +41,12 @@
     "name": "classes",
     "type": "string",
     "required": false,
-    "description": "Classes to add to the filters."
+    "description": "Classes to add to the quick filters."
   },
   {
     "name": "attributes",
     "type": "object",
     "required": false,
-    "description": "HTML attributes (for example data attributes) to add to the filters."
+    "description": "HTML attributes (for example data attributes) to add to the quick filters."
   }
 ]
diff --git a/src/nationalarchives/components/quick-filters/macro.njk b/src/nationalarchives/components/quick-filters/macro.njk
new file mode 100644
index 00000000..6d67397d
--- /dev/null
+++ b/src/nationalarchives/components/quick-filters/macro.njk
@@ -0,0 +1,3 @@
+{% macro tnaQuickFilters(params) %}
+  {%- include "nationalarchives/components/quick-filters/template.njk" -%}
+{% endmacro %}
\ No newline at end of file
diff --git a/src/nationalarchives/components/filters/filters.scss b/src/nationalarchives/components/quick-filters/quick-filters.scss
similarity index 70%
rename from src/nationalarchives/components/filters/filters.scss
rename to src/nationalarchives/components/quick-filters/quick-filters.scss
index 8c4f981d..34aef49d 100644
--- a/src/nationalarchives/components/filters/filters.scss
+++ b/src/nationalarchives/components/quick-filters/quick-filters.scss
@@ -1,13 +1,19 @@
 @use "../../tools/colour";
 @use "../../tools/spacing";
 
-.tna-filters {
+.tna-quick-filters {
   @include spacing.space-above;
 
   display: flex;
   flex-wrap: wrap;
   gap: 0.75rem 1rem;
 
+  list-style: none;
+
+  &--stacked {
+    flex-direction: column;
+  }
+
   &__item {
   }
 
@@ -15,20 +21,16 @@
     padding: 0.125rem 0.75rem;
 
     text-decoration: none;
+    line-height: 1.75;
 
-    @include colour.tint;
+    @include colour.colour-border("keyline", 1px);
+    border-radius: 1rem;
 
     &,
     &:link,
     &:visited {
       @include colour.colour-font("font-base");
     }
-
-    border-radius: 99rem;
-
-    &:hover {
-      @include colour.accent-light;
-    }
   }
 
   &__item--selected &__link {
diff --git a/src/nationalarchives/components/filters/filters.stories.js b/src/nationalarchives/components/quick-filters/quick-filters.stories.js
similarity index 95%
rename from src/nationalarchives/components/filters/filters.stories.js
rename to src/nationalarchives/components/quick-filters/quick-filters.stories.js
index 6093c154..40dcb9af 100644
--- a/src/nationalarchives/components/filters/filters.stories.js
+++ b/src/nationalarchives/components/quick-filters/quick-filters.stories.js
@@ -15,7 +15,7 @@ Object.keys(argTypes).forEach((argType) => {
 });
 
 export default {
-  title: "Components/Filters",
+  title: "Components/Quick filters",
   argTypes,
 };
 
@@ -70,5 +70,5 @@ Standard.args = {
       href: "#?filter=theta",
     },
   ],
-  classes: "tna-filters--demo",
+  classes: "tna-quick-filters--demo",
 };
diff --git a/src/nationalarchives/components/quick-filters/template.njk b/src/nationalarchives/components/quick-filters/template.njk
new file mode 100644
index 00000000..21aa5085
--- /dev/null
+++ b/src/nationalarchives/components/quick-filters/template.njk
@@ -0,0 +1,8 @@
+{%- set containerClasses = [params.classes] if params.classes else [] -%}
+<ul class="tna-quick-filters{% if params.stack %} tna-quick-filters--stacked{% endif %} {{ containerClasses | join(' ') }}"{% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+  {%- for item in params.items -%}
+  <li class="tna-quick-filters__item{%- if item.selected %} tna-quick-filters__item--selected{% endif %}">
+    <a href="{{ item.href }}" {%- if item.title %} title="{{ item.title }}"{% endif %} class="tna-quick-filters__link">{{ item.label }}</a>
+  </li>
+  {%- endfor -%}
+</ul>
diff --git a/src/nationalarchives/components/radios/fixtures.json b/src/nationalarchives/components/radios/fixtures.json
index 2d817392..0d2e7da7 100644
--- a/src/nationalarchives/components/radios/fixtures.json
+++ b/src/nationalarchives/components/radios/fixtures.json
@@ -130,7 +130,7 @@
           }
         ]
       },
-      "html": "<div class=\"tna-form__group \"><fieldset class=\"tna-form__fieldset\" aria-describedby=\"tna-form__type-hint \"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Type</h4></legend><p id=\"type-hint\" class=\"tna-form__hint\">You can only select one.</p><div class=\"tna-radios\"><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-audio\" value=\"audio\" name=\"type\"><label for=\"type-audio\" class=\"tna-radios__item-label\">Audio</label></div><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-image\" value=\"image\" name=\"type\"><label for=\"type-image\" class=\"tna-radios__item-label\">Image</label></div><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-video\" value=\"video\" name=\"type\"><label for=\"type-video\" class=\"tna-radios__item-label\">Video</label></div></div></fieldset></div>"
+      "html": "<div class=\"tna-form__group \"><fieldset class=\"tna-form__fieldset\" aria-describedby=\"type-hint \"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Type</h4></legend><p id=\"type-hint\" class=\"tna-form__hint\">You can only select one.</p><div class=\"tna-radios\"><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-audio\" value=\"audio\" name=\"type\"><label for=\"type-audio\" class=\"tna-radios__item-label\">Audio</label></div><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-image\" value=\"image\" name=\"type\"><label for=\"type-image\" class=\"tna-radios__item-label\">Image</label></div><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-video\" value=\"video\" name=\"type\"><label for=\"type-video\" class=\"tna-radios__item-label\">Video</label></div></div></fieldset></div>"
     },
     {
       "name": "radios with an error",
@@ -158,7 +158,7 @@
           }
         ]
       },
-      "html": "<div class=\"tna-form__group tna-form__group--error \"><fieldset class=\"tna-form__fieldset\" aria-describedby=\" tna-form__type-error\"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Type</h4></legend><p id=\"type-error\" class=\"tna-form__error-message\"><span class=\"tna-!--visually-hidden\">Error:</span> You must select a type</p><div class=\"tna-radios\"><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-audio\" value=\"audio\" name=\"type\"><label for=\"type-audio\" class=\"tna-radios__item-label\">Audio</label></div><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-image\" value=\"image\" name=\"type\"><label for=\"type-image\" class=\"tna-radios__item-label\">Image</label></div><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-video\" value=\"video\" name=\"type\"><label for=\"type-video\" class=\"tna-radios__item-label\">Video</label></div></div></fieldset></div>"
+      "html": "<div class=\"tna-form__group tna-form__group--error \"><fieldset class=\"tna-form__fieldset\" aria-describedby=\" type-error\"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Type</h4></legend><p id=\"type-error\" class=\"tna-form__error-message\"><span class=\"tna-!--visually-hidden\">Error:</span> You must select a type</p><div class=\"tna-radios\"><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-audio\" value=\"audio\" name=\"type\"><label for=\"type-audio\" class=\"tna-radios__item-label\">Audio</label></div><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-image\" value=\"image\" name=\"type\"><label for=\"type-image\" class=\"tna-radios__item-label\">Image</label></div><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-video\" value=\"video\" name=\"type\"><label for=\"type-video\" class=\"tna-radios__item-label\">Video</label></div></div></fieldset></div>"
     },
     {
       "name": "inline radios",
diff --git a/src/nationalarchives/components/radios/radios.njk b/src/nationalarchives/components/radios/radios.njk
new file mode 100644
index 00000000..0ea8f434
--- /dev/null
+++ b/src/nationalarchives/components/radios/radios.njk
@@ -0,0 +1,12 @@
+{% macro tnaRadiosElement(params, extraAttributes) %}
+  <div class="tna-radios{% if params.small or params.inline %} tna-radios--small{% endif %}{% if params.inline %} tna-radios--inline{% endif %}">
+    {%- for item in params.items %}
+    <div class="tna-radios__item">
+      <input type="radio" id="{{ params.id }}-{{ item.value }}" value="{{ item.value }}" name="{{ params.name }}"{% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}{% for attribute, value in extraAttributes %} {{ attribute }}="{{ value }}"{% endfor %}{% if params.selected and item.value === params.selected %} checked{% endif %}>
+      <label for="{{ params.id }}-{{ item.value }}" class="tna-radios__item-label">
+        {{ item.text }}
+      </label>
+    </div>
+    {%- endfor %}
+  </div>
+{% endmacro %}
diff --git a/src/nationalarchives/components/radios/template.njk b/src/nationalarchives/components/radios/template.njk
index 124b52f5..699748c8 100644
--- a/src/nationalarchives/components/radios/template.njk
+++ b/src/nationalarchives/components/radios/template.njk
@@ -1,9 +1,11 @@
+{% from "nationalarchives/components/radios/radios.njk" import tnaRadiosElement %}
+
 {%- set containerClasses = [params.classes] if params.classes else [] -%}
 {%- if params.inline -%}
   {%- set containerClasses = containerClasses.concat('tna-form__group--inline') -%}
 {%- endif -%}
 <div class="tna-form__group{% if params.error %} tna-form__group--error{% endif %} {{ containerClasses | join(' ') }}"{% for attribute, value in params.formGroupAttributes %} {{ attribute }}="{{ value }}"{% endfor %}>
-  <fieldset class="tna-form__fieldset"{%- if params.hint or params.error %} aria-describedby="{%- if params.hint -%}tna-form__{{ params.id }}-hint{%- endif %} {% if params.error -%}tna-form__{{ params.id }}-error{%- endif -%}"{%- endif %}>
+  <fieldset class="tna-form__fieldset"{%- if params.hint or params.error %} aria-describedby="{%- if params.hint -%}{{ params.id }}-hint{%- endif %} {% if params.error -%}{{ params.id }}-error{%- endif -%}"{%- endif %}>
     <legend class="tna-form__legend">
       <h{{ params.headingLevel }} class="tna-form__heading tna-form__heading--{{ params.headingSize or 'm' }}">
         {{ params.label }}
@@ -19,15 +21,6 @@
       <span class="tna-!--visually-hidden">Error:</span> {{ params.error.text }}
     </p>
     {%- endif %}
-    <div class="tna-radios{% if params.small or params.inline %} tna-radios--small{% endif %}{% if params.inline %} tna-radios--inline{% endif %}">
-      {%- for item in params.items %}
-      <div class="tna-radios__item">
-        <input type="radio" id="{{ params.id }}-{{ item.value }}" value="{{ item.value }}" name="{{ params.name }}"{% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}{% if params.selected and item.value === params.selected %} checked{% endif %}>
-        <label for="{{ params.id }}-{{ item.value }}" class="tna-radios__item-label">
-          {{ item.text }}
-        </label>
-      </div>
-      {%- endfor %}
-    </div>
+    {{ tnaRadiosElement(params) }}
   </fieldset>
 </div>
diff --git a/src/nationalarchives/components/search-field/fixtures.json b/src/nationalarchives/components/search-field/fixtures.json
index d37d56c1..f1219879 100644
--- a/src/nationalarchives/components/search-field/fixtures.json
+++ b/src/nationalarchives/components/search-field/fixtures.json
@@ -34,7 +34,7 @@
         "name": "q",
         "hint": "Try searching for something interesting"
       },
-      "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=\"search1\">Catalogue search results</label></h1><p id=\"search1-hint\" class=\"tna-form__hint\">Try searching for something interesting</p></div><div class=\"tna-search-field__fields\"><input type=\"search\" id=\"search1\" class=\"tna-search-field__input \" name=\"q\" value=\"\" spellcheck=\"false\" aria-describedby=\"tna-form__search1-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>"
+      "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=\"search1\">Catalogue search results</label></h1><p id=\"search1-hint\" class=\"tna-form__hint\">Try searching for something interesting</p></div><div class=\"tna-search-field__fields\"><input type=\"search\" id=\"search1\" class=\"tna-search-field__input \" name=\"q\" value=\"\" spellcheck=\"false\" aria-describedby=\"search1-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>"
     }
   ]
 }
diff --git a/src/nationalarchives/components/search-field/search-field.scss b/src/nationalarchives/components/search-field/search-field.scss
index 66f4d3cf..7f0c9c1f 100644
--- a/src/nationalarchives/components/search-field/search-field.scss
+++ b/src/nationalarchives/components/search-field/search-field.scss
@@ -28,7 +28,7 @@
     border-width: forms.$form-field-border-width 0
       forms.$form-field-border-width forms.$form-field-border-width;
     border-style: solid;
-    border-radius: 0;
+    border-radius: 0.1px;
 
     .tna-template--dark-theme &,
     .tna-background-contrast &/*,
diff --git a/src/nationalarchives/components/search-field/template.njk b/src/nationalarchives/components/search-field/template.njk
index a887455d..7fbe4c6b 100644
--- a/src/nationalarchives/components/search-field/template.njk
+++ b/src/nationalarchives/components/search-field/template.njk
@@ -16,7 +16,7 @@
     </div>
     <div class="tna-search-field__fields">
       <input type="search" id="{{ params.id }}" class="tna-search-field__input {{ inputClasses | join(' ') }}" name="{{ params.name }}" value="{{ params.value }}" spellcheck="{{ params.spellcheck if params.spellcheck else false }}"
-      {%- if params.hint %} aria-describedby="tna-form__{{ params.id }}-hint"{% endif %}
+      {%- if params.hint %} aria-describedby="{{ params.id }}-hint"{% endif %}
       {%- if params.maxLength %} maxlength="{{ params.maxLength }}"{% endif %}
       {%- if params.autofill %} autofill="{{ params.autofill }}"{% endif %}
       {%- if params.inputmode %} inputmode="{{ params.inputmode }}"{% endif %}
diff --git a/src/nationalarchives/components/search-filters/_index.scss b/src/nationalarchives/components/search-filters/_index.scss
new file mode 100644
index 00000000..1df85ade
--- /dev/null
+++ b/src/nationalarchives/components/search-filters/_index.scss
@@ -0,0 +1 @@
+@use "search-filters";
diff --git a/src/nationalarchives/components/search-filters/fixtures.json b/src/nationalarchives/components/search-filters/fixtures.json
new file mode 100644
index 00000000..c6415a7a
--- /dev/null
+++ b/src/nationalarchives/components/search-filters/fixtures.json
@@ -0,0 +1,16 @@
+{
+  "component": "search-filters",
+  "fixtures": [
+    {
+      "name": "plain search filters",
+      "options": {
+        "title": "Filters",
+        "rootHeadingLevel": 2,
+        "formId": "test-form",
+        "items": []
+      },
+      "html": "<div class=\"tna-search-filters \" data-module=\"tna-search-filters\"><h2 class=\"tna-heading-m tna-search-filters__title\">Filters</h2><div class=\"tna-search-filters__footer\"><div class=\"tna-button-group tna-button-group--small\"><button class=\"tna-button tna-search-filters__update\" type=\"submit\" form=\"test-form\">Update</button><a href=\"#\" class=\"tna-button tna-button--plain\">Clear all filters</a></div></div></div>",
+      "hidden": false
+    }
+  ]
+}
diff --git a/src/nationalarchives/components/search-filters/macro-options.json b/src/nationalarchives/components/search-filters/macro-options.json
new file mode 100644
index 00000000..09851745
--- /dev/null
+++ b/src/nationalarchives/components/search-filters/macro-options.json
@@ -0,0 +1,39 @@
+[
+  {
+    "name": "title",
+    "type": "string",
+    "required": true,
+    "description": ""
+  },
+  {
+    "name": "rootHeadingLevel",
+    "type": "string",
+    "required": true,
+    "description": ""
+  },
+  {
+    "name": "formId",
+    "type": "string",
+    "required": true,
+    "description": ""
+  },
+  {
+    "name": "items",
+    "type": "array",
+    "required": true,
+    "description": "TODO",
+    "params": []
+  },
+  {
+    "name": "classes",
+    "type": "string",
+    "required": false,
+    "description": "Classes to add to the search filters."
+  },
+  {
+    "name": "attributes",
+    "type": "object",
+    "required": false,
+    "description": "HTML attributes (for example data attributes) to add to the search filters."
+  }
+]
diff --git a/src/nationalarchives/components/search-filters/macro.njk b/src/nationalarchives/components/search-filters/macro.njk
new file mode 100644
index 00000000..665feff5
--- /dev/null
+++ b/src/nationalarchives/components/search-filters/macro.njk
@@ -0,0 +1,3 @@
+{% macro tnaSearchFilters(params) %}
+  {%- include "nationalarchives/components/search-filters/template.njk" -%}
+{% endmacro %}
\ No newline at end of file
diff --git a/src/nationalarchives/components/search-filters/search-filters.mjs b/src/nationalarchives/components/search-filters/search-filters.mjs
new file mode 100644
index 00000000..a4012ff7
--- /dev/null
+++ b/src/nationalarchives/components/search-filters/search-filters.mjs
@@ -0,0 +1,67 @@
+export class SearchFilters {
+  constructor($module) {
+    this.$module = $module;
+
+    if (!this.$module) {
+      return;
+    }
+
+    this.$module.classList.add("tna-search-filters--js-enabled");
+
+    Array.from(
+      this.$module.querySelectorAll(".tna-search-filters__fieldset"),
+    ).forEach(($fieldset) => {
+      // const type = $fieldset.dataset.type;
+      const $toggle = $fieldset.querySelector(
+        ".tna-search-filters__item-toggle",
+      );
+      const $headingInner = $fieldset.querySelector(
+        ".tna-search-filters__heading-inner",
+      );
+      const $item = $fieldset.querySelector(".tna-search-filters__item");
+
+      if (!$toggle || !$headingInner || !$item) {
+        return;
+      }
+
+      $toggle.removeAttribute("hidden");
+      $headingInner.remove();
+
+      this.syncItem($toggle, $item);
+
+      $toggle.addEventListener("click", () => {
+        this.toggleItem($toggle, $item);
+      });
+
+      // if (type === "multiple") {
+      //   const $count = $toggle.querySelector(
+      //     ".tna-search-filters__item-toggle-info",
+      //   );
+      //   if ($count) {
+      //     $item.addEventListener("change", () => {
+      //       const selected = Array.from(
+      //         $item.querySelectorAll('input[type="checkbox"]:checked'),
+      //       ).length;
+      //       $count.innerText = selected ? `(${selected} selected)` : "";
+      //     });
+      //   }
+      // }
+    });
+  }
+
+  toggleItem($toggle, $item) {
+    $toggle.setAttribute(
+      "aria-expanded",
+      $toggle.getAttribute("aria-expanded") == "false",
+    );
+    this.syncItem($toggle, $item);
+  }
+
+  syncItem($toggle, $item) {
+    if ($toggle.getAttribute("aria-expanded") == "true") {
+      $item.removeAttribute("hidden");
+    } else {
+      $item.setAttribute("hidden", true);
+    }
+  }
+}
diff --git a/src/nationalarchives/components/search-filters/search-filters.scss b/src/nationalarchives/components/search-filters/search-filters.scss
new file mode 100644
index 00000000..58f496d6
--- /dev/null
+++ b/src/nationalarchives/components/search-filters/search-filters.scss
@@ -0,0 +1,163 @@
+@use "sass:math";
+
+@use "../../tools/colour";
+@use "../../tools/media";
+@use "../../tools/spacing";
+@use "../../tools/typography";
+
+.tna-search-filters {
+  @include spacing.space-above;
+
+  &__title {
+  }
+
+  &__update {
+    display: block;
+  }
+
+  .tna-heading-s {
+    margin: 0;
+    padding: 0;
+  }
+
+  &__fieldset {
+    border: none;
+  }
+
+  &__legend {
+    width: 100%;
+  }
+
+  &__heading-inner,
+  &__item-toggle {
+    padding: 0.5rem 0.75rem;
+
+    @include colour.colour-border("keyline", 1px, solid);
+    border-bottom-width: 0;
+  }
+
+  &__heading-inner {
+    margin-top: 1rem;
+    padding: 0.5rem 0.75rem;
+  }
+
+  &__item-toggle {
+    width: 100%;
+    margin: 0;
+    padding-right: 2.5rem;
+
+    display: block;
+
+    position: relative;
+
+    color: inherit;
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: inherit;
+    line-height: inherit;
+    text-align: inherit;
+
+    background: none;
+
+    cursor: pointer;
+
+    &::before {
+      width: 0;
+      height: 0;
+
+      position: absolute;
+      right: 0.5rem;
+      top: calc(50% - #{math.div(math.sqrt(3), 4)}rem);
+
+      @include colour.colour-border(
+        "font-base",
+        #{math.div(math.sqrt(3), 2)}rem
+      );
+      border-right: 0.5rem transparent solid;
+      border-bottom-width: 0;
+      border-left: 0.5rem transparent solid;
+
+      content: "";
+    }
+
+    &:hover,
+    &:active {
+      @include typography.interacted-text-decoration;
+
+      background: none;
+    }
+
+    &[aria-expanded="true"] {
+      &::before {
+        border-top-width: 0;
+        border-bottom-width: #{math.div(math.sqrt(3), 2)}rem;
+      }
+    }
+  }
+
+  &__item-toggle-label {
+  }
+
+  &__item-toggle-info {
+    display: block;
+
+    @include typography.main-font-weight;
+    @include typography.relative-font-size(14);
+  }
+
+  &__item {
+    padding: 0.75rem;
+
+    @include colour.colour-background("background-tint");
+
+    @include colour.colour-border("keyline", 1px);
+    border-width: 0 1px 1px;
+  }
+
+  &__hint {
+    margin-bottom: 0.5rem;
+
+    @include typography.relative-font-size(16);
+    @include colour.colour-font("font-light");
+  }
+
+  &__inline-fields {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem 2rem;
+  }
+
+  &__label {
+    display: block;
+  }
+
+  &__footer {
+    padding: 0.75rem;
+
+    display: none;
+
+    @include colour.colour-border("keyline", 1px);
+  }
+
+  &--js-enabled &__title {
+    margin-bottom: 1rem;
+  }
+
+  &--js-enabled &__footer {
+    display: block;
+  }
+
+  &--js-enabled &__item {
+    border-bottom: none;
+  }
+
+  &--js-enabled &__update-item {
+    display: none;
+  }
+
+  &__fieldset[data-type="multiple"] &__item {
+    max-height: 15rem;
+
+    overflow: auto;
+  }
+}
diff --git a/src/nationalarchives/components/search-filters/search-filters.stories.js b/src/nationalarchives/components/search-filters/search-filters.stories.js
new file mode 100644
index 00000000..3b0b3061
--- /dev/null
+++ b/src/nationalarchives/components/search-filters/search-filters.stories.js
@@ -0,0 +1,207 @@
+import Filters from "./template.njk";
+import macroOptions from "./macro-options.json";
+
+const argTypes = {
+  title: { control: "text" },
+  rootHeadingLevel: { control: { type: "number", min: 1, max: 6 } },
+  formId: { control: "text" },
+  items: { control: "object" },
+  classes: { control: "text" },
+  attributes: { control: "object" },
+};
+
+Object.keys(argTypes).forEach((argType) => {
+  argTypes[argType].description = macroOptions.find(
+    (option) => option.name === argType,
+  )?.description;
+});
+
+export default {
+  title: "Components/Search filters",
+  argTypes,
+};
+
+const Template = ({
+  title,
+  rootHeadingLevel,
+  formId,
+  items,
+  classes,
+  attributes,
+}) =>
+  Filters({
+    params: {
+      title,
+      rootHeadingLevel,
+      formId,
+      items,
+      classes,
+      attributes,
+    },
+  });
+
+export const Standard = Template.bind({});
+Standard.args = {
+  title: "Filters",
+  rootHeadingLevel: 2,
+  formId: "test-form",
+  items: [
+    {
+      type: "text",
+      label: "Refine",
+      id: "refine1",
+      name: "refine1",
+      // open: true,
+      hint: "Search within the current results",
+    },
+    // {
+    //   type: "single",
+    //   label: "Type",
+    //   id: "type1",
+    //   name: "type1",
+    //   small: true,
+    //   // open: true,
+    //   hint: "You can only select one.",
+    //   items: [
+    //     {
+    //       text: "Audio",
+    //       value: "audio",
+    //     },
+    //     {
+    //       text: "Image",
+    //       value: "image",
+    //     },
+    //     {
+    //       text: "Video",
+    //       value: "video",
+    //     },
+    //   ],
+    // },
+    {
+      type: "multiple",
+      label: "Category",
+      id: "categories1",
+      name: "categories1",
+      small: true,
+      // open: true,
+      hint: "The category of the record",
+      // count: 2,
+      seeMoreText: "See all 29 categories",
+      seeMoreUrl: "#",
+      items: [
+        {
+          text: "Alpha",
+          value: "alpha",
+        },
+        {
+          text: "Beta",
+          value: "beta",
+          // checked: true,
+        },
+        {
+          text: "Gamma",
+          value: "gamma",
+        },
+      ],
+    },
+    {
+      type: "date",
+      label: "Opening date",
+      id: "date1",
+      name: "date1",
+      hint: "The earliest opening date of the record",
+    },
+    {
+      type: "daterange",
+      label: "Covering date",
+      id: "dates",
+      hint: "The earliest and/or latest covering date of the record",
+      // open: true,
+      from: {
+        label: "From",
+        id: "date2",
+        name: "date2",
+      },
+      to: {
+        label: "To",
+        id: "date3",
+        name: "date3",
+      },
+    },
+  ],
+  classes: "tna-search-filters--demo",
+};
+
+export const OpenedAndPrepopulated = Template.bind({});
+OpenedAndPrepopulated.args = {
+  title: "Filters",
+  rootHeadingLevel: 2,
+  formId: "test-form",
+  items: [
+    {
+      type: "text",
+      label: "Refine",
+      id: "refine1",
+      name: "refine1",
+      open: true,
+      hint: "Search within the current results",
+      value: "iceberg",
+    },
+    {
+      type: "multiple",
+      label: "Category",
+      id: "categories1",
+      name: "categories1",
+      small: true,
+      open: true,
+      hint: "The category of the record",
+      seeMoreText: "See all 29 categories",
+      seeMoreUrl: "#",
+      items: [
+        {
+          text: "Alpha",
+          value: "alpha",
+        },
+        {
+          text: "Beta",
+          value: "beta",
+          checked: true,
+        },
+        {
+          text: "Gamma",
+          value: "gamma",
+          checked: true,
+        },
+      ],
+    },
+    {
+      type: "date",
+      label: "Opening date",
+      id: "date1",
+      name: "date1",
+      hint: "The earliest opening date of the record",
+      open: true,
+      value: "1969-07-16",
+    },
+    {
+      type: "daterange",
+      label: "Covering date",
+      id: "dates",
+      hint: "The earliest and/or latest covering date of the record",
+      open: true,
+      from: {
+        label: "From",
+        id: "date2",
+        name: "date2",
+        value: "1912-04-14",
+      },
+      to: {
+        label: "To",
+        id: "date3",
+        name: "date3",
+        value: "1912-04-15",
+      },
+    },
+  ],
+  classes: "tna-search-filters--demo",
+};
diff --git a/src/nationalarchives/components/search-filters/template.njk b/src/nationalarchives/components/search-filters/template.njk
new file mode 100644
index 00000000..73196d64
--- /dev/null
+++ b/src/nationalarchives/components/search-filters/template.njk
@@ -0,0 +1,107 @@
+{% from "nationalarchives/components/button/macro.njk" import tnaButton %}
+{% from "nationalarchives/components/checkboxes/checkboxes.njk" import tnaCheckboxesElement %}
+{% from "nationalarchives/components/date-search/date-search.njk" import tnaDateSearchElement %}
+{% from "nationalarchives/components/radios/radios.njk" import tnaRadiosElement %}
+{% from "nationalarchives/components/text-input/text-input.njk" import tnaTextInputElement %}
+
+{%- set containerClasses = [params.classes] if params.classes else [] -%}
+<div class="tna-search-filters {{ containerClasses | join(' ') }}" data-module="tna-search-filters"{% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+  <h{{ params.rootHeadingLevel }} class="tna-heading-m tna-search-filters__title">
+    {{ params.title }}
+  </h{{ params.rootHeadingLevel }}>
+  {%- for filter in params.items %}
+  <fieldset class="tna-search-filters__fieldset" {%- if filter.hint and (filter.type == 'single' or filter.type == 'multiple' or filter.type == 'daterange') %} aria-describedby="{{ filter.id }}-hint"{% endif %} data-type="{{ filter.type }}">
+    <legend class="tna-search-filters__legend">
+      <h{{ params.rootHeadingLevel + 1 }} class="tna-heading-s">
+        <div class="tna-search-filters__heading-inner">
+          {% if filter.type == 'single' or filter.type == 'multiple' or filter.type == 'daterange' %}
+          {{ filter.label }}
+          {% else %}
+          <label for="{{ filter.id }}">
+            {{ filter.label }}
+          </label>
+          {% endif %}
+        </div>
+        <button class="tna-search-filters__item-toggle" aria-controls="{{ filter.id }}-wrapper" aria-expanded="{{ filter.open or false }}" hidden>
+          {% if filter.type == 'single' or filter.type == 'multiple' or filter.type == 'daterange' %}
+          <span class="tna-search-filters__item-toggle-label">
+            {{ filter.label }}
+          </span>
+          {% else %}
+          <label class="tna-search-filters__item-toggle-label" for="{{ filter.id }}">
+            {{ filter.label }}
+          </label>
+          {% endif %}
+          {% if filter.count %}
+          <span class="tna-search-filters__item-toggle-info">({{ filter.count }} selected)</span>
+          {% else %}
+          <span class="tna-search-filters__item-toggle-info"></span>
+          {% endif %}
+        </button>
+      </h{{ params.rootHeadingLevel + 1 }}>
+    </legend>
+    <div id="{{ filter.id }}-wrapper" class="tna-search-filters__item">
+      {%- if filter.hint %}
+      <p id="{{ filter.id }}-hint" class="tna-search-filters__hint">
+        {{ filter.hint }}
+      </p>
+      {%- endif %}
+      {% if filter.type == 'single' %}
+      {{ tnaRadiosElement(filter, { form: params.formId }) }}
+      {% elif filter.type == 'multiple' %}
+      {{ tnaCheckboxesElement(filter, { form: params.formId }) }}
+      <div class="tna-button-group tna-button-group--small tna-!--margin-top-xs">
+        {{ tnaButton({
+          text: filter.seeMoreText or 'See more',
+          href: filter.seeMoreUrl,
+          plain: true
+        }) }}
+      </div>
+      {% elif filter.type == 'text' %}
+      {{ tnaTextInputElement(filter, { form: params.formId }) }}
+      {% elif filter.type == 'date' %}
+      {{ tnaDateSearchElement(filter, { form: params.formId }) }}
+      {% elif filter.type == 'daterange' %}
+      <div class="tna-search-filters__inline-fields">
+        <label class="tna-search-filters__label">
+          {{ filter.from.label }}
+          {{ tnaDateSearchElement(filter.from, { form: params.formId }) }}
+        </label>
+        <label class="tna-search-filters__label">
+          {{ filter.to.label }}
+          {{ tnaDateSearchElement(filter.to, { form: params.formId }) }}
+        </label>
+      </div>
+      {% endif %}
+      <div class="tna-button-group tna-button-group--small tna-search-filters__update-item tna-!--margin-top-s">
+        {{ tnaButton({
+          text: 'Update',
+          buttonElement: true,
+          buttonType: 'submit',
+          attributes: {
+            form: params.formId
+          }
+        }) }}
+      </div>
+    </div>
+  </fieldset>
+  {%- endfor %}
+  <div class="tna-search-filters__footer">
+    <div class="tna-button-group tna-button-group--small">
+      {{ tnaButton({
+        text: 'Update',
+        buttonElement: true,
+        buttonType: 'submit',
+        classes: 'tna-search-filters__update',
+        attributes: {
+          form: params.formId
+        }
+      }) }}
+      {{ tnaButton({
+        text: 'Clear all filters',
+        href: '#',
+        plain: true
+      }) }}
+    </div>
+  </div>
+</div>
diff --git a/src/nationalarchives/components/select/fixtures.json b/src/nationalarchives/components/select/fixtures.json
index cc56f560..ac2aa377 100644
--- a/src/nationalarchives/components/select/fixtures.json
+++ b/src/nationalarchives/components/select/fixtures.json
@@ -76,7 +76,7 @@
           }
         ]
       },
-      "html": "<div class=\"tna-form__group \"><div class=\"tna-form__group-contents\"><h4 class=\"tna-form__heading tna-form__heading--m\"><label class=\"tna-form__label\" for=\"sort\">Sort by</label></h4><p id=\"sort-hint\" class=\"tna-form__hint\">Select a field to sort by.</p></div><select class=\"tna-select \" name=\"sort\" id=\"sort\" aria-describedby=\"tna-form__sort-hint\"><option value=\"relevance\">Relevance</option><option value=\"date\">Date</option><option value=\"title\">Title</option></select></div>"
+      "html": "<div class=\"tna-form__group \"><div class=\"tna-form__group-contents\"><h4 class=\"tna-form__heading tna-form__heading--m\"><label class=\"tna-form__label\" for=\"sort\">Sort by</label></h4><p id=\"sort-hint\" class=\"tna-form__hint\">Select a field to sort by.</p></div><select class=\"tna-select \" name=\"sort\" id=\"sort\" aria-describedby=\"sort-hint\"><option value=\"relevance\">Relevance</option><option value=\"date\">Date</option><option value=\"title\">Title</option></select></div>"
     },
     {
       "name": "select with an error",
diff --git a/src/nationalarchives/components/select/select.scss b/src/nationalarchives/components/select/select.scss
index 1e0a17da..d033f6a0 100644
--- a/src/nationalarchives/components/select/select.scss
+++ b/src/nationalarchives/components/select/select.scss
@@ -16,7 +16,7 @@
   @include colour.colour-background("input-background");
 
   @include colour.colour-border("input-border", forms.$form-field-border-width);
-  border-radius: 0;
+  border-radius: 0.1px;
 
   &--styled {
     padding: 0 2.5rem 0 0.75rem;
diff --git a/src/nationalarchives/components/select/template.njk b/src/nationalarchives/components/select/template.njk
index 952e3013..489f7ffd 100644
--- a/src/nationalarchives/components/select/template.njk
+++ b/src/nationalarchives/components/select/template.njk
@@ -21,7 +21,7 @@
     </p>
     {%- endif %}
   </div>
-  <select class="tna-select{% if params.size %} tna-select--{{ params.size }}{% endif %} {{ inputClasses | join(' ') }}" name="{{ params.name }}" id="{{ params.id }}"{% if params.hint %} aria-describedby="tna-form__{{ params.id }}-hint"{% endif %} {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+  <select class="tna-select{% if params.size %} tna-select--{{ params.size }}{% endif %} {{ inputClasses | join(' ') }}" name="{{ params.name }}" id="{{ params.id }}"{% if params.hint %} aria-describedby="{{ params.id }}-hint"{% endif %} {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
     {%- for item in params.items %}
     <option value="{{ item.value }}"{% if item.value === params.selected %} selected{% endif %}>{{ item.text }}</option>
     {%- endfor %}
diff --git a/src/nationalarchives/components/text-input/fixtures.json b/src/nationalarchives/components/text-input/fixtures.json
index 151eb9ba..2de93062 100644
--- a/src/nationalarchives/components/text-input/fixtures.json
+++ b/src/nationalarchives/components/text-input/fixtures.json
@@ -34,7 +34,7 @@
         "name": "name",
         "hint": "What people call you by."
       },
-      "html": "<div class=\"tna-form__group \"><div class=\"tna-form__group-contents\"><h4 class=\"tna-form__heading tna-form__heading--m\"><label class=\"tna-form__label\" for=\"name\">Enter your first name</label></h4><p id=\"name-hint\" class=\"tna-form__hint\">What people call you by.</p></div><input type=\"text\" id=\"name\" class=\"tna-text-input \" name=\"name\" value=\"\" spellcheck=\"false\" aria-describedby=\"tna-form__name-hint \"></div>"
+      "html": "<div class=\"tna-form__group \"><div class=\"tna-form__group-contents\"><h4 class=\"tna-form__heading tna-form__heading--m\"><label class=\"tna-form__label\" for=\"name\">Enter your first name</label></h4><p id=\"name-hint\" class=\"tna-form__hint\">What people call you by.</p></div><input type=\"text\" id=\"name\" class=\"tna-text-input \" name=\"name\" value=\"\" spellcheck=\"false\" aria-describedby=\"name-hint \"></div>"
     },
     {
       "name": "text input with an error",
@@ -48,7 +48,7 @@
           "text": "Enter a name"
         }
       },
-      "html": "<div class=\"tna-form__group tna-form__group--error \"><div class=\"tna-form__group-contents\"><h4 class=\"tna-form__heading tna-form__heading--m\"><label class=\"tna-form__label\" for=\"name\">Enter your first name</label></h4><p id=\"name-error\" class=\"tna-form__error-message\"><span class=\"tna-!--visually-hidden\">Error:</span> Enter a name</p></div><input type=\"text\" id=\"name\" class=\"tna-text-input \" name=\"name\" value=\"\" spellcheck=\"false\" aria-describedby=\" tna-form__name-error\"></div>"
+      "html": "<div class=\"tna-form__group tna-form__group--error \"><div class=\"tna-form__group-contents\"><h4 class=\"tna-form__heading tna-form__heading--m\"><label class=\"tna-form__label\" for=\"name\">Enter your first name</label></h4><p id=\"name-error\" class=\"tna-form__error-message\"><span class=\"tna-!--visually-hidden\">Error:</span> Enter a name</p></div><input type=\"text\" id=\"name\" class=\"tna-text-input \" name=\"name\" value=\"\" spellcheck=\"false\" aria-describedby=\" name-error\"></div>"
     },
     {
       "name": "inline text input",
diff --git a/src/nationalarchives/components/text-input/template.njk b/src/nationalarchives/components/text-input/template.njk
index 71f1a507..53141307 100644
--- a/src/nationalarchives/components/text-input/template.njk
+++ b/src/nationalarchives/components/text-input/template.njk
@@ -1,5 +1,6 @@
+{% from "nationalarchives/components/text-input/text-input.njk" import tnaTextInputElement %}
+
 {%- set containerClasses = [params.formGroupClasses] if params.formGroupClasses else [] -%}
-{%- set inputClasses = [params.classes] if params.classes else [] -%}
 {%- if params.inline -%}
   {%- set containerClasses = containerClasses.concat('tna-form__group--inline') -%}
 {%- endif -%}
@@ -21,10 +22,5 @@
     </p>
     {%- endif %}
   </div>
-  <input type="text" id="{{ params.id }}" class="tna-text-input{% if params.size %} tna-text-input--{{ params.size }}{% endif %} {{ inputClasses | join(' ') }}" name="{{ params.name }}" value="{{ params.value }}" spellcheck="{{ params.spellcheck if params.spellcheck else false }}"
-  {%- if params.hint or params.error %} aria-describedby="{%- if params.hint -%}tna-form__{{ params.id }}-hint{%- endif %} {% if params.error -%}tna-form__{{ params.id }}-error{%- endif -%}"{%- endif %}
-  {%- if params.maxLength %} maxlength="{{ params.maxLength }}"{% endif %}
-  {%- if params.autofill %} autofill="{{ params.autofill }}"{% endif %}
-  {%- if params.inputmode %} inputmode="{{ params.inputmode }}"{% endif %}
-  {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+  {{ tnaTextInputElement(params) }}
 </div>
diff --git a/src/nationalarchives/components/text-input/text-input.njk b/src/nationalarchives/components/text-input/text-input.njk
new file mode 100644
index 00000000..40508cd0
--- /dev/null
+++ b/src/nationalarchives/components/text-input/text-input.njk
@@ -0,0 +1,10 @@
+{% macro tnaTextInputElement(params, extraAttributes) %}
+  {%- set inputClasses = [params.classes] if params.classes else [] -%}
+  <input type="text" id="{{ params.id }}" class="tna-text-input{% if params.size %} tna-text-input--{{ params.size }}{% endif %} {{ inputClasses | join(' ') }}" name="{{ params.name }}" value="{{ params.value }}" spellcheck="{{ params.spellcheck if params.spellcheck else false }}"
+  {%- if params.hint or params.error %} aria-describedby="{%- if params.hint -%}{{ params.id }}-hint{%- endif %} {% if params.error -%}{{ params.id }}-error{%- endif -%}"{%- endif %}
+  {%- if params.maxLength %} maxlength="{{ params.maxLength }}"{% endif %}
+  {%- if params.autofill %} autofill="{{ params.autofill }}"{% endif %}
+  {%- if params.inputmode %} inputmode="{{ params.inputmode }}"{% endif %}
+  {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}
+  {%- for attribute, value in extraAttributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+{% endmacro %}
diff --git a/src/nationalarchives/components/text-input/text-input.scss b/src/nationalarchives/components/text-input/text-input.scss
index b37b6647..dd7aad2d 100644
--- a/src/nationalarchives/components/text-input/text-input.scss
+++ b/src/nationalarchives/components/text-input/text-input.scss
@@ -16,7 +16,7 @@
   @include colour.colour-background("input-background");
 
   @include colour.colour-border("input-border", forms.$form-field-border-width);
-  border-radius: 0;
+  border-radius: 0.1px;
 
   .tna-form__group--error & {
     @include colour.colour-border("form-error");
diff --git a/src/nationalarchives/components/textarea/fixtures.json b/src/nationalarchives/components/textarea/fixtures.json
index 13a6f906..9fa93eaf 100644
--- a/src/nationalarchives/components/textarea/fixtures.json
+++ b/src/nationalarchives/components/textarea/fixtures.json
@@ -34,7 +34,7 @@
         "name": "feedback",
         "hint": "What did you think?"
       },
-      "html": "<div class=\"tna-form__group \"><div class=\"tna-form__group-contents\"><h4 class=\"tna-form__heading tna-form__heading--m\"><label class=\"tna-form__label\" for=\"feedback\">Enter your feedback</label></h4><p id=\"feedback-hint\" class=\"tna-form__hint\">What did you think?</p></div><textarea id=\"feedback\" class=\"tna-textarea \" name=\"feedback\" spellcheck=\"false\" rows=\"5\" aria-describedby=\"tna-form__feedback-hint \"></textarea></div>"
+      "html": "<div class=\"tna-form__group \"><div class=\"tna-form__group-contents\"><h4 class=\"tna-form__heading tna-form__heading--m\"><label class=\"tna-form__label\" for=\"feedback\">Enter your feedback</label></h4><p id=\"feedback-hint\" class=\"tna-form__hint\">What did you think?</p></div><textarea id=\"feedback\" class=\"tna-textarea \" name=\"feedback\" spellcheck=\"false\" rows=\"5\" aria-describedby=\"feedback-hint \"></textarea></div>"
     },
     {
       "name": "textarea with an error",
@@ -48,7 +48,7 @@
           "text": "Enter some feedback"
         }
       },
-      "html": "<div class=\"tna-form__group tna-form__group--error \"><div class=\"tna-form__group-contents\"><h4 class=\"tna-form__heading tna-form__heading--m\"><label class=\"tna-form__label\" for=\"feedback\">Enter your feedback</label></h4><p id=\"feedback-error\" class=\"tna-form__error-message\"><span class=\"tna-!--visually-hidden\">Error:</span> Enter some feedback</p></div><textarea id=\"feedback\" class=\"tna-textarea \" name=\"feedback\" spellcheck=\"false\" rows=\"5\" aria-describedby=\" tna-form__feedback-error\"></textarea></div>"
+      "html": "<div class=\"tna-form__group tna-form__group--error \"><div class=\"tna-form__group-contents\"><h4 class=\"tna-form__heading tna-form__heading--m\"><label class=\"tna-form__label\" for=\"feedback\">Enter your feedback</label></h4><p id=\"feedback-error\" class=\"tna-form__error-message\"><span class=\"tna-!--visually-hidden\">Error:</span> Enter some feedback</p></div><textarea id=\"feedback\" class=\"tna-textarea \" name=\"feedback\" spellcheck=\"false\" rows=\"5\" aria-describedby=\" feedback-error\"></textarea></div>"
     },
     {
       "name": "inline textarea",
diff --git a/src/nationalarchives/components/textarea/template.njk b/src/nationalarchives/components/textarea/template.njk
index 3fce4d91..6f9752ac 100644
--- a/src/nationalarchives/components/textarea/template.njk
+++ b/src/nationalarchives/components/textarea/template.njk
@@ -22,6 +22,6 @@
     {%- endif %}
   </div>
   <textarea id="{{ params.id }}" class="tna-textarea{% if params.size %} tna-textarea--{{ params.size }}{% endif %} {{ inputClasses | join(' ') }}" name="{{ params.name }}" spellcheck="{{ params.spellcheck if params.spellcheck else false }}" rows="{{ params.rows if params.rows else 5 }}"
-  {%- if params.hint or params.error %} aria-describedby="{%- if params.hint -%}tna-form__{{ params.id }}-hint{%- endif %} {% if params.error -%}tna-form__{{ params.id }}-error{%- endif -%}"{%- endif %}
+  {%- if params.hint or params.error %} aria-describedby="{%- if params.hint -%}{{ params.id }}-hint{%- endif %} {% if params.error -%}{{ params.id }}-error{%- endif -%}"{%- endif %}
   {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>{{ params.value }}</textarea>
 </div>
diff --git a/src/nationalarchives/components/textarea/textarea.scss b/src/nationalarchives/components/textarea/textarea.scss
index 0c1a0d63..9365fe45 100644
--- a/src/nationalarchives/components/textarea/textarea.scss
+++ b/src/nationalarchives/components/textarea/textarea.scss
@@ -25,7 +25,7 @@ $textarea-vertical-padding: 0.25rem !default;
   @include colour.colour-background("input-background");
 
   @include colour.colour-border("input-border", forms.$form-field-border-width);
-  border-radius: 0;
+  border-radius: 0.1px;
 
   .tna-form__group--error & {
     @include colour.colour-border("form-error");
diff --git a/src/nationalarchives/tools/_a11y.scss b/src/nationalarchives/tools/_a11y.scss
index da838cc6..dfd823dd 100644
--- a/src/nationalarchives/tools/_a11y.scss
+++ b/src/nationalarchives/tools/_a11y.scss
@@ -1,6 +1,6 @@
 @use "colour";
 
 @mixin focus-outline {
-  @include colour.colour-outline("focus-outline", 0.3125rem, solid);
-  outline-offset: 0.125rem;
+  @include colour.colour-outline("focus-outline", 5px, solid);
+  outline-offset: 2px;
 }
diff --git a/src/nationalarchives/utilities/_forms.scss b/src/nationalarchives/utilities/_forms.scss
index ea7587be..496f8aa6 100644
--- a/src/nationalarchives/utilities/_forms.scss
+++ b/src/nationalarchives/utilities/_forms.scss
@@ -4,6 +4,12 @@
 @use "../tools/spacing";
 @use "../tools/typography";
 
+button,
+input,
+select {
+  border-radius: 0.1px;
+}
+
 .tna-form {
   &__group {
     @include spacing.space-above;
diff --git a/src/nationalarchives/utilities/_typography.scss b/src/nationalarchives/utilities/_typography.scss
index e2113af1..4506dcf4 100644
--- a/src/nationalarchives/utilities/_typography.scss
+++ b/src/nationalarchives/utilities/_typography.scss
@@ -95,6 +95,8 @@ p {
 a {
   text-decoration-thickness: 1.5px;
 
+  border-radius: 0.1px;
+
   &,
   &:link {
     @include colour.colour-font("link");
diff --git a/tasks/test-package.js b/tasks/test-package.js
index 0472d5f1..a8f516f5 100644
--- a/tasks/test-package.js
+++ b/tasks/test-package.js
@@ -84,7 +84,6 @@ const checkExists = [
   ...componentFiles("date-search"),
   ...componentFiles("error-summary", "ErrorSummary"),
   ...componentFiles("featured-records"),
-  ...componentFiles("filters"),
   ...componentFiles("footer"),
   ...componentFiles("gallery", "Gallery"),
   ...componentFiles("global-header", "GlobalHeader"),
@@ -96,9 +95,11 @@ const checkExists = [
   ...componentFiles("pagination"),
   ...componentFiles("phase-banner"),
   ...componentFiles("picture", "Picture"),
+  ...componentFiles("quick-filters"),
   ...componentFiles("radios"),
   ...componentFiles("sensitive-image", "SensitiveImage"),
   ...componentFiles("search-field"),
+  ...componentFiles("search-filters", "SearchFilters"),
   ...componentFiles("select"),
   ...componentFiles("skip-link", "SkipLink"),
   ...componentFiles("tabs", "Tabs"),