diff --git a/cfgov/ask_cfpb/jinja2/ask-cfpb/_ask-search.html b/cfgov/ask_cfpb/jinja2/ask-cfpb/_ask-search.html
index cac03beca02..b7327e17e8f 100644
--- a/cfgov/ask_cfpb/jinja2/ask-cfpb/_ask-search.html
+++ b/cfgov/ask_cfpb/jinja2/ask-cfpb/_ask-search.html
@@ -36,54 +36,37 @@
     max_length=autocomplete_max_chars
 ) %}
 <div class="o-search-bar">
-    <form method="get" action="{{ _('/ask-cfpb/search/') }}">
+    <form method="get"
+          action="{{ _('/ask-cfpb/search/') }}"
+          data-cy="ask-search-form">
         {% if show_label %}
         <{{ 'h3' if is_subsection else 'h2' }}>
             {{ _('Search for your question') }}
         </{{ 'h3' if is_subsection else 'h2' }}>
         {% endif %}
 
-        <div class="o-search-bar__input">
-            <div class="o-form--input-w-btn">
-                <div class="o-form--input-w-btn__input-container">
-                    <div class="m-btn-inside-input
-                                input-contains-label
-                                {% if autocomplete %}m-autocomplete{% endif %}"
-                         data-language="{{ language }}">
-                        <label for="o-search-bar_query"
-                               class="input-contains-label__before
-                                      input-contains-label__before--search">
-                            {{ svg_icon('search') }}
-                            <span class="u-visually-hidden">
-                                {{ _('Search for your question') }}
-                            </span>
-                        </label>
-                        <input class="a-text-input"
-                               type="text"
-                               name="q"
-                               id="o-search-bar_query"
-                               value="{{ ask_query }}"
-                               placeholder="{{ placeholder }}"
-                               maxlength="{{ max_length }}"
-                               aria-describedby="o-search-bar_error-message">
-                    </div>
-                    <div class="a-form-alert a-form-alert--error u-hidden"
-                         id="o-search-bar_error-message"
-                         role="alert">
-                        {{ svg_icon('error-round') }}
-                        <p class="a-form-alert__text">
-                            Searches are limited to {{ autocomplete_max_chars }}
-                            characters.
-                        </p>
-                    </div>
-                </div>
-                <div class="o-form--input-w-btn__btn-container">
-                    <button class="a-btn"
-                            type="submit"
-                            aria-label="{{ _('Search Ask CFPB for your question') }}">
-                        {{ _('Search') }}
-                    </button>
-                </div>
+        <div>
+            {% import 'v1/includes/organisms/search-input.html' as search_input %}
+            {% set placeholder_value = _('Search Ask CFPB for your question') %}
+            {{ search_input.render({
+                "input_aria_describedby_id": "o-search-bar_error-message",
+                "input_id": "o-search-bar_query",
+                "input_name": "q",
+                "input_value": ask_query,
+                "input_aria_label": _('Search for your question'),
+                "has_autocomplete": autocomplete,
+                "placeholder": placeholder_value,
+                "submit_aria_label": placeholder_value
+            }) }}
+
+            <div class="u-mt15 a-form-alert a-form-alert--error u-hidden"
+                 id="o-search-bar_error-message"
+                 role="alert">
+                {{ svg_icon('error-round') }}
+                <p class="a-form-alert__text">
+                    Searches are limited to {{ autocomplete_max_chars }}
+                    characters.
+                </p>
             </div>
         </div>
     </form>
diff --git a/cfgov/ask_cfpb/locale/es/LC_MESSAGES/django.po b/cfgov/ask_cfpb/locale/es/LC_MESSAGES/django.po
index 8cdf60113f7..46508f41fae 100644
--- a/cfgov/ask_cfpb/locale/es/LC_MESSAGES/django.po
+++ b/cfgov/ask_cfpb/locale/es/LC_MESSAGES/django.po
@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2024-05-08 18:25-0400\n"
+"POT-Creation-Date: 2024-05-10 14:37-0400\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
@@ -18,25 +18,19 @@ msgstr ""
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1);\n"
 
-#: ask_cfpb/jinja2/ask-cfpb/_ask-search.html:44
+#: ask_cfpb/jinja2/ask-cfpb/_ask-search.html:45
 #: ask_cfpb/jinja2/ask-cfpb/see-all.html:87
 msgid "/ask-cfpb/search/"
 msgstr "/es/obtener-respuestas/buscar/"
 
-#: ask_cfpb/jinja2/ask-cfpb/_ask-search.html:47
-#: ask_cfpb/jinja2/ask-cfpb/_ask-search.html:63
+#: ask_cfpb/jinja2/ask-cfpb/_ask-search.html:49
 msgid "Search for your question"
 msgstr "Busque su pregunta"
 
-#: ask_cfpb/jinja2/ask-cfpb/_ask-search.html:93
+#: ask_cfpb/jinja2/ask-cfpb/_ask-search.html:55
 msgid "Search Ask CFPB for your question"
 msgstr "Busque 'Obtener Respuestas' para su cuestionamiento"
 
-#: ask_cfpb/jinja2/ask-cfpb/_ask-search.html:94
-#: ask_cfpb/jinja2/ask-cfpb/see-all.html:59
-msgid "Search"
-msgstr "Buscar"
-
 #: ask_cfpb/jinja2/ask-cfpb/answer-page.html:7
 msgid "Consumer Financial Protection Bureau"
 msgstr ""
@@ -101,7 +95,7 @@ msgstr "No se encontraron resultados para"
 msgid "Please enter a search term in the box above."
 msgstr "Por favor escriba su búsqueda arriba"
 
-#: ask_cfpb/jinja2/ask-cfpb/landing-page.html:6
+#: ask_cfpb/jinja2/ask-cfpb/landing-page.html:5
 msgid "Read answer"
 msgstr "Leer la respuesta"
 
@@ -117,6 +111,10 @@ msgstr "Búsqueda especial"
 msgid "Search term"
 msgstr "Palabra a buscar"
 
+#: ask_cfpb/jinja2/ask-cfpb/see-all.html:59
+msgid "Search"
+msgstr "Buscar"
+
 #: ask_cfpb/jinja2/ask-cfpb/see-all.html:63
 msgid "Clear search"
 msgstr "Borrar búsqueda"
diff --git a/cfgov/cfgov/locale/es/LC_MESSAGES/django.po b/cfgov/cfgov/locale/es/LC_MESSAGES/django.po
index 6731ed1c121..0bce265ad1b 100644
--- a/cfgov/cfgov/locale/es/LC_MESSAGES/django.po
+++ b/cfgov/cfgov/locale/es/LC_MESSAGES/django.po
@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2024-03-29 11:30-0400\n"
+"POT-Creation-Date: 2024-05-10 14:37-0400\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
@@ -18,39 +18,39 @@ msgstr ""
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1);\n"
 
-#: cfgov/settings/base.py:233
+#: cfgov/settings/base.py:232
 msgid "English"
 msgstr ""
 
-#: cfgov/settings/base.py:234
+#: cfgov/settings/base.py:233
 msgid "Spanish"
 msgstr "Español"
 
-#: cfgov/settings/base.py:235
+#: cfgov/settings/base.py:234
 msgid "Chinese"
 msgstr ""
 
-#: cfgov/settings/base.py:236
+#: cfgov/settings/base.py:235
 msgid "Vietnamese"
 msgstr ""
 
-#: cfgov/settings/base.py:237
+#: cfgov/settings/base.py:236
 msgid "Korean"
 msgstr ""
 
-#: cfgov/settings/base.py:238
+#: cfgov/settings/base.py:237
 msgid "Tagalog"
 msgstr ""
 
-#: cfgov/settings/base.py:239
+#: cfgov/settings/base.py:238
 msgid "Russian"
 msgstr ""
 
-#: cfgov/settings/base.py:240
+#: cfgov/settings/base.py:239
 msgid "Arabic"
 msgstr ""
 
-#: cfgov/settings/base.py:241
+#: cfgov/settings/base.py:240
 msgid "Haitian Creole"
 msgstr ""
 
diff --git a/cfgov/prepaid_agreements/jinja2/prepaid_agreements/index.html b/cfgov/prepaid_agreements/jinja2/prepaid_agreements/index.html
index 38caf4f10ed..f7a48745ecf 100644
--- a/cfgov/prepaid_agreements/jinja2/prepaid_agreements/index.html
+++ b/cfgov/prepaid_agreements/jinja2/prepaid_agreements/index.html
@@ -64,25 +64,18 @@ <h3 class="h4 u-mb5">Search within</h3>
                             </optgroup>
                         </select>
                     </div>
+
                     <div class="flex-all">
-                        <div class="m-btn-inside-input input-contains-label">
-                            <label for="searchText"
-                                   class="input-contains-label__before input-contains-label__before--search"
-                                   aria-hidden="true">
-                                {{ svg_icon('search') }}
-                            </label>
-                            <input id="searchText"
-                                   type="text"
-                                   autocomplete="off"
-                                   class="a-text-input"
-                                   name="q"
-                                   placeholder="Enter search term"
-                                   value="{{ query }}"
-                                   aria-label="The term to search for">
-                            <a class="a-btn a-btn--link" href="{{ remove_url_parameter(request, { 'q': [query] }) }}">{{ svg_icon('error') }} Clear</a>
-                        </div>
+                        {% import 'v1/includes/organisms/search-input.html' as search_input %}
+                        {{ search_input.render({
+                            "input_id": "searchText",
+                            "input_name": "q",
+                            "input_value": ask_query,
+                            "input_aria_label": "The term to search for",
+                            "placeholder": "Enter search term",
+                            "submit_aria_label": "The term to search for"
+                        }) }}
                     </div>
-                    <button class="a-btn flex-fixed">Search</button>
                 </div>
             </form>
         </div>
@@ -100,4 +93,3 @@ <h3 class="h4 u-mb5">Search within</h3>
       jsl(['{{ static("apps/prepaid-agreements/js/common.js") }}']);
     </script>
 {% endblock javascript %}
