diff --git a/hassio/src/addon-store/hassio-addon-store.ts b/hassio/src/addon-store/hassio-addon-store.ts
index 2e071dc145..bff3331e6b 100644
--- a/hassio/src/addon-store/hassio-addon-store.ts
+++ b/hassio/src/addon-store/hassio-addon-store.ts
@@ -14,7 +14,7 @@ import memoizeOne from "memoize-one";
 import { atLeastVersion } from "../../../src/common/config/version";
 import { fireEvent } from "../../../src/common/dom/fire_event";
 import { navigate } from "../../../src/common/navigate";
-import "../../../src/common/search/search-input";
+import "../../../src/components/search-input";
 import { extractSearchParam } from "../../../src/common/url/search-params";
 import "../../../src/components/ha-button-menu";
 import "../../../src/components/ha-icon-button";
diff --git a/hassio/src/dialogs/hardware/dialog-hassio-hardware.ts b/hassio/src/dialogs/hardware/dialog-hassio-hardware.ts
index 4022305946..7bc8775558 100755
--- a/hassio/src/dialogs/hardware/dialog-hassio-hardware.ts
+++ b/hassio/src/dialogs/hardware/dialog-hassio-hardware.ts
@@ -3,7 +3,7 @@ import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
-import "../../../../src/common/search/search-input";
+import "../../../../src/components/search-input";
 import { stringCompare } from "../../../../src/common/string/compare";
 import "../../../../src/components/ha-dialog";
 import "../../../../src/components/ha-expansion-panel";
diff --git a/src/components/data-table/ha-data-table.ts b/src/components/data-table/ha-data-table.ts
index d199040c5c..d5741cafeb 100644
--- a/src/components/data-table/ha-data-table.ts
+++ b/src/components/data-table/ha-data-table.ts
@@ -21,7 +21,7 @@ import { styleMap } from "lit/directives/style-map";
 import memoizeOne from "memoize-one";
 import { restoreScroll } from "../../common/decorators/restore-scroll";
 import { fireEvent } from "../../common/dom/fire_event";
-import "../../common/search/search-input";
+import "../search-input";
 import { debounce } from "../../common/util/debounce";
 import { nextRender } from "../../common/util/render-status";
 import { haStyleScrollbar } from "../../resources/styles";
diff --git a/src/common/search/search-input.ts b/src/components/search-input.ts
similarity index 89%
rename from src/common/search/search-input.ts
rename to src/components/search-input.ts
index ae1d48811a..a4e7b04272 100644
--- a/src/common/search/search-input.ts
+++ b/src/components/search-input.ts
@@ -1,12 +1,12 @@
 import { mdiClose, mdiMagnify } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, query } from "lit/decorators";
-import "../../components/ha-icon-button";
-import "../../components/ha-svg-icon";
-import "../../components/ha-textfield";
-import type { HaTextField } from "../../components/ha-textfield";
-import { HomeAssistant } from "../../types";
-import { fireEvent } from "../dom/fire_event";
+import "./ha-icon-button";
+import "./ha-svg-icon";
+import "./ha-textfield";
+import type { HaTextField } from "./ha-textfield";
+import { HomeAssistant } from "../types";
+import { fireEvent } from "../common/dom/fire_event";
 
 @customElement("search-input")
 class SearchInput extends LitElement {
diff --git a/src/dialogs/config-flow/step-flow-pick-handler.ts b/src/dialogs/config-flow/step-flow-pick-handler.ts
index d40b8dad64..9f2a7e6740 100644
--- a/src/dialogs/config-flow/step-flow-pick-handler.ts
+++ b/src/dialogs/config-flow/step-flow-pick-handler.ts
@@ -15,7 +15,7 @@ import memoizeOne from "memoize-one";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
 import { fireEvent } from "../../common/dom/fire_event";
 import { navigate } from "../../common/navigate";
-import "../../common/search/search-input";
+import "../../components/search-input";
 import { caseInsensitiveStringCompare } from "../../common/string/compare";
 import { LocalizeFunc } from "../../common/translations/localize";
 import "../../components/ha-icon-next";
diff --git a/src/panels/config/integrations/ha-config-integrations.ts b/src/panels/config/integrations/ha-config-integrations.ts
index b8fb03c40d..f58a797a36 100644
--- a/src/panels/config/integrations/ha-config-integrations.ts
+++ b/src/panels/config/integrations/ha-config-integrations.ts
@@ -15,7 +15,7 @@ import { ifDefined } from "lit/directives/if-defined";
 import memoizeOne from "memoize-one";
 import type { HASSDomEvent } from "../../../common/dom/fire_event";
 import { navigate } from "../../../common/navigate";
-import "../../../common/search/search-input";
+import "../../../components/search-input";
 import { caseInsensitiveStringCompare } from "../../../common/string/compare";
 import type { LocalizeFunc } from "../../../common/translations/localize";
 import { extractSearchParam } from "../../../common/url/search-params";
diff --git a/src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts b/src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts
index 779df732af..677c853902 100644
--- a/src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts
+++ b/src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts
@@ -8,7 +8,7 @@ import {
   Node,
 } from "vis-network/peer/esm/vis-network";
 import { navigate } from "../../../../../common/navigate";
-import "../../../../../common/search/search-input";
+import "../../../../../components/search-input";
 import "../../../../../components/device/ha-device-picker";
 import "../../../../../components/ha-button-menu";
 import "../../../../../components/ha-checkbox";
diff --git a/src/panels/config/logs/ha-config-logs.ts b/src/panels/config/logs/ha-config-logs.ts
index 73df0631f5..ef179eee07 100644
--- a/src/panels/config/logs/ha-config-logs.ts
+++ b/src/panels/config/logs/ha-config-logs.ts
@@ -4,7 +4,7 @@ import "../../../layouts/hass-tabs-subpage";
 import { haStyle } from "../../../resources/styles";
 import { HomeAssistant, Route } from "../../../types";
 import { configSections } from "../ha-panel-config";
-import "../../../common/search/search-input";
+import "../../../components/search-input";
 import { extractSearchParam } from "../../../common/url/search-params";
 import "./error-log-card";
 import "./system-log-card";
diff --git a/src/panels/developer-tools/state/developer-tools-state.js b/src/panels/developer-tools/state/developer-tools-state.js
index 8196bbe7eb..f4069c9824 100644
--- a/src/panels/developer-tools/state/developer-tools-state.js
+++ b/src/panels/developer-tools/state/developer-tools-state.js
@@ -18,6 +18,7 @@ import "../../../components/ha-code-editor";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-svg-icon";
 import "../../../components/ha-checkbox";
+import "../../../components/search-input";
 import "../../../components/ha-expansion-panel";
 import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
 import { EventsMixin } from "../../../mixins/events-mixin";
@@ -85,7 +86,8 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
           padding: 0;
         }
 
