Migrate ha-textfields to ha-input in 24 files (#30298)

* migrate ha-textfields to ha-input in 24 files * Fix import path for ha-input and update attribute syntax in entity-preview-row
2026-04-02 00:27:49 +01:00 · 2026-03-25 10:28:10 +01:00
parent 79743c0afa
commit 6bdf1ccd8c
24 changed files with 286 additions and 301 deletions
--- a/src/components/ha-qr-scanner.ts
+++ b/src/components/ha-qr-scanner.ts
@@ -17,8 +17,8 @@ import "./ha-dropdown";
 import type { HaDropdownSelectEvent } from "./ha-dropdown";
 import "./ha-dropdown-item";
 import "./ha-spinner";
-import "./ha-textfield";
-import type { HaTextField } from "./ha-textfield";
+import "./input/ha-input";
+import type { HaInput } from "./input/ha-input";

 prepareZXingModule({
  overrides: {
@@ -64,7 +64,7 @@ class HaQrScanner extends LitElement {

  @query("#canvas-container", true) private _canvasContainer?: HTMLDivElement;

-  @query("ha-textfield") private _manualInput?: HaTextField;
+  @query("ha-input") private _manualInput?: HaInput;

  public disconnectedCallback(): void {
    super.disconnectedCallback();
@@ -153,13 +153,13 @@ class HaQrScanner extends LitElement {
          </ha-alert>
          <p>${this.hass.localize("ui.components.qr-scanner.manual_input")}</p>
          <div class="row">
-            <ha-textfield
+            <ha-input
              .label=${this.hass.localize(
                "ui.components.qr-scanner.enter_qr_code"
              )}
              @keyup=${this._manualKeyup}
              @paste=${this._manualPaste}
-            ></ha-textfield>
+            ></ha-input>
            <ha-button @click=${this._manualSubmit}>
              ${this.hass.localize("ui.common.submit")}
            </ha-button>
@@ -242,7 +242,7 @@ class HaQrScanner extends LitElement {

  private _manualKeyup(ev: KeyboardEvent) {
    if (ev.key === "Enter") {
-      this._qrCodeScanned((ev.target as HaTextField).value);
+      this._qrCodeScanned((ev.target as HaInput).value ?? "");
    }
  }

@@ -254,7 +254,7 @@ class HaQrScanner extends LitElement {
  }

  private _manualSubmit() {
-    this._qrCodeScanned(this._manualInput!.value);
+    this._qrCodeScanned(this._manualInput!.value ?? "");
  }

  private _handleDropdownSelect(ev: HaDropdownSelectEvent) {
@@ -382,7 +382,7 @@ class HaQrScanner extends LitElement {
      display: flex;
      align-items: center;
    }
-    ha-textfield {
+    ha-input {
      flex: 1;
      margin-right: 8px;
      margin-inline-end: 8px;
--- a/src/dialogs/config-flow/previews/entity-preview-row.ts
+++ b/src/dialogs/config-flow/previews/entity-preview-row.ts
@@ -16,6 +16,7 @@ import "../../../components/ha-humidifier-state";
 import "../../../components/ha-select";
 import "../../../components/ha-slider";
 import "../../../components/ha-time-input";
+import "../../../components/input/ha-input";
 import { isTiltOnly } from "../../../data/cover";
 import { isUnavailableState } from "../../../data/entity/entity";
 import type { ImageEntity } from "../../../data/image";
@@ -72,7 +73,7 @@ class EntityPreviewRow extends LitElement {
      min-width: 45px;
      text-align: end;
    }
-    ha-textfield {
+    ha-input {
      text-align: end;
      direction: ltr !important;
    }
@@ -273,18 +274,23 @@ class EntityPreviewRow extends LitElement {
                </span>
              </div>
            `
-          : html` <div class="numberflex numberstate">
-              <ha-textfield
-                autoValidate
+          : html`<div class="numberflex numberstate">
+              <ha-input
+                auto-validate
                .disabled=${isUnavailableState(stateObj.state)}
                pattern="[0-9]+([\\.][0-9]+)?"
                .step=${Number(stateObj.attributes.step)}
                .min=${Number(stateObj.attributes.min)}
                .max=${Number(stateObj.attributes.max)}
                .value=${stateObj.state}
-                .suffix=${stateObj.attributes.unit_of_measurement}
                type="number"
-              ></ha-textfield>
+              >
+                ${stateObj.attributes.unit_of_measurement
+                  ? html`<span slot="end"
+                      >${stateObj.attributes.unit_of_measurement}</span
+                    >`
+                  : nothing}
+              </ha-input>
            </div>`}
      `;
    }
@@ -323,7 +329,7 @@ class EntityPreviewRow extends LitElement {

    if (domain === "text") {
      return html`
-        <ha-textfield
+        <ha-input
          .label=${computeStateName(stateObj)}
          .disabled=${isUnavailableState(stateObj.state)}
          .value=${stateObj.state}
@@ -333,7 +339,7 @@ class EntityPreviewRow extends LitElement {
          .pattern=${stateObj.attributes.pattern}
          .type=${stateObj.attributes.mode}
          placeholder=${this.hass!.localize("ui.card.text.emtpy_value")}
-        ></ha-textfield>
+        ></ha-input>
      `;
    }

--- a/src/dialogs/config-flow/step-flow-create-entry.ts
+++ b/src/dialogs/config-flow/step-flow-create-entry.ts
@@ -11,6 +11,8 @@ import { computeDomain } from "../../common/entity/compute_domain";
 import { navigate } from "../../common/navigate";
 import "../../components/ha-area-picker";
 import "../../components/ha-button";
+import "../../components/input/ha-input";
+import type { HaInput } from "../../components/input/ha-input";
 import { assistSatelliteSupportsSetupFlow } from "../../data/assist_satellite";
 import { getConfigEntries } from "../../data/config_entries";
 import type { DataEntryFlowStepCreateEntry } from "../../data/data_entry_flow";
@@ -22,7 +24,7 @@ import {
  type EntityRegistryDisplayEntry,
 } from "../../data/entity/entity_registry";
 import { domainToName } from "../../data/integration";
-import type { HomeAssistant } from "../../types";
+import type { HomeAssistant, ValueChangedEvent } from "../../types";
 import { brandsUrl } from "../../util/brands-url";
 import { showAlertDialog } from "../generic/show-dialog-box";
 import { showVoiceAssistantSetupDialog } from "../voice-assistant-setup/show-voice-assistant-setup-dialog";
@@ -162,7 +164,7 @@ class StepFlowCreateEntry extends LitElement {
                              : nothing}
                          </div>
                        </div>
-                        <ha-textfield
+                        <ha-input
                          .label=${localize(
                            "ui.panel.config.integrations.config_flow.device_name"
                          )}
@@ -174,7 +176,7 @@ class StepFlowCreateEntry extends LitElement {
                          computeDeviceName(device)}
                          @change=${this._deviceNameChanged}
                          .device=${device.id}
-                        ></ha-textfield>
+                        ></ha-input>
                        <ha-area-picker
                          .hass=${this.hass}
                          .device=${device.id}
@@ -278,7 +280,7 @@ class StepFlowCreateEntry extends LitElement {
    }
  }

-  private async _areaPicked(ev: CustomEvent) {
+  private async _areaPicked(ev: ValueChangedEvent<string>) {
    const picker = ev.currentTarget as any;
    const device = picker.device;
    const area = ev.detail.value;
@@ -290,9 +292,9 @@ class StepFlowCreateEntry extends LitElement {
    this.requestUpdate("_deviceUpdate");
  }

-  private _deviceNameChanged(ev): void {
-    const picker = ev.currentTarget as any;
-    const device = picker.device;
+  private _deviceNameChanged(ev: InputEvent): void {
+    const picker = ev.currentTarget as HaInput;
+    const device = (picker as any).device;
    const name = picker.value;

    if (!(device in this._deviceUpdate)) {
@@ -343,12 +345,11 @@ class StepFlowCreateEntry extends LitElement {
        .secondary {
          color: var(--secondary-text-color);
        }
-        ha-textfield,
        ha-area-picker {
          display: block;
        }
-        ha-textfield {
-          margin: 8px 0;
+        ha-input {
+          margin: var(--ha-space-2) 0;
        }
        .buttons > *:last-child {
          margin-left: auto;
--- a/src/dialogs/enter-code/dialog-enter-code.ts
+++ b/src/dialogs/enter-code/dialog-enter-code.ts
@@ -5,10 +5,10 @@ import { ifDefined } from "lit/directives/if-defined";
 import { fireEvent } from "../../common/dom/fire_event";
 import "../../components/ha-button";
 import "../../components/ha-control-button";
-import "../../components/ha-dialog-footer";
-import "../../components/ha-textfield";
 import "../../components/ha-dialog";
-import type { HaTextField } from "../../components/ha-textfield";
+import "../../components/ha-dialog-footer";
+import "../../components/input/ha-input";
+import type { HaInput } from "../../components/input/ha-input";
 import type { HomeAssistant } from "../../types";
 import type { HassDialog } from "../make-dialog-manager";
 import type { EnterCodeDialogParams } from "./show-enter-code-dialog";
@@ -39,7 +39,7 @@ export class DialogEnterCode

  @state() private _open = false;

-  @query("#code") private _input?: HaTextField;
+  @query("#code") private _input?: HaInput;

  @state() private _showClearButton = false;

@@ -97,7 +97,7 @@ export class DialogEnterCode
  }

  private _inputValueChange(e) {
-    const field = e.currentTarget as HaTextField;
+    const field = e.currentTarget as HaInput;
    const val = field.value;
    this._showClearButton = !!val;
  }
@@ -119,7 +119,7 @@ export class DialogEnterCode
          width="small"
          @closed=${this._dialogClosed}
        >
-          <ha-textfield
+          <ha-input
            class="input"
            ?autofocus=${!this._narrow}
            id="code"
@@ -129,7 +129,7 @@ export class DialogEnterCode
            validateOnInitialRender
            pattern=${ifDefined(this._dialogParams.codePattern)}
            inputmode="text"
-          ></ha-textfield>
+          ></ha-input>
          <ha-dialog-footer slot="footer">
            <ha-button
              slot="secondaryAction"
@@ -157,14 +157,15 @@ export class DialogEnterCode
        @closed=${this._dialogClosed}
      >
        <div class="container">
-          <ha-textfield
+          <ha-input
            @input=${this._inputValueChange}
            id="code"
            .label=${this.hass.localize("ui.dialogs.enter_code.input_label")}
            type="password"
            inputmode="numeric"
            ?autofocus=${!this._narrow}
-          ></ha-textfield>
+            password-toggle
+          ></ha-input>
          <div class="keypad">
            ${BUTTONS.map((value) =>
              value === ""
@@ -212,7 +213,7 @@ export class DialogEnterCode
      /* Place above other dialogs */
      --dialog-z-index: 104;
    }
-    ha-textfield {
+    ha-input {
      width: 100%;
      margin: auto;
    }
--- a/src/dialogs/generic/dialog-box.ts
+++ b/src/dialogs/generic/dialog-box.ts
@@ -5,12 +5,12 @@ import { classMap } from "lit/directives/class-map";
 import { ifDefined } from "lit/directives/if-defined";
 import { fireEvent } from "../../common/dom/fire_event";
 import "../../components/ha-button";
+import "../../components/ha-dialog";
 import "../../components/ha-dialog-footer";
 import "../../components/ha-dialog-header";
 import "../../components/ha-svg-icon";
-import "../../components/ha-textfield";
-import type { HaTextField } from "../../components/ha-textfield";
-import "../../components/ha-dialog";
+import "../../components/input/ha-input";
+import type { HaInput } from "../../components/input/ha-input";
 import type { HomeAssistant } from "../../types";
 import type { DialogBoxParams } from "./show-dialog-box";

@@ -28,7 +28,7 @@ class DialogBox extends LitElement {

  @state() private _validInput = true;

-  @query("ha-textfield") private _textField?: HaTextField;
+  @query("ha-input") private _textField?: HaInput;

  private _closePromise?: Promise<void>;

@@ -109,14 +109,13 @@ class DialogBox extends LitElement {
          ${this._params.text ? html` <p>${this._params.text}</p> ` : ""}
          ${this._params.prompt
            ? html`
-                <ha-textfield
+                <ha-input
                  autofocus
                  value=${ifDefined(this._params.defaultValue)}
                  .placeholder=${this._params.placeholder}
                  .label=${this._params.inputLabel
                    ? this._params.inputLabel
                    : ""}
-                  .suffix=${this._params.inputSuffix}
                  .type=${this._params.inputType
                    ? this._params.inputType
                    : "text"}
@@ -124,9 +123,13 @@ class DialogBox extends LitElement {
                  .max=${this._params.inputMax}
                  .disabled=${this._loading}
                  @input=${this._validateInput}
-                ></ha-textfield>
+                >
+                  ${this._params.inputSuffix
+                    ? html`<span slot="end">${this._params.inputSuffix}</span>`
+                    : nothing}
+                </ha-input>
              `
-            : ""}
+            : nothing}
        </div>
        <ha-dialog-footer slot="footer">
          ${confirmPrompt
@@ -240,7 +243,7 @@ class DialogBox extends LitElement {
    .secondary {
      color: var(--secondary-text-color);
    }
-    ha-textfield {
+    ha-input {
      width: 100%;
    }
    .title.alert {
--- a/src/dialogs/more-info/components/siren/ha-more-info-siren-advanced-controls.ts
+++ b/src/dialogs/more-info/components/siren/ha-more-info-siren-advanced-controls.ts
@@ -7,13 +7,13 @@ import { fireEvent } from "../../../../common/dom/fire_event";
 import { supportsFeature } from "../../../../common/entity/supports-feature";
 import "../../../../components/ha-button";
 import "../../../../components/ha-control-button";
-import type { HaSelectSelectEvent } from "../../../../components/ha-select";
+import "../../../../components/ha-dialog";
 import "../../../../components/ha-dialog-footer";
 import "../../../../components/ha-icon-button";
 import "../../../../components/ha-list-item";
 import "../../../../components/ha-select";
-import "../../../../components/ha-textfield";
-import "../../../../components/ha-dialog";
+import type { HaSelectSelectEvent } from "../../../../components/ha-select";
+import "../../../../components/input/ha-input";
 import { SirenEntityFeature } from "../../../../data/siren";
 import { haStyle } from "../../../../resources/styles";
 import type { HomeAssistant } from "../../../../types";
@@ -95,27 +95,31 @@ class MoreInfoSirenAdvancedControls extends LitElement {
              : nothing}
            ${supportsVolume
              ? html`
-                  <ha-textfield
+                  <ha-input
                    type="number"
                    .label=${this.hass.localize("ui.components.siren.volume")}
-                    .suffix=${"%"}
-                    .value=${this._volume ? this._volume * 100 : undefined}
+                    .value=${this._volume ? `${this._volume * 100}` : undefined}
                    @change=${this._handleVolumeChange}
                    .min=${0}
                    .max=${100}
                    .step=${1}
-                  ></ha-textfield>
+                  >
+                    <span slot="end">%</span>
+                  </ha-input>
                `
              : nothing}
            ${supportsDuration
              ? html`
-                  <ha-textfield
+                  <ha-input
                    type="number"
                    .label=${this.hass.localize("ui.components.siren.duration")}
-                    .value=${this._duration}
-                    suffix="s"
+                    .value=${this._duration !== undefined
+                      ? this._duration.toString()
+                      : undefined}
                    @change=${this._handleDurationChange}
-                  ></ha-textfield>
+                  >
+                    <span slot="end">s</span>
+                  </ha-input>
                `
              : nothing}
          </div>
--- a/src/dialogs/more-info/controls/more-info-configurator.ts
+++ b/src/dialogs/more-info/controls/more-info-configurator.ts
@@ -4,7 +4,7 @@ import { customElement, property, state } from "lit/decorators";
 import "../../../components/ha-alert";
 import "../../../components/ha-button";
 import "../../../components/ha-markdown";
-import "../../../components/ha-textfield";
+import "../../../components/input/ha-input";
 import type { HomeAssistant } from "../../../types";

@customElement("more-info-configurator")
@@ -33,15 +33,15 @@ export class MoreInfoConfigurator extends LitElement {
          ? html`<ha-alert alert-type="error">
              ${this.stateObj.attributes.errors}
            </ha-alert>`
-          : ""}
+          : nothing}
        ${this.stateObj.attributes.fields.map(
          (field) =>
-            html`<ha-textfield
+            html`<ha-input
              .label=${field.name}
              .name=${field.id}
              .type=${field.type}
              @change=${this._fieldChanged}
-            ></ha-textfield>`
+            ></ha-input>`
        )}
        ${this.stateObj.attributes.submit_caption
          ? html`<p class="submit">
@@ -53,7 +53,7 @@ export class MoreInfoConfigurator extends LitElement {
                ${this.stateObj.attributes.submit_caption}
              </ha-button>
            </p>`
-          : ""}
+          : nothing}
      </div>
    `;
  }
--- a/src/dialogs/voice-assistant-setup/voice-assistant-setup-step-success.ts
+++ b/src/dialogs/voice-assistant-setup/voice-assistant-setup-step-success.ts
@@ -4,13 +4,14 @@ import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import { stopPropagation } from "../../common/dom/stop_propagation";
-import type { HaSelectSelectEvent } from "../../components/ha-select";
 import {
  computeDeviceName,
  computeDeviceNameDisplay,
 } from "../../common/entity/compute_device_name";
 import "../../components/ha-select";
+import type { HaSelectSelectEvent } from "../../components/ha-select";
 import "../../components/ha-tts-voice-picker";
+import "../../components/input/ha-input";
 import type { AssistPipeline } from "../../data/assist_pipeline";
 import {
  listAssistPipelines,
@@ -99,14 +100,14 @@ export class HaVoiceAssistantSetupStepSuccess extends LitElement {
          : nothing}
        <div class="rows">
          <div class="row">
-            <ha-textfield
+            <ha-input
              .label=${this.hass.localize(
                "ui.panel.config.integrations.config_flow.device_name"
              )}
              .placeholder=${computeDeviceNameDisplay(device, this.hass)}
              .value=${this._deviceName ?? computeDeviceName(device)}
              @change=${this._deviceNameChanged}
-            ></ha-textfield>
+            ></ha-input>
          </div>
          ${this.assistConfiguration &&
          this.assistConfiguration.available_wake_words.length > 1
--- a/src/onboarding/onboarding-location.ts
+++ b/src/onboarding/onboarding-location.ts
@@ -16,8 +16,8 @@ import "../components/ha-list";
 import "../components/ha-list-item";
 import "../components/ha-radio";
 import "../components/ha-spinner";
-import "../components/ha-textfield";
-import type { HaTextField } from "../components/ha-textfield";
+import "../components/input/ha-input";
+import type { HaInput } from "../components/input/ha-input";
 import "../components/map/ha-locations-editor";
 import type {
  HaLocationsEditor,
@@ -103,22 +103,20 @@ class OnboardingLocation extends LitElement {
      </p>

      <div class="location-search">
-        <ha-textfield
+        <ha-input
          label=${this.onboardingLocalize(
            "ui.panel.page-onboarding.core-config.address_label"
          )}
          .disabled=${this._working}
-          icon
-          iconTrailing
          @keyup=${this._addressSearch}
        >
-          <ha-svg-icon slot="leadingIcon" .path=${mdiMagnify}></ha-svg-icon>
+          <ha-svg-icon slot="start" .path=${mdiMagnify}></ha-svg-icon>
          ${this._working
-            ? html` <ha-spinner slot="trailingIcon" size="small"></ha-spinner> `
+            ? html`<ha-spinner slot="end" size="small"></ha-spinner>`
            : html`
                <ha-icon-button
                  @click=${this._handleButtonClick}
-                  slot="trailingIcon"
+                  slot="end"
                  .disabled=${this._working}
                  .label=${this.onboardingLocalize(
                    this._search
@@ -128,7 +126,7 @@ class OnboardingLocation extends LitElement {
                  .path=${this._search ? mdiMapSearchOutline : mdiCrosshairsGps}
                ></ha-icon-button>
              `}
-        </ha-textfield>
+        </ha-input>
        ${this._places !== undefined
          ? html`
              <ha-list activatable>
@@ -204,10 +202,7 @@ class OnboardingLocation extends LitElement {

  protected firstUpdated(changedProps) {
    super.firstUpdated(changedProps);
-    setTimeout(
-      () => this.renderRoot.querySelector("ha-textfield")!.focus(),
-      100
-    );
+    setTimeout(() => this.renderRoot.querySelector("ha-input")!.focus(), 100);
    this.addEventListener("keyup", (ev) => {
      if (ev.key === "Enter") {
        this._save(ev);
@@ -299,11 +294,11 @@ class OnboardingLocation extends LitElement {

  private async _addressSearch(ev: KeyboardEvent) {
    ev.stopPropagation();
-    this._search = (ev.currentTarget as HaTextField).value.length > 0;
+    this._search = ((ev.currentTarget as HaInput).value ?? "").length > 0;
    if (ev.key !== "Enter") {
      return;
    }
-    this._searchAddress((ev.currentTarget as HaTextField).value);
+    this._searchAddress((ev.currentTarget as HaInput).value ?? "");
  }

  private async _searchAddress(address: string) {
@@ -477,28 +472,6 @@ class OnboardingLocation extends LitElement {
          margin-top: 32px;
          margin-bottom: 32px;
        }
-        ha-textfield {
-          display: block;
-        }
-        ha-textfield > ha-icon-button {
-          position: absolute;
-          top: 10px;
-          right: 10px;
-          inset-inline-end: 10px;
-          inset-inline-start: initial;
-          --ha-icon-button-size: 36px;
-          --mdc-icon-size: 20px;
-          color: var(--secondary-text-color);
-          inset-inline-start: initial;
-          inset-inline-end: 10px;
-          direction: var(--direction);
-        }
-        ha-textfield > ha-spinner {
-          position: relative;
-          left: 12px;
-          inset-inline-start: 12px;
-          inset-inline-end: initial;
-        }
        ha-locations-editor {
          display: block;
          height: 300px;
@@ -519,7 +492,7 @@ class OnboardingLocation extends LitElement {
          height: 72px;
        }
        .attribution {
-          /* textfield helper style */
+          /* input helper style */
          margin: 0;
          padding: 4px 16px 12px 16px;
          color: var(--mdc-text-field-label-ink-color, rgba(0, 0, 0, 0.6));
--- a/src/panels/calendar/dialog-calendar-event-editor.ts
+++ b/src/panels/calendar/dialog-calendar-event-editor.ts
@@ -10,6 +10,11 @@ import type { CSSResultGroup } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
+import {
+  formatDate,
+  formatTime,
+  parseDate,
+} from "../../common/datetime/calc_date";
 import { resolveTimeZone } from "../../common/datetime/resolve-time-zone";
 import { fireEvent } from "../../common/dom/fire_event";
 import { computeStateDomain } from "../../common/entity/compute_state_domain";
@@ -19,13 +24,13 @@ import "../../components/entity/ha-entity-picker";
 import "../../components/ha-alert";
 import "../../components/ha-button";
 import "../../components/ha-date-input";
+import "../../components/ha-dialog";
 import "../../components/ha-dialog-footer";
 import "../../components/ha-formfield";
 import "../../components/ha-switch";
 import "../../components/ha-textarea";
-import "../../components/ha-textfield";
 import "../../components/ha-time-input";
-import "../../components/ha-dialog";
+import "../../components/input/ha-input";
 import type { CalendarEventMutableParams } from "../../data/calendar";
 import {
  CalendarEntityFeature,
@@ -40,11 +45,6 @@ import "../lovelace/components/hui-generic-entity-row";
 import "./ha-recurrence-rule-editor";
 import { showConfirmEventDialog } from "./show-confirm-event-dialog-box";
 import type { CalendarEventEditDialogParams } from "./show-dialog-calendar-event-editor";
-import {
-  formatDate,
-  formatTime,
-  parseDate,
-} from "../../common/datetime/calc_date";

 const CALENDAR_DOMAINS = ["calendar"];

@@ -170,7 +170,7 @@ class DialogCalendarEventEditor extends LitElement {
              >`
            : ""}

-          <ha-textfield
+          <ha-input
            class="summary"
            name="summary"
            .label=${this.hass.localize("ui.components.calendar.event.summary")}
@@ -179,8 +179,8 @@ class DialogCalendarEventEditor extends LitElement {
            @input=${this._handleSummaryChanged}
            .validationMessage=${this.hass.localize("ui.common.error_required")}
            autofocus
-          ></ha-textfield>
-          <ha-textfield
+          ></ha-input>
+          <ha-input
            class="location"
            name="location"
            .label=${this.hass.localize(
@@ -188,7 +188,7 @@ class DialogCalendarEventEditor extends LitElement {
            )}
            .value=${this._location}
            @change=${this._handleLocationChanged}
-          ></ha-textfield>
+          ></ha-input>
          <ha-textarea
            class="description"
            name="description"
@@ -624,7 +624,6 @@ class DialogCalendarEventEditor extends LitElement {
          display: block;
          margin-bottom: 16px;
        }
-        ha-textfield,
        ha-textarea {
          display: block;
        }
--- a/src/panels/calendar/ha-recurrence-rule-editor.ts
+++ b/src/panels/calendar/ha-recurrence-rule-editor.ts
@@ -12,7 +12,7 @@ import "../../components/chips/ha-filter-chip";
 import "../../components/ha-date-input";
 import "../../components/ha-select";
 import type { HaSelectSelectEvent } from "../../components/ha-select";
-import "../../components/ha-textfield";
+import "../../components/input/ha-input";
 import type { HomeAssistant } from "../../types";
 import type {
  MonthlyRepeatItem,
@@ -231,7 +231,7 @@ export class RecurrenceRuleEditor extends LitElement {

  renderInterval() {
    return html`
-      <ha-textfield
+      <ha-input
        id="interval"
        label=${this.hass.localize(
          "ui.components.calendar.event.repeat.interval.label"
@@ -239,12 +239,15 @@ export class RecurrenceRuleEditor extends LitElement {
        type="number"
        min="1"
        .value=${this._interval}
-        .suffix=${this.hass.localize(
-          `ui.components.calendar.event.repeat.interval.${this
-            ._freq!}` as LocalizeKeys
-        )}
        @change=${this._onIntervalChange}
-      ></ha-textfield>
+      >
+        <span slot="end">
+          ${this.hass.localize(
+            `ui.components.calendar.event.repeat.interval.${this
+              ._freq!}` as LocalizeKeys
+          )}
+        </span>
+      </ha-input>
    `;
  }

@@ -267,7 +270,7 @@ export class RecurrenceRuleEditor extends LitElement {
      </ha-select>
      ${this._end === "after"
        ? html`
-            <ha-textfield
+            <ha-input
              id="after"
              label=${this.hass.localize(
                "ui.components.calendar.event.repeat.end_after.label"
@@ -275,11 +278,14 @@ export class RecurrenceRuleEditor extends LitElement {
              type="number"
              min="1"
              .value=${this._count!}
-              suffix=${this.hass.localize(
-                "ui.components.calendar.event.repeat.end_after.ocurrences"
-              )}
              @change=${this._onCountChange}
-            ></ha-textfield>
+            >
+              <span slot="end">
+                ${this.hass.localize(
+                  "ui.components.calendar.event.repeat.end_after.ocurrences"
+                )}
+              </span>
+            </ha-input>
          `
        : nothing}
      ${this._end === "on"
@@ -452,15 +458,16 @@ export class RecurrenceRuleEditor extends LitElement {
  }

  static styles = css`
-    ha-textfield,
+    ha-input,
    ha-select {
      display: block;
      margin-bottom: 16px;
+      --ha-input-padding-bottom: 0;
    }
    .weekdays {
      margin-bottom: 16px;
    }
-    ha-textfield:last-child,
+    ha-input:last-child,
    ha-select:last-child,
    .weekdays:last-child {
      margin-bottom: 0;
--- a/src/panels/config/areas/dialog-area-registry-detail.ts
+++ b/src/panels/config/areas/dialog-area-registry-detail.ts
@@ -8,6 +8,7 @@ import type { HaEntityPicker } from "../../../components/entity/ha-entity-picker
 import "../../../components/ha-alert";
 import "../../../components/ha-aliases-editor";
 import "../../../components/ha-button";
+import "../../../components/ha-dialog";
 import "../../../components/ha-dialog-footer";
 import "../../../components/ha-expansion-panel";
 import "../../../components/ha-floor-picker";
@@ -18,8 +19,8 @@ import type { HaPictureUpload } from "../../../components/ha-picture-upload";
 import "../../../components/ha-settings-row";
 import "../../../components/ha-suggest-with-ai-button";
 import type { SuggestWithAIGenerateTask } from "../../../components/ha-suggest-with-ai-button";
-import "../../../components/ha-textfield";
-import "../../../components/ha-dialog";
+import "../../../components/input/ha-input";
+import type { HaInput } from "../../../components/input/ha-input";
 import type { GenDataTaskResult } from "../../../data/ai_task";
 import type {
  AreaRegistryEntry,
@@ -30,9 +31,9 @@ import {
  SENSOR_DEVICE_CLASS_HUMIDITY,
  SENSOR_DEVICE_CLASS_TEMPERATURE,
 } from "../../../data/sensor";
-import type { HassDialog } from "../../../dialogs/make-dialog-manager";
 import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box";
 import type { CropOptions } from "../../../dialogs/image-cropper-dialog/show-image-cropper-dialog";
+import type { HassDialog } from "../../../dialogs/make-dialog-manager";
 import { haStyleDialog } from "../../../resources/styles";
 import type { HomeAssistant, ValueChangedEvent } from "../../../types";
 import {
@@ -144,7 +145,7 @@ class DialogAreaDetail
          `
        : nothing}

-      <ha-textfield
+      <ha-input
        autofocus
        .value=${this._name}
        @input=${this._nameChanged}
@@ -152,8 +153,9 @@ class DialogAreaDetail
        .validationMessage=${this.hass.localize(
          "ui.panel.config.areas.editor.name_required"
        )}
+        auto-validate
        required
-      ></ha-textfield>
+      ></ha-input>

      <ha-icon-picker
        .hass=${this.hass}
@@ -416,9 +418,9 @@ class DialogAreaDetail
    return deviceReg && deviceReg.area_id === areaId;
  };

-  private _nameChanged(ev) {
+  private _nameChanged(ev: InputEvent) {
    this._error = undefined;
-    this._name = ev.target.value;
+    this._name = (ev.target as HaInput).value ?? "";
  }

  private _floorChanged(ev) {
@@ -509,9 +511,6 @@ class DialogAreaDetail
    return [
      haStyleDialog,
      css`
-        ha-textfield {
-          display: block;
-        }
        ha-expansion-panel {
          --expansion-panel-content-padding: 0;
        }
--- a/src/panels/config/areas/dialog-floor-registry-detail.ts
+++ b/src/panels/config/areas/dialog-floor-registry-detail.ts
@@ -11,13 +11,14 @@ import "../../../components/ha-alert";
 import "../../../components/ha-aliases-editor";
 import "../../../components/ha-area-picker";
 import "../../../components/ha-button";
+import "../../../components/ha-dialog";
 import "../../../components/ha-dialog-footer";
 import "../../../components/ha-floor-icon";
 import "../../../components/ha-icon-picker";
 import "../../../components/ha-settings-row";
 import "../../../components/ha-svg-icon";
-import "../../../components/ha-textfield";
-import "../../../components/ha-dialog";
+import "../../../components/input/ha-input";
+import type { HaInput } from "../../../components/input/ha-input";
 import { updateAreaRegistryEntry } from "../../../data/area/area_registry";
 import type {
  FloorRegistryEntry,
@@ -133,7 +134,7 @@ class DialogFloorDetail extends LitElement {
                `
              : nothing}

-            <ha-textfield
+            <ha-input
              autofocus
              .value=${this._name}
              @input=${this._nameChanged}
@@ -142,20 +143,20 @@ class DialogFloorDetail extends LitElement {
                "ui.panel.config.floors.editor.name_required"
              )}
              required
-            ></ha-textfield>
+              auto-validate
+            ></ha-input>

-            <ha-textfield
+            <ha-input
              .value=${this._level}
              @input=${this._levelChanged}
              .label=${this.hass.localize(
                "ui.panel.config.floors.editor.level"
              )}
              type="number"
-              .helper=${this.hass.localize(
+              .hint=${this.hass.localize(
                "ui.panel.config.floors.editor.level_helper"
              )}
-              helperPersistent
-            ></ha-textfield>
+            ></ha-input>

            <ha-icon-picker
              .hass=${this.hass}
@@ -293,14 +294,17 @@ class DialogFloorDetail extends LitElement {
    this._addedAreas = new Set(this._addedAreas);
  }

-  private _nameChanged(ev) {
+  private _nameChanged(ev: InputEvent) {
    this._error = undefined;
-    this._name = ev.target.value;
+    this._name = (ev.target as HaInput).value ?? "";
  }

-  private _levelChanged(ev) {
+  private _levelChanged(ev: InputEvent) {
    this._error = undefined;
-    this._level = ev.target.value === "" ? null : Number(ev.target.value);
+    this._level =
+      (ev.target as HaInput).value === ""
+        ? null
+        : Number((ev.target as HaInput).value);
  }

  private _iconChanged(ev) {
@@ -355,9 +359,8 @@ class DialogFloorDetail extends LitElement {
      haStyle,
      haStyleDialog,
      css`
-        ha-textfield {
-          display: block;
-          margin-bottom: var(--ha-space-4);
+        ha-input {
+          --ha-input-padding-bottom: var(--ha-space-4);
        }
        ha-floor-icon {
          color: var(--secondary-text-color);
--- a/src/panels/config/automation/action/types/ha-automation-action-event.ts
+++ b/src/panels/config/automation/action/types/ha-automation-action-event.ts
@@ -1,12 +1,13 @@
 import type { PropertyValues } from "lit";
-import { css, html, LitElement } from "lit";
+import { html, LitElement } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import "../../../../../components/entity/ha-entity-picker";
 import "../../../../../components/ha-service-picker";
-import "../../../../../components/ha-textfield";
 import "../../../../../components/ha-yaml-editor";
 import type { HaYamlEditor } from "../../../../../components/ha-yaml-editor";
+import "../../../../../components/input/ha-input";
+import type { HaInput } from "../../../../../components/input/ha-input";
 import type { EventAction } from "../../../../../data/script";
 import type { HomeAssistant } from "../../../../../types";
 import type { ActionElement } from "../ha-automation-action-row";
@@ -44,14 +45,14 @@ export class HaEventAction extends LitElement implements ActionElement {
    const { event, event_data } = this.action;

    return html`
-      <ha-textfield
+      <ha-input
        .label=${this.hass.localize(
          "ui.panel.config.automation.editor.actions.type.event.event"
        )}
        .value=${event}
        .disabled=${this.disabled}
        @change=${this._eventChanged}
-      ></ha-textfield>
+      ></ha-input>
      <ha-yaml-editor
        .hass=${this.hass}
        .label=${this.hass.localize(
@@ -74,18 +75,12 @@ export class HaEventAction extends LitElement implements ActionElement {
    handleChangeEvent(this, ev);
  }

-  private _eventChanged(ev: CustomEvent): void {
+  private _eventChanged(ev: InputEvent): void {
    ev.stopPropagation();
    fireEvent(this, "value-changed", {
-      value: { ...this.action, event: (ev.target as any).value },
+      value: { ...this.action, event: (ev.target as HaInput).value },
    });
  }
-
-  static styles = css`
-    ha-textfield {
-      display: block;
-    }
-  `;
 }

 declare global {
--- a/src/panels/config/automation/action/types/ha-automation-action-service.ts
+++ b/src/panels/config/automation/action/types/ha-automation-action-service.ts
@@ -5,6 +5,8 @@ import { assert } from "superstruct";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import { hasTemplate } from "../../../../../common/string/has-template";
 import "../../../../../components/ha-service-control";
+import "../../../../../components/input/ha-input";
+import type { HaInput } from "../../../../../components/input/ha-input";
 import type { ServiceAction } from "../../../../../data/script";
 import { serviceActionStruct } from "../../../../../data/script";
 import type { HomeAssistant } from "../../../../../types";
@@ -105,7 +107,7 @@ export class HaServiceAction extends LitElement implements ActionElement {
                    "ui.panel.config.automation.editor.actions.type.service.has_response"
                  )}
            </span>
-            <ha-textfield
+            <ha-input
              .value=${this._action.response_variable || ""}
              .required=${!this.hass.services[domain][service].response!
                .optional}
@@ -114,7 +116,7 @@ export class HaServiceAction extends LitElement implements ActionElement {
                !this._action.response_variable &&
                !this._responseChecked)}
              @change=${this._responseVariableChanged}
-            ></ha-textfield>
+            ></ha-input>
          </ha-settings-row>`
        : nothing}
    `;
@@ -143,9 +145,12 @@ export class HaServiceAction extends LitElement implements ActionElement {
    fireEvent(this, "value-changed", { value });
  }

-  private _responseVariableChanged(ev) {
-    const value = { ...this.action, response_variable: ev.target.value };
-    if (!ev.target.value) {
+  private _responseVariableChanged(ev: InputEvent) {
+    const value = {
+      ...this.action,
+      response_variable: (ev.target as HaInput).value,
+    };
+    if (!(ev.target as HaInput).value) {
      delete value.response_variable;
    }
    fireEvent(this, "value-changed", { value });
--- a/src/panels/config/automation/action/types/ha-automation-action-stop.ts
+++ b/src/panels/config/automation/action/types/ha-automation-action-stop.ts
@@ -1,21 +1,25 @@
+import { consume, type ContextType } from "@lit/context";
 import { css, html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
-import "../../../../../components/ha-textfield";
 import "../../../../../components/ha-formfield";
 import "../../../../../components/ha-switch";
+import "../../../../../components/input/ha-input";
+import type { HaInput } from "../../../../../components/input/ha-input";
+import { localizeContext } from "../../../../../data/context";
 import type { StopAction } from "../../../../../data/script";
-import type { HomeAssistant } from "../../../../../types";
 import type { ActionElement } from "../ha-automation-action-row";

@customElement("ha-automation-action-stop")
 export class HaStopAction extends LitElement implements ActionElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
  @property({ attribute: false }) public action!: StopAction;

  @property({ type: Boolean }) public disabled = false;

+  @state()
+  @consume({ context: localizeContext, subscribe: true })
+  private localize!: ContextType<typeof localizeContext>;
+
  public static get defaultConfig(): StopAction {
    return { stop: "" };
  }
@@ -24,25 +28,25 @@ export class HaStopAction extends LitElement implements ActionElement {
    const { error, stop, response_variable } = this.action;

    return html`
-      <ha-textfield
-        .label=${this.hass.localize(
+      <ha-input
+        .label=${this.localize(
          "ui.panel.config.automation.editor.actions.type.stop.stop"
        )}
        .value=${stop}
        .disabled=${this.disabled}
        @change=${this._stopChanged}
-      ></ha-textfield>
-      <ha-textfield
-        .label=${this.hass.localize(
+      ></ha-input>
+      <ha-input
+        .label=${this.localize(
          "ui.panel.config.automation.editor.actions.type.stop.response_variable"
        )}
        .value=${response_variable || ""}
        .disabled=${this.disabled}
        @change=${this._responseChanged}
-      ></ha-textfield>
+      ></ha-input>
      <ha-formfield
        .disabled=${this.disabled}
-        .label=${this.hass.localize(
+        .label=${this.localize(
          "ui.panel.config.automation.editor.actions.type.stop.error"
        )}
      >
@@ -55,17 +59,17 @@ export class HaStopAction extends LitElement implements ActionElement {
    `;
  }

-  private _stopChanged(ev: Event) {
+  private _stopChanged(ev: InputEvent) {
    ev.stopPropagation();
    fireEvent(this, "value-changed", {
-      value: { ...this.action, stop: (ev.target as any).value },
+      value: { ...this.action, stop: (ev.target as HaInput).value },
    });
  }

-  private _responseChanged(ev: Event) {
+  private _responseChanged(ev: InputEvent) {
    ev.stopPropagation();
    const newAction = { ...this.action };
-    const newValue = (ev.target as any).value;
+    const newValue = (ev.target as HaInput).value;
    if (newValue) {
      newAction.response_variable = newValue;
    } else {
@@ -84,9 +88,8 @@ export class HaStopAction extends LitElement implements ActionElement {
  }

  static styles = css`
-    ha-textfield {
-      display: block;
-      margin-bottom: 24px;
+    ha-input {
+      margin-bottom: var(--ha-space-6);
    }
  `;
 }
--- a/src/panels/config/automation/automation-mode-dialog/dialog-automation-mode.ts
+++ b/src/panels/config/automation/automation-mode-dialog/dialog-automation-mode.ts
@@ -10,8 +10,9 @@ import "../../../../components/ha-icon-button";
 import "../../../../components/ha-md-list";
 import "../../../../components/ha-md-list-item";
 import "../../../../components/ha-radio";
-import "../../../../components/ha-textfield";
+import "../../../../components/input/ha-input";

+import type { HaInput } from "../../../../components/input/ha-input";
 import {
  AUTOMATION_DEFAULT_MAX,
  AUTOMATION_DEFAULT_MODE,
@@ -68,7 +69,6 @@ class DialogAutomationMode extends LitElement implements HassDialog {

    return html`
      <ha-dialog
-        .hass=${this.hass}
        .open=${this._open}
        header-title=${title}
        @closed=${this._dialogClosed}
@@ -133,7 +133,7 @@ class DialogAutomationMode extends LitElement implements HassDialog {
        ${isMaxMode(this._newMode)
          ? html`
              <div class="options">
-                <ha-textfield
+                <ha-input
                  .label=${this.hass.localize(
                    `ui.panel.config.automation.editor.max.${this._newMode}`
                  )}
@@ -141,9 +141,8 @@ class DialogAutomationMode extends LitElement implements HassDialog {
                  name="max"
                  .value=${this._newMax?.toString() ?? ""}
                  @input=${this._valueChanged}
-                  class="max"
                >
-                </ha-textfield>
+                </ha-input>
              </div>
            `
          : nothing}
@@ -176,9 +175,9 @@ class DialogAutomationMode extends LitElement implements HassDialog {
    }
  }

-  private _valueChanged(ev: CustomEvent) {
+  private _valueChanged(ev: InputEvent) {
    ev.stopPropagation();
-    const target = ev.target as any;
+    const target = ev.target as HaInput;
    if (target.name === "max") {
      this._newMax = Number(target.value);
    }
@@ -201,9 +200,6 @@ class DialogAutomationMode extends LitElement implements HassDialog {
      haStyle,
      haStyleDialog,
      css`
-        ha-textfield {
-          display: block;
-        }
        ha-dialog {
          --dialog-content-padding: 0;
        }
--- a/src/panels/config/automation/automation-save-dialog/dialog-automation-save.ts
+++ b/src/panels/config/automation/automation-save-dialog/dialog-automation-save.ts
@@ -7,6 +7,7 @@ import "../../../../components/chips/ha-assist-chip";
 import "../../../../components/chips/ha-chip-set";
 import "../../../../components/ha-alert";
 import "../../../../components/ha-area-picker";
+import "../../../../components/ha-dialog";
 import "../../../../components/ha-dialog-footer";
 import "../../../../components/ha-domain-icon";
 import "../../../../components/ha-expansion-panel";
@@ -16,8 +17,7 @@ import "../../../../components/ha-suggest-with-ai-button";
 import type { SuggestWithAIGenerateTask } from "../../../../components/ha-suggest-with-ai-button";
 import "../../../../components/ha-svg-icon";
 import "../../../../components/ha-textarea";
-import "../../../../components/ha-textfield";
-import "../../../../components/ha-dialog";
+import "../../../../components/input/ha-input";
 import "../../category/ha-category-picker";

 import { supportsMarkdownHelper } from "../../../../common/translations/markdown_support";
@@ -27,16 +27,16 @@ import type { ScriptConfig } from "../../../../data/script";
 import type { HassDialog } from "../../../../dialogs/make-dialog-manager";
 import { haStyle, haStyleDialog } from "../../../../resources/styles";
 import type { HomeAssistant } from "../../../../types";
-import type {
-  EntityRegistryUpdate,
-  SaveDialogParams,
-} from "./show-dialog-automation-save";
 import {
  type MetadataSuggestionResult,
  generateMetadataSuggestionTask,
  processMetadataSuggestion,
 } from "../../common/suggest-metadata-ai";
 import { buildEntityMetadataInspirations } from "../../common/suggest-metadata-inspirations";
+import type {
+  EntityRegistryUpdate,
+  SaveDialogParams,
+} from "./show-dialog-automation-save";

@customElement("ha-dialog-automation-save")
 class DialogAutomationSave extends LitElement implements HassDialog {
@@ -129,7 +129,7 @@ class DialogAutomationSave extends LitElement implements HassDialog {
    }

    return html`
-      <ha-textfield
+      <ha-input
        autofocus
        .value=${this._newName}
        .placeholder=${this.hass.localize(
@@ -137,15 +137,14 @@ class DialogAutomationSave extends LitElement implements HassDialog {
        )}
        .label=${this.hass.localize("ui.panel.config.automation.editor.alias")}
        required
-        type="string"
+        type="text"
        @input=${this._valueChanged}
-      ></ha-textfield>
+      ></ha-input>

      ${this._params.domain === "script" &&
      this._visibleOptionals.includes("icon")
        ? html`
            <ha-icon-picker
-              .hass=${this.hass}
              .label=${this.hass.localize(
                "ui.panel.config.automation.editor.icon"
              )}
@@ -256,14 +255,13 @@ class DialogAutomationSave extends LitElement implements HassDialog {

    return html`
      <ha-dialog
-        .hass=${this.hass}
        .open=${this._open}
        @closed=${this._dialogClosed}
        header-title=${this._params.title || title}
      >
        ${this._params.hideInputs
          ? nothing
-          : html` <ha-suggest-with-ai-button
+          : html`<ha-suggest-with-ai-button
              slot="headerActionItems"
              .hass=${this.hass}
              .generateTask=${this._generateTask}
@@ -441,7 +439,6 @@ class DialogAutomationSave extends LitElement implements HassDialog {
            var(--ha-space-6);
        }

-        ha-textfield,
        ha-textarea,
        ha-icon-picker,
        ha-category-picker,
--- a/src/panels/config/automation/trigger/ha-automation-trigger-editor.ts
+++ b/src/panels/config/automation/trigger/ha-automation-trigger-editor.ts
@@ -4,9 +4,9 @@ import { customElement, property, query } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { dynamicElement } from "../../../../common/dom/dynamic-element-directive";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import "../../../../components/ha-textfield";
 import "../../../../components/ha-yaml-editor";
 import type { HaYamlEditor } from "../../../../components/ha-yaml-editor";
+import "../../../../components/input/ha-input";
 import type { Trigger } from "../../../../data/automation";
 import { migrateAutomationTrigger } from "../../../../data/automation";
 import type { TriggerDescription } from "../../../../data/trigger";
@@ -80,14 +80,14 @@ export default class HaAutomationTriggerEditor extends LitElement {
          : html`
              ${showId && !isTriggerList(this.trigger)
                ? html`
-                    <ha-textfield
+                    <ha-input
                      .label=${this.hass.localize(
                        "ui.panel.config.automation.editor.triggers.id"
                      )}
                      .value=${this.trigger.id || ""}
                      .disabled=${this.disabled}
                      @change=${this._idChanged}
-                    ></ha-textfield>
+                    ></ha-input>
                  `
                : nothing}
              <div @value-changed=${this._onUiChanged}>
@@ -160,9 +160,8 @@ export default class HaAutomationTriggerEditor extends LitElement {
          border-top: 1px solid var(--divider-color);
          border-bottom: 1px solid var(--divider-color);
        }
-        ha-textfield {
-          display: block;
-          margin-bottom: 24px;
+        ha-input {
+          margin-bottom: var(--ha-space-3);
        }
      `,
    ];
--- a/src/panels/config/automation/trigger/types/ha-automation-trigger-conversation.ts
+++ b/src/panels/config/automation/trigger/types/ha-automation-trigger-conversation.ts
@@ -1,11 +1,12 @@
-import { mdiClose } from "@mdi/js";
+import "@home-assistant/webawesome/dist/components/divider/divider";
+import { mdiClose, mdiPlus } from "@mdi/js";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import { ensureArray } from "../../../../../common/array/ensure-array";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import "../../../../../components/ha-icon-button";
-import "../../../../../components/ha-textfield";
-import type { HaTextField } from "../../../../../components/ha-textfield";
+import "../../../../../components/input/ha-input";
+import type { HaInput } from "../../../../../components/input/ha-input";
 import type { ConversationTrigger } from "../../../../../data/automation";
 import { showConfirmationDialog } from "../../../../../dialogs/generic/show-dialog-box";
 import type { HomeAssistant } from "../../../../../types";
@@ -24,7 +25,7 @@ export class HaConversationTrigger

  @property({ type: Boolean }) public disabled = false;

-  @query("#option_input", true) private _optionInput?: HaTextField;
+  @query("#option_input", true) private _optionInput?: HaInput;

  public static get defaultConfig(): ConversationTrigger {
    return { trigger: "conversation", command: "" };
@@ -35,31 +36,31 @@ export class HaConversationTrigger
    const commands = command ? ensureArray(command) : [];

    return html`${commands.length
-        ? commands.map(
-            (option, index) => html`
-              <ha-textfield
-                class="option"
-                iconTrailing
-                .index=${index}
-                .value=${option}
-                .validationMessage=${this.hass.localize(
-                  "ui.panel.config.automation.editor.triggers.type.conversation.no_punctuation"
-                )}
-                autoValidate
-                validateOnInitialRender
-                pattern=${PATTERN}
-                @change=${this._updateOption}
-              >
-                <ha-icon-button
-                  @click=${this._removeOption}
-                  slot="trailingIcon"
-                  .path=${mdiClose}
-                ></ha-icon-button>
-              </ha-textfield>
-            `
-          )
+        ? html`${commands.map(
+              (option, index) => html`
+                <ha-input
+                  class="option"
+                  iconTrailing
+                  .index=${index}
+                  .value=${option}
+                  .validationMessage=${this.hass.localize(
+                    "ui.panel.config.automation.editor.triggers.type.conversation.no_punctuation"
+                  )}
+                  auto-validate
+                  validateOnInitialRender
+                  pattern=${PATTERN}
+                  @change=${this._updateOption}
+                >
+                  <ha-icon-button
+                    @click=${this._removeOption}
+                    slot="end"
+                    .path=${mdiClose}
+                  ></ha-icon-button>
+                </ha-input>
+              `
+            )} <wa-divider></wa-divider>`
        : nothing}
-      <ha-textfield
+      <ha-input
        class="flex-auto"
        id="option_input"
        .label=${this.hass.localize(
@@ -68,11 +69,17 @@ export class HaConversationTrigger
        .validationMessage=${this.hass.localize(
          "ui.panel.config.automation.editor.triggers.type.conversation.no_punctuation"
        )}
-        autoValidate
+        auto-validate
        pattern=${PATTERN}
        @keydown=${this._handleKeyAdd}
        @change=${this._addOption}
-      ></ha-textfield>`;
+      >
+        <ha-icon-button
+          @click=${this._addOption}
+          slot="end"
+          .path=${mdiPlus}
+        ></ha-icon-button>
+      </ha-input>`;
  }

  private _handleKeyAdd(ev: KeyboardEvent) {
@@ -104,14 +111,14 @@ export class HaConversationTrigger
    input.value = "";
  }

-  private async _updateOption(ev: Event) {
+  private async _updateOption(ev: InputEvent) {
    const index = (ev.target as any).index;
    const command = [
      ...(Array.isArray(this.trigger.command)
        ? this.trigger.command
        : [this.trigger.command]),
    ];
-    command.splice(index, 1, (ev.target as HaTextField).value);
+    command.splice(index, 1, (ev.target as HaInput).value ?? "");
    fireEvent(this, "value-changed", {
      value: { ...this.trigger, command },
    });
@@ -155,20 +162,8 @@ export class HaConversationTrigger
    .option {
      margin-top: 4px;
    }
-    ha-textfield {
-      display: block;
-      margin-bottom: 8px;
-      --textfield-icon-trailing-padding: 0;
-    }
-    ha-textfield > ha-icon-button {
-      position: relative;
-      right: -8px;
-      --ha-icon-button-size: 36px;
-      --mdc-icon-size: 20px;
-      color: var(--secondary-text-color);
-      inset-inline-start: initial;
-      inset-inline-end: -8px;
-      direction: var(--direction);
+    ha-input {
+      margin-bottom: var(--ha-space-1);
    }
    #option_input {
      margin-top: 8px;
@@ -177,6 +172,10 @@ export class HaConversationTrigger
      margin-top: 8px;
      margin-bottom: 8px;
    }
+    wa-divider {
+      margin-top: var(--ha-space-2);
+      margin-bottom: var(--ha-space-3);
+    }
  `;
 }

--- a/src/panels/config/automation/trigger/types/ha-automation-trigger-event.ts
+++ b/src/panels/config/automation/trigger/types/ha-automation-trigger-event.ts
@@ -1,8 +1,8 @@
-import { css, html, LitElement } from "lit";
+import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
-import "../../../../../components/ha-textfield";
 import "../../../../../components/ha-yaml-editor";
+import "../../../../../components/input/ha-input";
 import "../../../../../components/user/ha-users-picker";
 import type { EventTrigger } from "../../../../../data/automation";
 import type { HomeAssistant } from "../../../../../types";
@@ -24,7 +24,7 @@ export class HaEventTrigger extends LitElement implements TriggerElement {
  protected render() {
    const { event_type, event_data, context } = this.trigger;
    return html`
-      <ha-textfield
+      <ha-input
        .label=${this.hass.localize(
          "ui.panel.config.automation.editor.triggers.type.event.event_type"
        )}
@@ -32,7 +32,7 @@ export class HaEventTrigger extends LitElement implements TriggerElement {
        .value=${event_type}
        .disabled=${this.disabled}
        @change=${this._valueChanged}
-      ></ha-textfield>
+      ></ha-input>
      <ha-yaml-editor
        .hass=${this.hass}
        .label=${this.hass.localize(
@@ -94,12 +94,6 @@ export class HaEventTrigger extends LitElement implements TriggerElement {
      value,
    });
  }
-
-  static styles = css`
-    ha-textfield {
-      display: block;
-    }
-  `;
 }

 declare global {
--- a/src/panels/config/automation/trigger/types/ha-automation-trigger-webhook.ts
+++ b/src/panels/config/automation/trigger/types/ha-automation-trigger-webhook.ts
@@ -11,8 +11,8 @@ import "../../../../../components/ha-dropdown";
 import type { HaDropdownSelectEvent } from "../../../../../components/ha-dropdown";
 import "../../../../../components/ha-dropdown-item";
 import "../../../../../components/ha-icon-button";
-import "../../../../../components/ha-textfield";
-import type { HaTextField } from "../../../../../components/ha-textfield";
+import "../../../../../components/input/ha-input";
+import type { HaInput } from "../../../../../components/input/ha-input";
 import type {
  AutomationConfig,
  WebhookTrigger,
@@ -103,28 +103,27 @@ export class HaWebhookTrigger extends LitElement {

    return html`
      <div class="flex">
-        <ha-textfield
+        <ha-input
          name="webhook_id"
          .label=${this.hass.localize(
            "ui.panel.config.automation.editor.triggers.type.webhook.webhook_id"
          )}
-          .helper=${this.hass.localize(
+          .hint=${this.hass.localize(
            "ui.panel.config.automation.editor.triggers.type.webhook.webhook_id_helper"
          )}
          .disabled=${this.disabled}
-          iconTrailing
          .value=${webhookId || ""}
          @input=${this._valueChanged}
        >
          <ha-icon-button
            @click=${this._copyUrl}
-            slot="trailingIcon"
+            slot="end"
            .label=${this.hass.localize(
              "ui.panel.config.automation.editor.triggers.type.webhook.copy_url"
            )}
            .path=${mdiContentCopy}
          ></ha-icon-button>
-        </ha-textfield>
+        </ha-input>
        <ha-dropdown
          @wa-select=${this._handleDropdownSelect}
          placement="bottom-end"
@@ -199,7 +198,7 @@ export class HaWebhookTrigger extends LitElement {
  }

  private async _copyUrl(ev): Promise<void> {
-    const inputElement = ev.target.parentElement as HaTextField;
+    const inputElement = ev.target.parentElement as HaInput;
    const url = this.hass.hassUrl(`/api/webhook/${inputElement.value}`);

    await copyToClipboard(url);
@@ -229,11 +228,11 @@ export class HaWebhookTrigger extends LitElement {
      display: flex;
    }

-    ha-textfield {
+    ha-input {
      flex: 1;
    }

-    ha-textfield > ha-icon-button {
+    ha-input > ha-icon-button {
      --ha-icon-button-size: 24px;
      --mdc-icon-size: 18px;
      color: var(--secondary-text-color);
--- a/src/panels/config/backup/dialogs/dialog-generate-backup.ts
+++ b/src/panels/config/backup/dialogs/dialog-generate-backup.ts
@@ -6,6 +6,7 @@ import { isComponentLoaded } from "../../../../common/config/is_component_loaded
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-alert";
 import "../../../../components/ha-button";
+import "../../../../components/ha-dialog";
 import "../../../../components/ha-dialog-footer";
 import "../../../../components/ha-dialog-header";
 import "../../../../components/ha-expansion-panel";
@@ -14,8 +15,8 @@ import "../../../../components/ha-icon-button-prev";
 import "../../../../components/ha-md-list";
 import "../../../../components/ha-md-list-item";
 import "../../../../components/ha-select";
-import "../../../../components/ha-textfield";
-import "../../../../components/ha-dialog";
+import "../../../../components/input/ha-input";
+import type { HaInput } from "../../../../components/input/ha-input";
 import type {
  BackupAgent,
  BackupConfig,
@@ -290,7 +291,7 @@ class DialogGenerateBackup extends LitElement implements HassDialog {
    const disabledAgentIds = this._disabledAgentIds();

    return html`
-      <ha-textfield
+      <ha-input
        name="name"
        .label=${this.hass.localize(
          "ui.panel.config.backup.dialogs.generate.sync.name"
@@ -298,7 +299,7 @@ class DialogGenerateBackup extends LitElement implements HassDialog {
        .value=${this._formData.name}
        @change=${this._nameChanged}
      >
-      </ha-textfield>
+      </ha-input>
      <ha-md-list>
        <ha-md-list-item>
          <span slot="headline">
@@ -385,10 +386,10 @@ class DialogGenerateBackup extends LitElement implements HassDialog {
    };
  }

-  private _nameChanged(ev) {
+  private _nameChanged(ev: InputEvent) {
    this._formData = {
      ...this._formData!,
-      name: ev.target.value,
+      name: (ev.target as HaInput).value ?? "",
    };
  }

@@ -468,7 +469,7 @@ class DialogGenerateBackup extends LitElement implements HassDialog {
          overflow: hidden;
          white-space: nowrap;
        }
-        ha-textfield {
+        ha-input {
          width: 100%;
        }
        .content {
--- a/src/panels/config/integrations/integration-panels/zwave_js/add-node/zwave-js-add-node-code-input.ts
+++ b/src/panels/config/integrations/integration-panels/zwave_js/add-node/zwave-js-add-node-code-input.ts
@@ -1,11 +1,11 @@
-import { customElement, property } from "lit/decorators";
 import { css, html, LitElement, nothing } from "lit";
+import { customElement, property } from "lit/decorators";

 import { fireEvent } from "../../../../../../common/dom/fire_event";
-import type { HaTextField } from "../../../../../../components/ha-textfield";
+import type { HaInput } from "../../../../../../components/input/ha-input";

-import "../../../../../../components/ha-textfield";
 import "../../../../../../components/ha-alert";
+import "../../../../../../components/input/ha-input";

@customElement("zwave-js-add-node-code-input")
 export class ZWaveJsAddNodeCodeInput extends LitElement {
@@ -27,14 +27,14 @@ export class ZWaveJsAddNodeCodeInput extends LitElement {
      ${this.error
        ? html`<ha-alert alert-type="error">${this.error}</ha-alert>`
        : nothing}
-      <ha-textfield
+      <ha-input
        .placeholder=${this.placeholder}
        .value=${this.value}
        @input=${this._handleChange}
        @keyup=${this._handleKeyup}
        required
        autofocus
-      ></ha-textfield>
+      ></ha-input>
      ${this.referenceKey
        ? html`<div>
            <span>${this.value.padEnd(5, "·")}</span>${this.referenceKey}
@@ -50,24 +50,24 @@ export class ZWaveJsAddNodeCodeInput extends LitElement {
  }

  private _handleChange(ev: InputEvent): void {
-    const inputElement = ev.target as HaTextField;
+    const inputElement = ev.target as HaInput;
    if (
      this.numeric &&
-      (isNaN(Number(inputElement.value)) || inputElement.value.length > 5)
+      (isNaN(Number(inputElement.value)) || inputElement.value!.length > 5)
    ) {
      inputElement.value = this.value;
      return;
    }

-    this.value = (ev.target as HaTextField).value;
+    this.value = (ev.target as HaInput).value ?? "";

    fireEvent(this, "value-changed", {
-      value: (ev.target as HaTextField).value,
+      value: (ev.target as HaInput).value,
    });
  }

  static styles = css`
-    ha-textfield {
+    ha-input {
      width: 100%;
    }
    ha-alert {