-
diff --git a/cfgov/regulations3k/jinja2/regulations3k/regulations3k-search-bar.html b/cfgov/regulations3k/jinja2/regulations3k/regulations3k-search-bar.html
index a5c2309e2dc..e032ab619bf 100644
--- a/cfgov/regulations3k/jinja2/regulations3k/regulations3k-search-bar.html
+++ b/cfgov/regulations3k/jinja2/regulations3k/regulations3k-search-bar.html
@@ -1,32 +1,30 @@
 {% macro render(hidden_fields, q='') %}
 
-<form action="." data-js-hook="behavior_submit-search">
+<form action="."
+      data-js-hook="behavior_submit-search"
+      data-cy="regs-search-form">
     <h2 class="h4">
         Search term
     </h2>
-    <div class="o-form--input-w-btn">
-        {% if hidden_fields | length > 0 %}
-            <div id="regs3k-hidden-filters">
-            {% for field in hidden_fields %}
-                {% for value in field.value.split(',') %}
-                    <input type="hidden" name="{{ field.name }}" value="{{ value }}">
-                {% endfor %}
+    {% if hidden_fields | length > 0 %}
+        <div id="regs3k-hidden-filters">
+        {% for field in hidden_fields %}
+            {% for value in field.value.split(',') %}
+                <input type="hidden" name="{{ field.name }}" value="{{ value }}">
             {% endfor %}
-            </div>
-        {% endif %}
-        <div class="o-form--input-w-btn__input-container">
-            <div class="m-btn-inside-input input-contains-label">
-                <label for="query" class="input-contains-label__before input-contains-label__before--search">
-                    {{ svg_icon('search') }}
-                    <span class="u-visually-hidden">Search</span>
-                </label>
-                <input id="query" name="q" type="text" title="Search terms" class="a-text-input" value="{{ q }}" placeholder="Search terms">
-            </div>
+        {% endfor %}
         </div>
-        <div class="o-form--input-w-btn__btn-container">
-            <button class="a-btn" aria-label="Search for a term in the regulations">Search</button>
-        </div>
-    </div>
+    {% endif %}
+
+    {% import 'v1/includes/organisms/search-input.html' as search_input %}
+    {{ search_input.render({
+        "input_id": "query",
+        "input_name": "q",
+        "input_value": q,
+        "input_aria_label": "Search for a term",
+        "placeholder": "Enter your search term",
+        "submit_aria_label": "Search for a term in the regulations"
+    }) }}
 </form>
 
 {% endmacro %}
diff --git a/cfgov/regulations3k/jinja2/regulations3k/search-regulations.html b/cfgov/regulations3k/jinja2/regulations3k/search-regulations.html
index f4d53705a80..c337ebb00d1 100644
--- a/cfgov/regulations3k/jinja2/regulations3k/search-regulations.html
+++ b/cfgov/regulations3k/jinja2/regulations3k/search-regulations.html
@@ -56,7 +56,7 @@ <h1>
             Search for terms in the sections, interpretations, and appendices in the Bureau regulations we currently have online.
         </p>
     </div>