-        .filters ha-textfield {
+        .filters search-input {
+          display: block;
           --mdc-text-field-fill-color: transparent;
         }
 
@@ -252,28 +254,27 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
           </tr>
           <tr class="filters">
             <th>
-              <ha-textfield
+              <search-input
                 label="[[localize('ui.panel.developer-tools.tabs.states.filter_entities')]]"
-                type="search"
                 value="[[_entityFilter]]"
-                on-input="_entityFilterChanged"
-              ></ha-textfield>
+                on-value-changed="_entityFilterChanged"
+              ></search-input>
             </th>
             <th>
-              <ha-textfield
+              <search-input
                 label="[[localize('ui.panel.developer-tools.tabs.states.filter_states')]]"
                 type="search"
                 value="[[_stateFilter]]"
-                on-input="_stateFilterChanged"
-              ></ha-textfield>
+                on-value-changed="_stateFilterChanged"
+              ></search-input>
             </th>
             <th hidden$="[[!computeShowAttributes(narrow, _showAttributes)]]">
-              <ha-textfield
+              <search-input
                 label="[[localize('ui.panel.developer-tools.tabs.states.filter_attributes')]]"
                 type="search"
                 value="[[_attributeFilter]]"
-                on-input="_attributeFilterChanged"
-              ></ha-textfield>
+                on-value-changed="_attributeFilterChanged"
+              ></search-input>
             </th>
           </tr>
           <tr hidden$="[[!computeShowEntitiesPlaceholder(_entities)]]">
@@ -440,15 +441,15 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
   }
 
   _entityFilterChanged(ev) {
-    this._entityFilter = ev.target.value;
+    this._entityFilter = ev.detail.value;
   }
 
   _stateFilterChanged(ev) {
-    this._stateFilter = ev.target.value;
+    this._stateFilter = ev.detail.value;
   }
 
   _attributeFilterChanged(ev) {
-    this._attributeFilter = ev.target.value;
+    this._attributeFilter = ev.detail.value;
   }
 
   _getHistoryURL(entityId, inputDate) {
diff --git a/src/panels/lovelace/editor/card-editor/hui-card-picker.ts b/src/panels/lovelace/editor/card-editor/hui-card-picker.ts
index b645eed467..049064281d 100644
--- a/src/panels/lovelace/editor/card-editor/hui-card-picker.ts
+++ b/src/panels/lovelace/editor/card-editor/hui-card-picker.ts
@@ -15,7 +15,7 @@ import { styleMap } from "lit/directives/style-map";
 import { until } from "lit/directives/until";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import "../../../../common/search/search-input";
+import "../../../../components/search-input";
 import "../../../../components/ha-circular-progress";
 import { UNAVAILABLE_STATES } from "../../../../data/entity";
 import type {