-    <div class="search__wrapper u-mt30">
+    <div class="search__wrapper u-mt30 u-mb15">
         {{ search_bar.render(
             [{ 'name': 'regs', 'value': page.results.regs | join(',') }],
             page.results.search_query
@@ -66,9 +66,14 @@ <h1>
 {% if page.results.search_query %}
 <div class="search__results">
     <div class="block block--flush-top content content--1-3">
-        <aside class="content__sidebar content--flush-top-on-small content--flush-sides-on-small filters">
+        <aside class="content__sidebar
+                      content--flush-top-on-small
+                      content--flush-sides-on-small
+                      filters">
             <h3>Refine results</h3>
-            <form action="." method="get" data-js-hook="behavior_change-filter">
+            <form action="."
+                  method="get"
+                  data-js-hook="behavior_change-filter">
                 {% set expandable_settings = {
                     'label': 'Regulation',
                     'is_expanded': true,
diff --git a/cfgov/teachers_digital_platform/jinja2/teachers_digital_platform/activity_index_page.html b/cfgov/teachers_digital_platform/jinja2/teachers_digital_platform/activity_index_page.html
index 5e36070f1f9..e0a25d91abf 100644
--- a/cfgov/teachers_digital_platform/jinja2/teachers_digital_platform/activity_index_page.html
+++ b/cfgov/teachers_digital_platform/jinja2/teachers_digital_platform/activity_index_page.html
@@ -28,29 +28,20 @@
         </section>
         <div class="block block--padded-top block--flush-top u-mb30">
             <h2>Search for activities</h2>
-            <form class="u-mt30" method="get" action="." data-js-hook="behavior_submit-search">
-                <div class="o-form--input-w-btn">
-                    <div class="o-form--input-w-btn__input-container">
-                        <div class="m-btn-inside-input input-contains-label">
-                            <label for="search-text" class="input-contains-label__before input-contains-label__before--search">
-                                {{ svg_icon('search') }}
-                                <span class="u-visually-hidden">The term to search for</span>
-                            </label>
-                            <input id="search-text" type="text" autocomplete="off" class="a-text-input" name="q"
-                                    placeholder="Enter your search term(s)"
-                                    value="{% if page.results.search_query: %}{{ page.results.search_query }}{% endif %}">
-                            <label for="search-text"
-                                  class="input-contains-label__after
-                                         input-contains-label__after--clear
-                                         u-hidden" data-js-hook="behavior_clear-search">
-                                Clear {{ svg_icon('error') }}
-                            </label>
-                        </div>
-                    </div>
-                    <div class="o-form--input-w-btn__btn-container">
-                        <button class="a-btn" aria-label="Search for an activity">Search</button>
-                    </div>
-                </div>
+            <form class="u-mt30"
+                  method="get"
+                  action="."
+                  data-js-hook="behavior_submit-search">
+
+                {% import 'v1/includes/organisms/search-input.html' as search_input %}
+                {{ search_input.render({
+                    "input_id": "search-text",
+                    "input_name": "q",
+                    "input_value": page.results.search_query if page.results.search_query else '',
+                    "input_aria_label": "Search for a term",
+                    "placeholder": "Enter your search term(s)",
+                    "submit_aria_label": "Search for term(s)"
+                }) }}
             </form>
         </div>
         <div id="tdp-search-facets-and-results">
diff --git a/cfgov/unprocessed/apps/ask-cfpb/css/ask-search.less b/cfgov/unprocessed/apps/ask-cfpb/css/ask-search.less
deleted file mode 100644
index b4db01712d8..00000000000
--- a/cfgov/unprocessed/apps/ask-cfpb/css/ask-search.less
+++ /dev/null
@@ -1,17 +0,0 @@
-/* ==========================================================================
-   consumerfinance.gov
-   Ask Search organism
-   ========================================================================== */
-
-// TODO: Reconcile this with the input with button in the Design System.
-.o-form--input-w-btn__btn-container {
-  // Only attach the button to the input at tablet/desktop sizes.
-  .respond-to-min(480px, {
-    border-left: 0;
-
-    .a-btn {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-    }
-  });
-}
diff --git a/cfgov/unprocessed/apps/ask-cfpb/css/main.less b/cfgov/unprocessed/apps/ask-cfpb/css/main.less
index 585c39d652e..883f8e0bdc7 100644
--- a/cfgov/unprocessed/apps/ask-cfpb/css/main.less
+++ b/cfgov/unprocessed/apps/ask-cfpb/css/main.less
@@ -1,5 +1,4 @@
 @import (reference) '../../../css/main.less';
-@import (less) './ask-search.less';
 @import (less) './autocomplete.less';
 
 /* ==========================================================================
@@ -175,20 +174,6 @@
     padding-top: unit(7px / @base-font-size-px, em);
   }
 
-  .o-search-bar__input {
-    max-width: 500px;
-  }
-
-  // The max-width on the search bar cuts off the last few letters of the
-  // Spanish button text when the input and button are side by side; setting
-  // the width of that button to auto lets it overrun its container if needed.
-  // Desktop and above.
-  .respond-to-min(@bp-med-min, {
-    .o-form--input-w-btn__btn-container .a-btn {
-      width: auto;
-    }
-  });
-
   .lead-paragraph {
     // This makes for line lengths between 85-95 characters
     max-width: 41.875rem;
@@ -211,10 +196,6 @@
     }
   });
 
-  .o-search-bar__input {
-    max-width: 31.25rem;
-  }
-
   form[action='/ask-cfpb/search/'] h2 {
     .heading-4();
 
@@ -223,16 +204,6 @@
       .heading-3();
     });
   }
-
-  // The max-width on the search bar cuts off the last few letters of the
-  // Spanish button text at widths where there's a sidebar; setting the width
-  // of that button to auto lets it overrun its container if needed.
-  // Desktop and above.
-  .respond-to-min(@bp-med-min, {
-    .o-form--input-w-btn__btn-container .a-btn {
-      width: auto;
-    }
-  });
 }
 
 .ask-cfpb-page {
diff --git a/cfgov/unprocessed/apps/ask-cfpb/js/ask-autocomplete.js b/cfgov/unprocessed/apps/ask-cfpb/js/ask-autocomplete.js
index 36aaaa13b78..823d2524dbd 100644
--- a/cfgov/unprocessed/apps/ask-cfpb/js/ask-autocomplete.js
+++ b/cfgov/unprocessed/apps/ask-cfpb/js/ask-autocomplete.js
@@ -15,6 +15,19 @@ const errorMessage = document.querySelector('#o-search-bar_error-message');
 const submitButton = document.querySelector(
   '.o-search-bar button[type="submit"]',
 );
+const resetButton = document.querySelector(
+  '.o-search-bar button[type="reset"]',
+);
+
+resetButton.addEventListener('click', resetErrorMsg);
+
+/**
+ * Reset the error message appearance.
+ */
+function resetErrorMsg() {
+  submitButton.removeAttribute('disabled');
+  errorMessage.classList.add('u-hidden');
+}
 
 /**
  * Disable the submit button if the query character limit is reached
@@ -31,14 +44,12 @@ function handleMaxCharacters(event) {
       event: 'Ask Search',
     });
   } else {
-    submitButton.removeAttribute('disabled');
-    errorMessage.classList.add('u-hidden');
+    resetErrorMsg();
   }
 }
 
 if (autocompleteContainer) {
-  const language = autocompleteContainer.getAttribute('data-language');
-
+  const language = document.documentElement.getAttribute('lang')
   const autocomplete = new Autocomplete(autocompleteContainer, {
     url: language === 'es' ? URLS.es : URLS.en,
     onSubmit: function (event, selected) {
diff --git a/cfgov/unprocessed/apps/teachers-digital-platform/css/pages/activity-search.less b/cfgov/unprocessed/apps/teachers-digital-platform/css/pages/activity-search.less
index 317c6018296..a40d3bf669e 100644
--- a/cfgov/unprocessed/apps/teachers-digital-platform/css/pages/activity-search.less
+++ b/cfgov/unprocessed/apps/teachers-digital-platform/css/pages/activity-search.less
@@ -103,15 +103,6 @@
     }
   }
 
-  .input-contains-label {
-    &__after:not(.u-hidden) {
-      // Tablet and above.
-      .respond-to-min(@bp-sm-min, {
-        display: initial;
-      });
-    }
-  }
-
   .results {
     padding-top: 0;
   }
diff --git a/cfgov/unprocessed/apps/teachers-digital-platform/js/ClearableInput.js b/cfgov/unprocessed/apps/teachers-digital-platform/js/ClearableInput.js
deleted file mode 100644
index 14a53bfa1bc..00000000000
--- a/cfgov/unprocessed/apps/teachers-digital-platform/js/ClearableInput.js
+++ /dev/null
@@ -1,87 +0,0 @@
-import { checkDom } from '@cfpb/cfpb-atomic-component';
-
-const BASE_CLASS = 'input-contains-label';
-
-/**
- * ClearableInput
- * @class
- * @classdesc Initializes a new ClearableInput molecule.
- * @param {HTMLElement} element - The DOM element within which to search
- *   for the molecule.
- * @returns {object} A ClearableInput instance.
- */
-function ClearableInput(element) {
-  const _dom = checkDom(element, BASE_CLASS);
-  const _inputDom = _dom.querySelector('input');
-  const _clearBtnDom = _dom.querySelector(`.${BASE_CLASS}__after--clear`);
-
-  let _isClearShowing = true;
-
-  /**
-   * @returns {object} The ClearableInput instance.
-   */
-  function init() {
-    _clearBtnDom.addEventListener('mousedown', _clearClicked);
-    _inputDom.addEventListener('keyup', _inputTyped);
-    _setClearBtnState(_inputDom.value);
-    return this;
-  }
-
-  /**
-   * Event handler for when the clear input label was clicked.
-   * @param {MouseEvent} event - The event object for the mousedown event.
-   */
-  function _clearClicked(event) {
-    _inputDom.value = _setClearBtnState('');
-    _inputDom.focus();
-    // Create custom clear event so we can automatically reset results after clear.
-    const customEvent = new Event('clear', { bubbles: true, cancelable: true });
-    _clearBtnDom.dispatchEvent(customEvent);
-    // Prevent event bubbling up to the input, which would blur otherwise.
-    event.preventDefault();
-  }
-
-  /**
-   * Event handler for when the user typed in the input.
-   */
-  function _inputTyped() {
-    _setClearBtnState(_inputDom.value);
-  }
-
-  /**
-   * @param {string} value - The input value in the search box.
-   * @returns {string} The input value in the search box.
-   */
-  function _setClearBtnState(value) {
-    if (_isClearShowing && value === '') {
-      _hideClearBtn();
-    } else {
-      _showClearBtn();
-    }
-    return value;
-  }
-
-  /**
-   * Add a hidden class to the input search label.
-   * Used when there is no text input.
-   */
-  function _hideClearBtn() {
-    _clearBtnDom.classList.add('u-hidden');
-    _isClearShowing = false;
-  }
-
-  /**
-   * Remove a hidden class from the input search label.
-   * Used when there is text input.
-   */
-  function _showClearBtn() {
-    _clearBtnDom.classList.remove('u-hidden');
-    _isClearShowing = true;
-  }
-
-  this.init = init;
-
-  return this;
-}
-
-export { ClearableInput };
diff --git a/cfgov/unprocessed/apps/teachers-digital-platform/js/search.js b/cfgov/unprocessed/apps/teachers-digital-platform/js/search.js
index 8ae032690f0..06e23a75fe2 100644
--- a/cfgov/unprocessed/apps/teachers-digital-platform/js/search.js
+++ b/cfgov/unprocessed/apps/teachers-digital-platform/js/search.js
@@ -14,7 +14,6 @@ import {
   handleClearAllClick,
   handleFetchSearchResults,
 } from './tdp-analytics.js';
-import { ClearableInput } from './ClearableInput.js';
 
 // Keep track of the most recent XHR request so that we can cancel it if need be
 const searchRequest = new AbortController();
@@ -44,13 +43,6 @@ function attachHandlers() {
   attach('clear-search', 'clear', clearSearch);
   cfExpandables.init();
   expandableFacets.init();
-  const inputContainsLabel = document.querySelector(
-    '.tdp-activity-search .input-contains-label',
-  );
-  if (inputContainsLabel) {
-    const clearableInput = new ClearableInput(inputContainsLabel);
-    clearableInput.init();
-  }
 }
 
 /**
diff --git a/cfgov/unprocessed/css/enhancements/forms.less b/cfgov/unprocessed/css/enhancements/forms.less
index 65e2ad34225..47d36d807c3 100644
--- a/cfgov/unprocessed/css/enhancements/forms.less
+++ b/cfgov/unprocessed/css/enhancements/forms.less
@@ -1,58 +1,3 @@
-.input-contains-label {
-  position: relative;
-
-  .a-text-input {
-    box-sizing: border-box;
-    width: 100%;
-  }
-
-  &__before ~ .a-text-input {
-    padding-left: unit(30px / @btn-font-size, em);
-  }
-
-  &__after ~ .a-text-input {
-    padding-right: unit(30px / @btn-font-size, em);
-  }
-
-  &__before,
-  &__after {
-    position: absolute;
-    top: unit(8px / @btn-font-size, em);
-    cursor: pointer;
-    font-size: unit(@btn-font-size / @base-font-size-px, em);
-  }
-
-  &__before {
-    left: unit(12px / @btn-font-size, em);
-  }
-
-  &__after {
-    right: unit(14px / @btn-font-size, em);
-
-    // Tablet and above.
-    .respond-to-min(@bp-sm-min, {
-      display: none;
-    });
-  }
-}
-
-// TODO: Move to the DM and update existing o-form--input-w-btn in CF
-
-input {
-  .input-with-btn & {
-    // Match button 8px padding minus border width
-    padding-top: 7px;
-    padding-bottom: 7px;
-
-    // Match button font-size
-    font-size: unit(14px / @base-font-size-px, em);
-
-    &:focus {
-      box-shadow: 0 0 0 1px var(--pacific) inset;
-    }
-  }
-}
-
 /*
  * Removes top margin from text input when it follows
  * .a-label--heading, which applies a 10px bottom margin.
@@ -71,8 +16,3 @@ input {
 input[type='date'] {
   min-height: unit(35px / @base-font-size-px, rem);
 }
-
-input[type='search'],
-input[type='search']::-webkit-search-cancel-button {
-  appearance: auto !important;
-}
diff --git a/cfgov/unprocessed/css/main.less b/cfgov/unprocessed/css/main.less
index 3f680e76caf..77c5c27c07f 100644
--- a/cfgov/unprocessed/css/main.less
+++ b/cfgov/unprocessed/css/main.less
@@ -91,6 +91,7 @@
 @import (less) 'organisms/mega-menu.less';
 @import (less) 'organisms/post-preview.less';
 @import (less) 'organisms/prefooter.less';
+@import (less) 'organisms/search-input.less';
 @import (less) 'organisms/secondary-nav.less';
 @import (less) 'organisms/sidebar-breakout.less';
 @import (less) 'organisms/video-player.less';
diff --git a/cfgov/unprocessed/css/molecules/global-search.less b/cfgov/unprocessed/css/molecules/global-search.less
index bbf72b035c8..1f3ddcdbc40 100644
--- a/cfgov/unprocessed/css/molecules/global-search.less
+++ b/cfgov/unprocessed/css/molecules/global-search.less
@@ -162,44 +162,6 @@
     }
   });
 
-  // Mobile size.
-  .respond-to-min(480px, {
-    &__content-form {
-
-      // The  search  button needs to be more flexible than in our usual
-      // input-w-btn element to accommodate longer translations of  search ,
-      // so we will make it flexbox
-      .o-form--input-w-btn {
-        display: flex;
-        padding-right: 0.25em;
-      }
-
-      .o-form--input-w-btn__input-container {
-        display: flex;
-        width: initial;
-        flex: 0 1 75%;
-      }
-
-      .o-form--input-w-btn__btn-container {
-        width: initial;
-        border-left: 0;
-        flex: 1 1 25%;
-
-        button {
-          padding-left: 1em;
-          border-top-left-radius: 0;
-          border-bottom-left-radius: 0;
-          white-space: nowrap;
-
-          // Characters in some languages, like Chinese, have a larger x-height,
-          // which will make the button taller than the input. Fix that by
-          // setting the line height on the button.
-          line-height: unit(19px / @base-font-size-px);
-        }
-      }
-    }
-  });
-
   // Hide on print.
   .respond-to-print( {
     & {
diff --git a/cfgov/unprocessed/css/organisms/search-input.less b/cfgov/unprocessed/css/organisms/search-input.less
new file mode 100644
index 00000000000..7951928c87a
--- /dev/null
+++ b/cfgov/unprocessed/css/organisms/search-input.less
@@ -0,0 +1,128 @@
+@import (reference) 'cfpb-core.less';
+
+.o-search-input {
+  display: flex;
+  flex-direction: column;
+  row-gap: unit(15px / @base-font-size-px, rem);
+
+  &__input {
+    position: relative;
+    display: flex;
+    width: initial;
+    flex: 0 1 100%;
+
+    &-label {
+      position: absolute;
+      left: 10px;
+      align-self: center;
+      cursor: pointer;
+    }
+
+    input[type='search'] {
+      width: 100%;
+      white-space: nowrap;
+      padding-left: 30px;
+
+      // Remove default rounding in Safari.
+      -webkit-appearance: none;
+    }
+
+    // Style the clear x button, and hide it by default.
+    button[type='reset'] {
+      display: none;
+      position: absolute;
+      right: 0;
+      align-self: center;
+
+      color: var(--gray-40);
+      font-size: 20px;
+      border: 1px solid transparent;
+      background-color: transparent;
+      outline: 0;
+
+      // Set the touch target minimum for iOS.
+      width: 44px;
+      padding: 5px;
+      text-align: right;
+
+      > svg {
+        // Set width of SVG width to create a box for the focus rectangle.
+        width: 25px;
+        cursor: pointer;
+
+        // Prevent targeting of button's internal SVG icon.
+        pointer-events: none;
+      }
+    }
+
+    button[type='reset']:hover {
+      color: var(--black);
+    }
+
+    // Style the clear x focus rectangle.
+    button[type='reset']:focus {
+      color: var(--black);
+
+      // Put the focus rectangle on the icon
+      // because the button touch target is larger and would be lop-sided if
+      // we put the rectangle on the button.
+      > svg {
+        outline: 1px dotted var(--pacific);
+      }
+    }
+
+    // However, hide it if we haven't entered any text yet.
+    input[type='search']:placeholder-shown ~ button[type='reset'] {
+      display: none;
+    }
+
+    // When the reset button is showing, pad the input so there's no overlap.
+    input[type='search']:not(:placeholder-shown) {
+      padding-right: 34px;
+    }
+
+    // Remove the default x mark in Chrome.
+    input[type='search']::-webkit-search-decoration,
+    input[type='search']::-webkit-search-cancel-button,
+    input[type='search']::-webkit-search-results-button,
+    input[type='search']::-webkit-search-results-decoration {
+      display: none;
+    }
+  }
+
+  // Show the clear x button if we're focused within the search input area.
+  &:focus-within button[type='reset'],
+  & &__input:hover button[type='reset'] {
+    display: block;
+  }
+
+  button[type='submit'] {
+    // Characters in some languages, like Chinese, have a larger x-height,
+    // which will make the button taller than the input.
+    // Fix that by setting the line height on the button.
+    line-height: unit(19px / @base-font-size-px);
+  }
+
+  // Tablet and above.
+  .respond-to-min(@bp-sm-min, {
+    flex-direction: row;
+    border-left: 0;
+
+    button[type='submit'] {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+
+      flex-basis: 25%;
+    }
+  });
+}
+
+// If the value attribute of the search input has been set by the backend,
+// then the reset (x) button will only reset the input to the initial value
+// at page load.
+// We add a small amount of JS to fully clear the input for this circumstance.
+// However, this doesn't work when JS is disabled, so in that case we hide the
+// reset (x) button.
+.no-js .o-search-input button[type='reset'] {
+  display: none !important;
+}
diff --git a/cfgov/unprocessed/js/molecules/GlobalSearch.js b/cfgov/unprocessed/js/molecules/GlobalSearch.js
index 4caa5b17a00..000920e250b 100644
--- a/cfgov/unprocessed/js/molecules/GlobalSearch.js
+++ b/cfgov/unprocessed/js/molecules/GlobalSearch.js
@@ -28,6 +28,7 @@ function GlobalSearch(element) {
   const _flyout = new FlyoutMenu(_dom, false);
   let _searchInputDom;
   let _searchBtnDom;
+  let _resetBtnDom;
 
   /* The tab trigger adds an element to the end of the element that handles
      cleanup after tabbing out of the element. */
@@ -54,12 +55,14 @@ function GlobalSearch(element) {
 
     _contentDom.classList.remove('u-hidden');
 
-    const inputContainsLabelSel = `.${BASE_CLASS}__content-form .input-contains-label`;
-    const searchBtnSel = `.${BASE_CLASS} .o-form--input-w-btn__btn-container button`;
+    const inputContainsLabelSel = `.${BASE_CLASS} form .o-search-input__input`;
+    const searchBtnSel = `.${BASE_CLASS} form .o-search-input button[type='submit']`;
+    const resetBtnSelector = `.${BASE_CLASS} form .o-search-input button[type='reset']`;
 
     const inputContainsLabel = _contentDom.querySelector(inputContainsLabelSel);
     _searchInputDom = inputContainsLabel.querySelector('input');
     _searchBtnDom = _contentDom.querySelector(searchBtnSel);
+    _resetBtnDom = _contentDom.querySelector(resetBtnSelector);
 
     const handleExpandBeginBinded = _handleExpandBegin.bind(this);
     const handleCollapseEndBinded = _handleCollapseEnd.bind(this);
@@ -107,7 +110,11 @@ function GlobalSearch(element) {
    * @returns {boolean} True if the passed target is in the desktop view.
    */
   function _isDesktopTarget(target) {
-    return target === _searchInputDom || target === _searchBtnDom;
+    return (
+      target === _searchInputDom ||
+      target === _searchBtnDom ||
+      target === _resetBtnDom
+    );
   }
 
   /**
diff --git a/cfgov/v1/jinja2/v1/includes/molecules/global-search.html b/cfgov/v1/jinja2/v1/includes/molecules/global-search.html
index ba68b34fa34..660d9996a4f 100644
--- a/cfgov/v1/jinja2/v1/includes/molecules/global-search.html
+++ b/cfgov/v1/jinja2/v1/includes/molecules/global-search.html
@@ -59,28 +59,15 @@
                    name="affiliate"
                    value="{{ search_gov_affiliate() }}">
 
-            <div class="o-form--input-w-btn">
-               <div class="o-form--input-w-btn__input-container m-form-field">
-                   <div class="a-text-input--full input-contains-label">
-                       <label for="m-global-search_query"
-                              class="input-contains-label__before
-                                     input-contains-label__before--search">
-                            {{ svg_icon('search') }}
-                            <span class="u-visually-hidden">{{ _('Search') }}</span>
-                       </label>
-                       <input id="m-global-search_query"
-                              name="query"
-                              type="search"
-                              title="{{ _('Search the CFPB') }}"
-                              class="a-text-input"
-                              value=""
-                              placeholder="{{ _('Search the CFPB') }}">
-                   </div>
-               </div>
-               <div class="o-form--input-w-btn__btn-container">
-                   <button class="a-btn">{{ _('Search') }}</button>
-               </div>
-            </div>
+            {% import 'v1/includes/organisms/search-input.html' as search_input %}
+            {% set placeholder_value = _('Search the CFPB') %}
+            {{ search_input.render({
+                "input_id": "m-global-search_query",
+                "input_name": "query",
+                "input_aria_label": _('Search for your question'),
+                "placeholder": placeholder_value,
+                "submit_aria_label": placeholder_value
+            }) }}
         </form>
     </div>
 </div>
diff --git a/cfgov/v1/jinja2/v1/includes/organisms/search-input.html b/cfgov/v1/jinja2/v1/includes/organisms/search-input.html
new file mode 100644
index 00000000000..f2baf9468a0
--- /dev/null
+++ b/cfgov/v1/jinja2/v1/includes/organisms/search-input.html
@@ -0,0 +1,65 @@
+{# ==========================================================================
+
+   Search Input with Button
+
+   ==========================================================================
+
+   Description:
+
+   Create a Search Input with Button organism.
+
+   value.input_id: ID for the input and its label.
+
+   value.input_name: Name for the input.
+
+   value.input_value: Value for the input content.
+
+   value.input_aria_label: Hidden text for the input search label.
+
+   value.input_input_aria_describedby_id: ID for an error box that describes this element.
+
+   value.has_autocomplete: Whether it has an autocomplete or not.
+
+   value.placeholder: Placeholder text for the input.
+
+   value.submit_aria_label: Label for the search button.
+
+   ========================================================================== #}
+
+{% macro render(value) %}
+
+<div class="o-search-input">
+    <div class="o-search-input__input{% if value.has_autocomplete %} m-autocomplete{% endif %}">
+        <label for="{{ value.input_id }}"
+               class="o-search-input__input-label"
+               aria-label="{{ value.input_aria_label }}">
+            {{ svg_icon('search') }}
+        </label>
+        <input type="search"
+               id="{{ value.input_id }}"
+               name="{{ value.input_name }}"
+               value="{{ value.input_value or '' }}"
+               class="a-text-input a-text-input__full"
+               placeholder="{{ value.placeholder }}"
+               title="{{ value.placeholder }}"
+               autocomplete="off"
+               maxlength="75"
+               {% if value.input_aria_describedby_id %}
+               aria-describedby="{{ value.input_aria_describedby_id }}"
+               {% endif %}>
+        <button type="reset"
+                onclick="document.getElementById('{{ value.input_id }}').setAttribute('value','')"
+                aria-label="{{ _('Clear search') }}"
+                title="{{ _('Clear search') }}">
+            {{ svg_icon('error')}}
+        </button>
+    </div>
+
+    <button class="a-btn"
+            type="submit"
+            aria-label="{{ value.submit_aria_label }}">
+        {{ _('Search') }}
+    </button>
+</div>
+
+{% endmacro %}
diff --git a/cfgov/v1/locale/es/LC_MESSAGES/django.mo b/cfgov/v1/locale/es/LC_MESSAGES/django.mo
index 4232c751f3d..ac7b83b2e33 100644
Binary files a/cfgov/v1/locale/es/LC_MESSAGES/django.mo and b/cfgov/v1/locale/es/LC_MESSAGES/django.mo differ
diff --git a/cfgov/v1/locale/es/LC_MESSAGES/django.po b/cfgov/v1/locale/es/LC_MESSAGES/django.po
index e430a1beff4..0895082b821 100644
--- a/cfgov/v1/locale/es/LC_MESSAGES/django.po
+++ b/cfgov/v1/locale/es/LC_MESSAGES/django.po
@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2024-05-08 18:25-0400\n"
+"POT-Creation-Date: 2024-05-10 14:37-0400\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
@@ -89,8 +89,7 @@ msgstr "Enviar una queja"
 
 #: v1/jinja2/v1/includes/molecules/global-search.html:28
 #: v1/jinja2/v1/includes/molecules/global-search.html:36
-#: v1/jinja2/v1/includes/molecules/global-search.html:69
-#: v1/jinja2/v1/includes/molecules/global-search.html:81
+#: v1/jinja2/v1/includes/organisms/search-input.html:64
 msgid "Search"
 msgstr "Buscar"
 
@@ -103,8 +102,7 @@ msgstr "Busque en el sitio web consumerfinance.gov"
 msgid "Close"
 msgstr "Cerrar"
 
-#: v1/jinja2/v1/includes/molecules/global-search.html:74
-#: v1/jinja2/v1/includes/molecules/global-search.html:77
+#: v1/jinja2/v1/includes/molecules/global-search.html:63
 msgid "Search the CFPB"
 msgstr "Buscar la CFPB"
 
@@ -184,6 +182,11 @@ msgstr "https://www.usa.gov/es/"
 msgid "USA.gov"
 msgstr "USA.gov/es"
 
+#: v1/jinja2/v1/includes/organisms/search-input.html:55
+#: v1/jinja2/v1/includes/organisms/search-input.html:56
+msgid "Clear search"
+msgstr "Borrar búsqueda"
+
 #: v1/jinja2/v1/includes/organisms/secondary-nav-fig.html:33
 #: v1/jinja2/v1/includes/organisms/secondary-nav-fig.html:36
 #, fuzzy
@@ -217,7 +220,9 @@ msgstr "Este sitio no es compatible con su navegador web."
 
 #: v1/jinja2/v1/includes/snippets/no_js_notification.html:8
 msgid "Please try a newer browser or confirm that JavaScript is enabled."
-msgstr "Intente con un navegador web más nuevo o confirme que JavaScript está habilitado."
+msgstr ""
+"Intente con un navegador web más nuevo o confirme que JavaScript está "
+"habilitado."
 
 #: v1/jinja2/v1/layouts/base.html:261
 msgid "Skip to main content"
@@ -275,6 +280,3 @@ msgstr ""
 
 #~ msgid "Tip"
 #~ msgstr "Consejo"
-
-#~ msgid "Clear search"
-#~ msgstr "Borrar búsqueda"
diff --git a/cfgov/wellbeing/locale/es/LC_MESSAGES/django.po b/cfgov/wellbeing/locale/es/LC_MESSAGES/django.po
index 1020ba1d627..f3fc301fa41 100644
--- a/cfgov/wellbeing/locale/es/LC_MESSAGES/django.po
+++ b/cfgov/wellbeing/locale/es/LC_MESSAGES/django.po
@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2024-03-29 11:30-0400\n"
+"POT-Creation-Date: 2024-05-10 14:37-0400\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
@@ -253,125 +253,125 @@ msgstr ""
 "Calcule su puntuación de bienestar financiero y vea pasos sobre cómo "
 "mejorarla."
 
-#: wellbeing/jinja2/wellbeing/home.html:62
+#: wellbeing/jinja2/wellbeing/home.html:65
 msgid "Here’s how it works:"
 msgstr "Funciona así:"
 
-#: wellbeing/jinja2/wellbeing/home.html:79
+#: wellbeing/jinja2/wellbeing/home.html:82
 msgid "Answer the questions and get your score."
 msgstr "Conteste las preguntas y vea su puntuación."
 
-#: wellbeing/jinja2/wellbeing/home.html:80
+#: wellbeing/jinja2/wellbeing/home.html:83
 msgid ""
 "You won’t be asked about any personal financial data—it’s not that kind of "
 "questionnaire."
 msgstr "No le pediremos ningún dato financiero personal o específico."
 
-#: wellbeing/jinja2/wellbeing/home.html:81
+#: wellbeing/jinja2/wellbeing/home.html:84
 msgid "See how and why we developed it."
 msgstr "Lea más sobre cómo desarrollamos este cuestionario."
 
-#: wellbeing/jinja2/wellbeing/home.html:84
+#: wellbeing/jinja2/wellbeing/home.html:87
 msgid "Review steps you can take"
 msgstr "Revise los pasos que pueda tomar"
 
-#: wellbeing/jinja2/wellbeing/home.html:85
+#: wellbeing/jinja2/wellbeing/home.html:88
 msgid "if you want to be able to answer the questions differently."
 msgstr "si desea poder contestar las preguntas de una manera diferente."
 
-#: wellbeing/jinja2/wellbeing/home.html:89
+#: wellbeing/jinja2/wellbeing/home.html:92
 msgid "See how your score compares"
 msgstr "Compare su resultado"
 
-#: wellbeing/jinja2/wellbeing/home.html:90
+#: wellbeing/jinja2/wellbeing/home.html:93
 msgid "to other U.S. adults from our national survey."
 msgstr "con el del resto de la población en los Estados Unidos."
 
-#: wellbeing/jinja2/wellbeing/home.html:100
+#: wellbeing/jinja2/wellbeing/home.html:103
 msgid "We never collect or store the answers you provide."
 msgstr "No guardamos sus respuestas."
 
-#: wellbeing/jinja2/wellbeing/home.html:106
+#: wellbeing/jinja2/wellbeing/home.html:109
 msgid "See how your privacy is protected."
 msgstr "Lea más sobre cómo protegemos su privacidad."
 
-#: wellbeing/jinja2/wellbeing/home.html:116
+#: wellbeing/jinja2/wellbeing/home.html:119
 msgid "Part 1: How well does this statement describe you or your situation?"
 msgstr "Parte 1: ¿Cuán bien lo describe a usted o su situación lo siguiente?"
 
-#: wellbeing/jinja2/wellbeing/home.html:120 wellbeing/views.py:15
+#: wellbeing/jinja2/wellbeing/home.html:123 wellbeing/views.py:15
 msgid "I could handle a major unexpected expense"
 msgstr "Podría hacer frente a un gasto imprevisto importante"
 
-#: wellbeing/jinja2/wellbeing/home.html:122
-#: wellbeing/jinja2/wellbeing/home.html:195
-#: wellbeing/jinja2/wellbeing/home.html:268
-#: wellbeing/jinja2/wellbeing/home.html:341
-#: wellbeing/jinja2/wellbeing/home.html:414
-#: wellbeing/jinja2/wellbeing/home.html:487
+#: wellbeing/jinja2/wellbeing/home.html:125
+#: wellbeing/jinja2/wellbeing/home.html:198
+#: wellbeing/jinja2/wellbeing/home.html:271
+#: wellbeing/jinja2/wellbeing/home.html:344
+#: wellbeing/jinja2/wellbeing/home.html:417
+#: wellbeing/jinja2/wellbeing/home.html:490
 msgid "This statement describes me"
 msgstr "Esto me describe "
 
-#: wellbeing/jinja2/wellbeing/home.html:134
-#: wellbeing/jinja2/wellbeing/home.html:207
-#: wellbeing/jinja2/wellbeing/home.html:280
-#: wellbeing/jinja2/wellbeing/home.html:353
-#: wellbeing/jinja2/wellbeing/home.html:426
-#: wellbeing/jinja2/wellbeing/home.html:499 wellbeing/views.py:21
+#: wellbeing/jinja2/wellbeing/home.html:137
+#: wellbeing/jinja2/wellbeing/home.html:210
+#: wellbeing/jinja2/wellbeing/home.html:283
+#: wellbeing/jinja2/wellbeing/home.html:356
+#: wellbeing/jinja2/wellbeing/home.html:429
+#: wellbeing/jinja2/wellbeing/home.html:502 wellbeing/views.py:21
 #: wellbeing/views.py:32 wellbeing/views.py:42 wellbeing/views.py:59
 #: wellbeing/views.py:66 wellbeing/views.py:80
 msgid "Completely"
 msgstr "Totalmente"
 
-#: wellbeing/jinja2/wellbeing/home.html:147
-#: wellbeing/jinja2/wellbeing/home.html:220
-#: wellbeing/jinja2/wellbeing/home.html:293
-#: wellbeing/jinja2/wellbeing/home.html:366
-#: wellbeing/jinja2/wellbeing/home.html:439
-#: wellbeing/jinja2/wellbeing/home.html:512 wellbeing/views.py:20
+#: wellbeing/jinja2/wellbeing/home.html:150
+#: wellbeing/jinja2/wellbeing/home.html:223
+#: wellbeing/jinja2/wellbeing/home.html:296
+#: wellbeing/jinja2/wellbeing/home.html:369
+#: wellbeing/jinja2/wellbeing/home.html:442
+#: wellbeing/jinja2/wellbeing/home.html:515 wellbeing/views.py:20
 #: wellbeing/views.py:31 wellbeing/views.py:43 wellbeing/views.py:58
 #: wellbeing/views.py:67 wellbeing/views.py:81
 msgid "Very well"
 msgstr "Muy bien"
 
-#: wellbeing/jinja2/wellbeing/home.html:160
-#: wellbeing/jinja2/wellbeing/home.html:233
-#: wellbeing/jinja2/wellbeing/home.html:306
-#: wellbeing/jinja2/wellbeing/home.html:379
-#: wellbeing/jinja2/wellbeing/home.html:452
-#: wellbeing/jinja2/wellbeing/home.html:525 wellbeing/views.py:19
+#: wellbeing/jinja2/wellbeing/home.html:163
+#: wellbeing/jinja2/wellbeing/home.html:236
+#: wellbeing/jinja2/wellbeing/home.html:309
+#: wellbeing/jinja2/wellbeing/home.html:382
+#: wellbeing/jinja2/wellbeing/home.html:455
+#: wellbeing/jinja2/wellbeing/home.html:528 wellbeing/views.py:19
 #: wellbeing/views.py:30 wellbeing/views.py:44 wellbeing/views.py:57
 #: wellbeing/views.py:68 wellbeing/views.py:82
 msgid "Somewhat"
 msgstr "En cierta medida"
 
-#: wellbeing/jinja2/wellbeing/home.html:173
-#: wellbeing/jinja2/wellbeing/home.html:246
-#: wellbeing/jinja2/wellbeing/home.html:319
-#: wellbeing/jinja2/wellbeing/home.html:392
-#: wellbeing/jinja2/wellbeing/home.html:465
-#: wellbeing/jinja2/wellbeing/home.html:538 wellbeing/views.py:18
+#: wellbeing/jinja2/wellbeing/home.html:176
+#: wellbeing/jinja2/wellbeing/home.html:249
+#: wellbeing/jinja2/wellbeing/home.html:322
+#: wellbeing/jinja2/wellbeing/home.html:395
+#: wellbeing/jinja2/wellbeing/home.html:468
+#: wellbeing/jinja2/wellbeing/home.html:541 wellbeing/views.py:18
 #: wellbeing/views.py:29 wellbeing/views.py:45 wellbeing/views.py:56
 #: wellbeing/views.py:69 wellbeing/views.py:83
 msgid "Very little"
 msgstr "Muy poco"
 
-#: wellbeing/jinja2/wellbeing/home.html:186
-#: wellbeing/jinja2/wellbeing/home.html:259
-#: wellbeing/jinja2/wellbeing/home.html:332
-#: wellbeing/jinja2/wellbeing/home.html:405
-#: wellbeing/jinja2/wellbeing/home.html:478
-#: wellbeing/jinja2/wellbeing/home.html:551 wellbeing/views.py:17
+#: wellbeing/jinja2/wellbeing/home.html:189
+#: wellbeing/jinja2/wellbeing/home.html:262
+#: wellbeing/jinja2/wellbeing/home.html:335
+#: wellbeing/jinja2/wellbeing/home.html:408
+#: wellbeing/jinja2/wellbeing/home.html:481
+#: wellbeing/jinja2/wellbeing/home.html:554 wellbeing/views.py:17
 #: wellbeing/views.py:28 wellbeing/views.py:46 wellbeing/views.py:55
 #: wellbeing/views.py:70 wellbeing/views.py:84
 msgid "Not at all"
 msgstr "No me describe en lo absoluto"
 
-#: wellbeing/jinja2/wellbeing/home.html:193 wellbeing/views.py:26
+#: wellbeing/jinja2/wellbeing/home.html:196 wellbeing/views.py:26
 msgid "I am securing my financial future"
 msgstr "Estoy asegurando mi futuro financiero"
 
-#: wellbeing/jinja2/wellbeing/home.html:266 wellbeing/views.py:38
+#: wellbeing/jinja2/wellbeing/home.html:269 wellbeing/views.py:38
 msgid ""
 "Because of my money situation, I feel like I will never have the things I "
 "want in life"
@@ -379,23 +379,23 @@ msgstr ""
 "Debido a mi situación financiera, creo que nunca tendré las cosas que quiero "
 "en la vida"
 
-#: wellbeing/jinja2/wellbeing/home.html:339
+#: wellbeing/jinja2/wellbeing/home.html:342
 msgid "I can enjoy life because of the way I’m managing my money"
 msgstr "Puedo disfrutar la vida debido a la manera en que manejo mi dinero"
 
-#: wellbeing/jinja2/wellbeing/home.html:412 wellbeing/views.py:64
+#: wellbeing/jinja2/wellbeing/home.html:415 wellbeing/views.py:64
 msgid "I am just getting by financially"
 msgstr "Apenas estoy subsistiendo financieramente"
 
-#: wellbeing/jinja2/wellbeing/home.html:485
+#: wellbeing/jinja2/wellbeing/home.html:488
 msgid "I am concerned that the money I have or will save won’t last"
 msgstr "Me preocupa que el dinero que tengo o que ahorre no me dure"
 
-#: wellbeing/jinja2/wellbeing/home.html:559
+#: wellbeing/jinja2/wellbeing/home.html:562
 msgid "Part 2: How often does this statement apply to you?"
 msgstr "Parte 2: ¿Con qué frecuencia le ocurre lo siguiente?"
 
-#: wellbeing/jinja2/wellbeing/home.html:563 wellbeing/views.py:90
+#: wellbeing/jinja2/wellbeing/home.html:566 wellbeing/views.py:90
 msgid ""
 "Giving a gift for a wedding, birthday or other occasion would put a strain "
 "on my finances for the month"
@@ -403,74 +403,74 @@ msgstr ""
 "Hacer un regalo para una boda, un cumpleaños u otra ocasión supondría una "
 "enorme carga para mis finanzas del mes"
 
-#: wellbeing/jinja2/wellbeing/home.html:565
-#: wellbeing/jinja2/wellbeing/home.html:638
-#: wellbeing/jinja2/wellbeing/home.html:710
-#: wellbeing/jinja2/wellbeing/home.html:783
+#: wellbeing/jinja2/wellbeing/home.html:568
+#: wellbeing/jinja2/wellbeing/home.html:641
+#: wellbeing/jinja2/wellbeing/home.html:713
+#: wellbeing/jinja2/wellbeing/home.html:786
 msgid "This statement applies to me"
 msgstr "Esto me ocurre"
 
-#: wellbeing/jinja2/wellbeing/home.html:577
-#: wellbeing/jinja2/wellbeing/home.html:649
-#: wellbeing/jinja2/wellbeing/home.html:722
-#: wellbeing/jinja2/wellbeing/home.html:795 wellbeing/views.py:95
+#: wellbeing/jinja2/wellbeing/home.html:580
+#: wellbeing/jinja2/wellbeing/home.html:652
+#: wellbeing/jinja2/wellbeing/home.html:725
+#: wellbeing/jinja2/wellbeing/home.html:798 wellbeing/views.py:95
 #: wellbeing/views.py:110 wellbeing/views.py:117 wellbeing/views.py:128
 msgid "Always"
 msgstr "Siempre"
 
-#: wellbeing/jinja2/wellbeing/home.html:590
-#: wellbeing/jinja2/wellbeing/home.html:662
-#: wellbeing/jinja2/wellbeing/home.html:735
-#: wellbeing/jinja2/wellbeing/home.html:808 wellbeing/views.py:96
+#: wellbeing/jinja2/wellbeing/home.html:593
+#: wellbeing/jinja2/wellbeing/home.html:665
+#: wellbeing/jinja2/wellbeing/home.html:738
+#: wellbeing/jinja2/wellbeing/home.html:811 wellbeing/views.py:96
 #: wellbeing/views.py:109 wellbeing/views.py:118 wellbeing/views.py:129
 msgid "Often"
 msgstr "A menudo"
 
-#: wellbeing/jinja2/wellbeing/home.html:603
-#: wellbeing/jinja2/wellbeing/home.html:675
-#: wellbeing/jinja2/wellbeing/home.html:748
-#: wellbeing/jinja2/wellbeing/home.html:821 wellbeing/views.py:97
+#: wellbeing/jinja2/wellbeing/home.html:606
+#: wellbeing/jinja2/wellbeing/home.html:678
+#: wellbeing/jinja2/wellbeing/home.html:751
+#: wellbeing/jinja2/wellbeing/home.html:824 wellbeing/views.py:97
 #: wellbeing/views.py:108 wellbeing/views.py:119 wellbeing/views.py:130
 msgid "Sometimes"
 msgstr "A veces"
 
-#: wellbeing/jinja2/wellbeing/home.html:616
-#: wellbeing/jinja2/wellbeing/home.html:688
-#: wellbeing/jinja2/wellbeing/home.html:761
-#: wellbeing/jinja2/wellbeing/home.html:834 wellbeing/views.py:98
+#: wellbeing/jinja2/wellbeing/home.html:619
+#: wellbeing/jinja2/wellbeing/home.html:691
+#: wellbeing/jinja2/wellbeing/home.html:764
+#: wellbeing/jinja2/wellbeing/home.html:837 wellbeing/views.py:98
 #: wellbeing/views.py:107 wellbeing/views.py:120 wellbeing/views.py:131
 msgid "Rarely"
 msgstr "Casi nunca"
 
-#: wellbeing/jinja2/wellbeing/home.html:629
-#: wellbeing/jinja2/wellbeing/home.html:701
-#: wellbeing/jinja2/wellbeing/home.html:774
-#: wellbeing/jinja2/wellbeing/home.html:847 wellbeing/views.py:99
+#: wellbeing/jinja2/wellbeing/home.html:632
+#: wellbeing/jinja2/wellbeing/home.html:704
+#: wellbeing/jinja2/wellbeing/home.html:777
+#: wellbeing/jinja2/wellbeing/home.html:850 wellbeing/views.py:99
 #: wellbeing/views.py:106 wellbeing/views.py:121 wellbeing/views.py:132
 msgid "Never"
 msgstr "Nunca"
 
-#: wellbeing/jinja2/wellbeing/home.html:636 wellbeing/views.py:104
+#: wellbeing/jinja2/wellbeing/home.html:639 wellbeing/views.py:104
 msgid "I have money left over at the end of the month"
 msgstr "Me sobra dinero al final del mes"
 
-#: wellbeing/jinja2/wellbeing/home.html:708 wellbeing/views.py:115
+#: wellbeing/jinja2/wellbeing/home.html:711 wellbeing/views.py:115
 msgid "I am behind with my finances"
 msgstr "Estoy atrasado en mis finanzas"
 
-#: wellbeing/jinja2/wellbeing/home.html:781 wellbeing/views.py:126
+#: wellbeing/jinja2/wellbeing/home.html:784 wellbeing/views.py:126
 msgid "My finances control my life"
 msgstr "Mis finanzas controlan mi vida"
 
-#: wellbeing/jinja2/wellbeing/home.html:855
+#: wellbeing/jinja2/wellbeing/home.html:858
 msgid "About you"
 msgstr "Sobre usted"
 
-#: wellbeing/jinja2/wellbeing/home.html:860
+#: wellbeing/jinja2/wellbeing/home.html:863
 msgid "Select your age group. This changes the scoring calculation."
 msgstr "Seleccione su edad. Esto afecta cómo calculamos su puntuación."
 
-#: wellbeing/jinja2/wellbeing/home.html:899
+#: wellbeing/jinja2/wellbeing/home.html:902
 msgid ""
 "Select how you completed the questionnaire. This changes the scoring "
 "calculation."
@@ -478,29 +478,29 @@ msgstr ""
 "Seleccione cómo contestó el cuestionario. Esto afecta cómo calculamos su "
 "puntuación."
 
-#: wellbeing/jinja2/wellbeing/home.html:914
+#: wellbeing/jinja2/wellbeing/home.html:917
 msgid "I read and answered the questions myself"
 msgstr "Yo leí y contesté las preguntas"
 
-#: wellbeing/jinja2/wellbeing/home.html:929
+#: wellbeing/jinja2/wellbeing/home.html:932
 msgid "I read the questions to someone else and recorded their answers"
 msgstr "Yo leí a alguien las preguntas y anoté sus respuestas"
 
-#: wellbeing/jinja2/wellbeing/home.html:944
+#: wellbeing/jinja2/wellbeing/home.html:947
 msgid "Get my score"
 msgstr "Obtenga su puntuación"
 
-#: wellbeing/jinja2/wellbeing/home.html:957
+#: wellbeing/jinja2/wellbeing/home.html:960
 msgid "About us"
 msgstr "Quienes somos"
 
-#: wellbeing/jinja2/wellbeing/home.html:959
+#: wellbeing/jinja2/wellbeing/home.html:962
 msgid "We&#39;re the Consumer Financial Protection Bureau (CFPB),"
 msgstr ""
 "Somos la Oficina para la Protección Financiera del Consumidor (CFPB, por sus "
 "siglas en inglés),"
 
-#: wellbeing/jinja2/wellbeing/home.html:960
+#: wellbeing/jinja2/wellbeing/home.html:963
 msgid ""
 "a U.S. government agency that makes sure banks, lenders, and other financial "
 "companies treat you fairly."
@@ -508,16 +508,16 @@ msgstr ""
 "una agencia del gobierno de los Estados Unidos que se asegura de que bancos, "
 "prestamistas y otras compañías financieras le traten de forma justa."
 
-#: wellbeing/jinja2/wellbeing/home.html:963
+#: wellbeing/jinja2/wellbeing/home.html:966
 msgid "Learn how the CFPB can help you"
 msgstr "Descubra cómo el CFPB puede ayudarle"
 
-#: wellbeing/jinja2/wellbeing/home.html:969
+#: wellbeing/jinja2/wellbeing/home.html:972
 #: wellbeing/jinja2/wellbeing/results.html:515
 msgid "About this questionnaire"
 msgstr "Sobre este cuestionario"
 
-#: wellbeing/jinja2/wellbeing/home.html:972
+#: wellbeing/jinja2/wellbeing/home.html:975
 #: wellbeing/jinja2/wellbeing/results.html:518
 msgid ""
 "CFPB researchers developed the questionnaire and a way to score it, as a "
@@ -526,7 +526,7 @@ msgstr ""
 "Investigadores del CFPB desarrollaron este cuestionario y el método para "
 "obtener su puntuación de bienestar financiero."
 
-#: wellbeing/jinja2/wellbeing/home.html:973
+#: wellbeing/jinja2/wellbeing/home.html:976
 #: wellbeing/jinja2/wellbeing/results.html:519
 msgid ""
 "that is, how well your current money situation is providing you with "
@@ -535,7 +535,7 @@ msgstr ""
 "Su puntuación mide cuán bien su situación financiera actual le da seguridad "
 "y libertad financiera tanto en el presente como en el futuro."
 
-#: wellbeing/jinja2/wellbeing/home.html:976
+#: wellbeing/jinja2/wellbeing/home.html:979
 #: wellbeing/jinja2/wellbeing/results.html:522
 msgid "See more background"
 msgstr "Más información"
diff --git a/test/cypress/integration/consumer-tools/ask-cfpb/ask-cfpb.cy.js b/test/cypress/integration/consumer-tools/ask-cfpb/ask-cfpb.cy.js
index 1e24ef3fec9..7e162b43ddc 100644
--- a/test/cypress/integration/consumer-tools/ask-cfpb/ask-cfpb.cy.js
+++ b/test/cypress/integration/consumer-tools/ask-cfpb/ask-cfpb.cy.js
@@ -41,6 +41,14 @@ describe('Ask CFPB', () => {
       search.maxLengthErrorMessage().should('be.visible');
       search.submitButton().should('be.disabled');
     });
+
+    it('should allow clearing of search', () => {
+      search.enter('typed a typoo');
+      search.resetButton().should('be.visible');
+      search.clearSearch();
+      search.input().invoke('val').should('be.empty');
+      search.resetButton().should('not.be.visible');
+    });
   });
 
   describe('Answer Page', () => {
diff --git a/test/cypress/integration/consumer-tools/ask-cfpb/search-helpers.cy.js b/test/cypress/integration/consumer-tools/ask-cfpb/search-helpers.cy.js
index 946c0ec4ea8..3a4acf950c7 100644
--- a/test/cypress/integration/consumer-tools/ask-cfpb/search-helpers.cy.js
+++ b/test/cypress/integration/consumer-tools/ask-cfpb/search-helpers.cy.js
@@ -4,8 +4,12 @@ export class AskCfpbSearch {
     cy.visit(path);
   }
 
+  searchInputComponent() {
+    return cy.get('[data-cy=ask-search-form] .o-search-input');
+  }
+
   input() {
-    return cy.get('#o-search-bar_query');
+    return this.searchInputComponent().find('input');
   }
 
   enter(term) {
@@ -17,13 +21,21 @@ export class AskCfpbSearch {
   }
 
   submitButton() {
-    return cy.get('.o-search-bar .a-btn');
+    return this.searchInputComponent().find('button[type="submit"]');
+  }
+
+  resetButton() {
+    return this.searchInputComponent().find('button[type="reset"]');
   }
 
   search() {
     this.submitButton().click();
   }
 
+  clearSearch() {
+    this.resetButton().click();
+  }
+
   resultsSection() {
     return cy.get('.search-results');
   }
diff --git a/test/cypress/integration/consumer-tools/tdp-activity-search/tdp-activity-search-helpers.cy.js b/test/cypress/integration/consumer-tools/tdp-activity-search/tdp-activity-search-helpers.cy.js
index b7329f7b72d..fc2618192ac 100644
--- a/test/cypress/integration/consumer-tools/tdp-activity-search/tdp-activity-search-helpers.cy.js
+++ b/test/cypress/integration/consumer-tools/tdp-activity-search/tdp-activity-search-helpers.cy.js
@@ -26,7 +26,7 @@ export class ActivitySearch {
     cy.get('form[action="."]')
       .first()
       .within(() => {
-        cy.get('button').first().click();
+        cy.get('button[type="submit"]').click();
       });
   }
 }
diff --git a/test/cypress/integration/rules-policy/regulations-search-helpers.cy.js b/test/cypress/integration/rules-policy/regulations-search-helpers.cy.js
index b86882bba69..080e0d60b1d 100644
--- a/test/cypress/integration/rules-policy/regulations-search-helpers.cy.js
+++ b/test/cypress/integration/rules-policy/regulations-search-helpers.cy.js
@@ -3,13 +3,33 @@ export class RegulationsSearch {
     cy.visit('/rules-policy/regulations/search-regulations/results/');
   }
 
-  searchForm() {
-    return cy.get('form[action="."]');
+  searchInputComponent() {
+    return cy.get('[data-cy=regs-search-form] .o-search-input');
+  }
+
+  input() {
+    return this.searchInputComponent().find('input');
+  }
+
+  submitButton() {
+    return this.searchInputComponent().find('button[type="submit"]');
+  }
+
+  resetButton() {
+    return this.searchInputComponent().find('button[type="reset"]');
+  }
+
+  search() {
+    this.submitButton().click();
+  }
+
+  clearSearch() {
+    this.resetButton().click();
   }
 
   searchTerm(term) {
-    this.searchForm().find('#query').type(term);
-    this.searchForm().submit();
+    this.input().type(term);
+    this.search();
   }
 
   searchResults() {
diff --git a/test/cypress/integration/rules-policy/regulations-search.cy.js b/test/cypress/integration/rules-policy/regulations-search.cy.js
index 677ed46a680..35250d0b27e 100644
--- a/test/cypress/integration/rules-policy/regulations-search.cy.js
+++ b/test/cypress/integration/rules-policy/regulations-search.cy.js
@@ -13,6 +13,14 @@ describe('Policy Compliance', () => {
       regulationsSearch.searchResults().should('be.visible');
     });
 
+    it('should allow clearing of search', () => {
+      regulationsSearch.input().type('typed a typoo');
+      regulationsSearch.resetButton().should('be.visible');
+      regulationsSearch.clearSearch();
+      regulationsSearch.input().invoke('val').should('be.empty');
+      regulationsSearch.resetButton().should('not.be.visible');
+    });
+
     it('should adjust results based on the page size', () => {
       regulationsSearch.setPageSize(50);
       regulationsSearch.searchResult().should('have.length', '50');
diff --git a/test/unit_tests/apps/regulations3k/js/search-spec.js b/test/unit_tests/apps/regulations3k/js/search-spec.js
index 83896f055ec..f00da0eb10a 100644
--- a/test/unit_tests/apps/regulations3k/js/search-spec.js
+++ b/test/unit_tests/apps/regulations3k/js/search-spec.js
@@ -7,8 +7,21 @@ import '../../../../../cfgov/unprocessed/apps/regulations3k/js/search.js';
 
 const HTML_SNIPPET = `
   <form action="/search" data-js-hook="behavior_submit-search">
-    <input id="query" name="q" type="text" title="Search terms" class="a-text-input" value="money" placeholder="Search terms">
-    <button id="submit">Submit</button>
+    <div class="o-search-input">
+      <div class="o-search-input__input">
+          <label for="query" class="o-search-input__input-label" aria-label="Search for a term">
+              <svg xmlns="http://www.w3.org/2000/svg" class="cf-icon-svg cf-icon-svg--search" viewBox="0 0 15 19"><path d="M14.147 15.488a1.11 1.11 0 0 1-1.567 0l-3.395-3.395a5.575 5.575 0 1 1 1.568-1.568l3.394 3.395a1.11 1.11 0 0 1 0 1.568m-6.361-3.903a4.488 4.488 0 1 0-1.681.327 4.4 4.4 0 0 0 1.68-.327z"></path></svg>
+          </label>
+          <input type="search" id="query" name="q" value="money" class="a-text-input a-text-input__full" placeholder="Enter your search term" title="Enter your search term" autocomplete="off" maxlength="75">
+          <button type="reset" onclick="document.getElementById('query').setAttribute('value','')" aria-label="Clear search" title="Clear search">
+                  <svg xmlns="http://www.w3.org/2000/svg" class="cf-icon-svg cf-icon-svg--error" viewBox="0 0 12 19"><path d="M11.383 13.644A1.03 1.03 0 0 1 9.928 15.1L6 11.172 2.072 15.1a1.03 1.03 0 1 1-1.455-1.456l3.928-3.928L.617 5.79a1.03 1.03 0 1 1 1.455-1.456L6 8.261l3.928-3.928a1.03 1.03 0 0 1 1.455 1.456L7.455 9.716z"></path></svg>
+          </button>
+      </div>
+
+      <button class="a-btn" type="submit" aria-label="Search for a term in the regulations">
+          Search
+      </button>
+    </div>
   </form>
   <div>
     <div class="m-form-field m-form-field--checkbox reg-checkbox">
@@ -70,7 +83,7 @@ describe('The Regs3K search page', () => {
   });
 
   it('should clear a filter when its X icon is clicked', () => {
-    const clearIcon = document.querySelector('svg');
+    const clearIcon = document.querySelector('.a-tag svg');
 
     let numFilters = document.querySelectorAll('div.a-tag').length;
     expect(numFilters).toEqual(1);
@@ -104,7 +117,7 @@ describe('The Regs3K search page', () => {
 
   it('should handle errors when the server is down', (done) => {
     fetch.mockReject(new Error('Server error!'));
-    const clearIcon = document.querySelector('svg');
+    const clearIcon = document.querySelector('.a-tag svg');
 
     simulateEvent('click', clearIcon);
     setTimeout(() => {
diff --git a/test/unit_tests/apps/teachers-digital-platform/js/ClearableInput-spec.js b/test/unit_tests/apps/teachers-digital-platform/js/ClearableInput-spec.js
deleted file mode 100644
index d764332a02b..00000000000
--- a/test/unit_tests/apps/teachers-digital-platform/js/ClearableInput-spec.js
+++ /dev/null
@@ -1,82 +0,0 @@
-import { ClearableInput } from '../../../../../cfgov/unprocessed/apps/teachers-digital-platform/js/ClearableInput.js';
-import { simulateEvent } from '../../../../util/simulate-event.js';
-
-let baseDom;
-let clearBtnDom;
-let inputDom;
-
-const HTML_SNIPPET = `
-<div class="o-form--input-w-btn__input-container">
-     <div class="m-btn-inside-input
-                 input-contains-label">
-         <label for="query" class="input-contains-label__before
-                                   input-contains-label__before--search">
-         </label>
-         <label for="query" class="input-contains-label__after
-                                   input-contains-label__after--clear">
-         </label>
-         <input type="text"
-                title="Search the CFPB"
-                class="a-text-input"
-                value=""
-                placeholder="Search the CFPB">
-     </div>
-</div>
-`;
-
-describe('ClearableInput', () => {
-  beforeEach(() => {
-    document.body.innerHTML = HTML_SNIPPET;
-    baseDom = document.querySelector('.o-form--input-w-btn__input-container');
-    inputDom = baseDom.querySelector('input');
-    clearBtnDom = baseDom.querySelector('.input-contains-label__after--clear');
-  });
-
-  describe('init function', () => {
-    it('should hide the clear button when a value is empty', () => {
-      new ClearableInput(baseDom).init();
-      expect(clearBtnDom.classList.contains('u-hidden')).toStrictEqual(true);
-    });
-
-    it('should display the clear button when a value is present', () => {
-      inputDom.value = 'testing init function';
-      new ClearableInput(baseDom).init();
-      expect(clearBtnDom.classList.contains('u-hidden')).toStrictEqual(false);
-    });
-  });
-
-  describe('on clear button click', () => {
-    it('should hide itself', () => {
-      inputDom.value = 'testing clear button';
-      new ClearableInput(baseDom).init();
-      expect(clearBtnDom.classList.contains('u-hidden')).toStrictEqual(false);
-      simulateEvent('mousedown', clearBtnDom);
-      expect(clearBtnDom.classList.contains('u-hidden')).toStrictEqual(true);
-    });
-
-    it('should clear the input value', () => {
-      inputDom.value = 'testing clear button';
-      new ClearableInput(baseDom).init();
-      simulateEvent('mousedown', clearBtnDom);
-      expect(inputDom.value).toStrictEqual('');
-    });
-  });
-
-  describe('on input keystroke', () => {
-    it('should show the clear button, if value present', () => {
-      new ClearableInput(baseDom).init();
-
-      simulateEvent('keyup', inputDom, { key: 'a' });
-      expect(clearBtnDom.classList.contains('u-hidden')).toStrictEqual(false);
-    });
-
-    it('should hide the clear button, if value not present', () => {
-      new ClearableInput(baseDom).init();
-
-      simulateEvent('keyup', inputDom, { key: 'a' });
-      expect(clearBtnDom.classList.contains('u-hidden')).toStrictEqual(false);
-      simulateEvent('keyup', inputDom, { key: 'Backspace' });
-      expect(clearBtnDom.classList.contains('u-hidden')).toStrictEqual(true);
-    });
-  });
-});
diff --git a/test/unit_tests/apps/teachers-digital-platform/js/search-spec.js b/test/unit_tests/apps/teachers-digital-platform/js/search-spec.js
index 739c6b34190..30c4a8f4725 100644
--- a/test/unit_tests/apps/teachers-digital-platform/js/search-spec.js
+++ b/test/unit_tests/apps/teachers-digital-platform/js/search-spec.js
@@ -6,18 +6,23 @@ import { init as searchInit } from '../../../../../cfgov/unprocessed/apps/teache
 
 const HTML_SNIPPET = `
   <form class="tdp-activity-search" id="search-form" action="." data-js-hook="behavior_submit-search">
-    <div class="input-contains-label">
-      <label for="search-text" class="input-contains-label__before input-contains-label__before--search">
-          <span class="u-visually-hidden">The term to search for</span>
-      </label>
-      <input id="search-text" type="text" autocomplete="off" class="a-text-input" name="q" placeholder="Enter your search term(s)" value="executive">
-      <label for="search-text" class="input-contains-label__after input-contains-label__after--clear u-hidden">Clear</label>
+    <div class="o-search-input">
+      <div class="o-search-input__input">
+          <label for="search-text" class="o-search-input__input-label" aria-label="Search for a term">
+            <svg xmlns="http://www.w3.org/2000/svg" class="cf-icon-svg cf-icon-svg--search" viewBox="0 0 15 19"><path d="M14.147 15.488a1.11 1.11 0 0 1-1.567 0l-3.395-3.395a5.575 5.575 0 1 1 1.568-1.568l3.394 3.395a1.11 1.11 0 0 1 0 1.568m-6.361-3.903a4.488 4.488 0 1 0-1.681.327 4.4 4.4 0 0 0 1.68-.327z"></path></svg>
+          </label>
+          <input type="search" id="search-text" name="q" value="executive" class="a-text-input a-text-input__full" placeholder="Enter your search term(s)" title="Enter your search term(s)" autocomplete="off" maxlength="75">
+          <button type="reset" onclick="document.getElementById('search-text').setAttribute('value','')" aria-label="Clear search" title="Clear search">
+            <svg xmlns="http://www.w3.org/2000/svg" class="cf-icon-svg cf-icon-svg--error" viewBox="0 0 12 19"><path d="M11.383 13.644A1.03 1.03 0 0 1 9.928 15.1L6 11.172 2.072 15.1a1.03 1.03 0 1 1-1.455-1.456l3.928-3.928L.617 5.79a1.03 1.03 0 1 1 1.455-1.456L6 8.261l3.928-3.928a1.03 1.03 0 0 1 1.455 1.456L7.455 9.716z"></path></svg>
+          </button>
+      </div>
+      <button class="a-btn" type="submit" aria-label="Search for term(s)">
+          Search
+      </button>
     </div>
-    <button class="a-btn">Search</button>
   </form>
 
-
-  <div id="tdp-search-facets-and-results" style="opacity: 1;">
+  <div id="tdp-search-facets-and-results">
 
   <form id="filter-form" action="." method="get" data-js-hook="behavior_change-filter">
     <input type="hidden" name="q" value="{% if search_query: %}{{ search_query }}{% endif %}">
diff --git a/test/unit_tests/apps/teachers-digital-platform/js/tdp-analytics-spec.js b/test/unit_tests/apps/teachers-digital-platform/js/tdp-analytics-spec.js
index 94f66c080d4..15b59b72489 100644
--- a/test/unit_tests/apps/teachers-digital-platform/js/tdp-analytics-spec.js
+++ b/test/unit_tests/apps/teachers-digital-platform/js/tdp-analytics-spec.js
@@ -13,7 +13,6 @@ const EMPTY_SEARCH_HTML = `
 `;
 
 const HTML_SNIPPET = `
-
   <form id="search-form" action="." data-js-hook="behavior_submit-search">
     <input id="search-text" type="text" autocomplete="off" class="a-text-input" name="q" placeholder="Enter your search term(s)" value="executive">
     <button class="a-btn">Search</button>