Refactor ha-auth-form-string and ha-form-string to use ha-input component; remove ha-auth-textfield

Update ha-input and supervisor-network styles for improved layout
Refactor ha-textfield to integrate ha-input component
2026-02-28 04:17:48 +00:00 · 2026-02-27 13:29:59 +01:00 · 2026-02-27 11:36:54 +01:00 · 2026-02-27 11:25:49 +01:00 · 2026-02-27 10:57:25 +01:00 · 2026-02-27 10:15:51 +01:00
30 changed files with 1046 additions and 1048 deletions
--- a/src/auth/ha-auth-form-string.ts
+++ b/src/auth/ha-auth-form-string.ts
@@ -1,10 +1,7 @@
-/* eslint-disable lit/prefer-static-styles */
-import type { TemplateResult } from "lit";
-import { html } from "lit";
 import { customElement } from "lit/decorators";
 import { HaFormString } from "../components/ha-form/ha-form-string";
 import "../components/ha-icon-button";
-import "./ha-auth-textfield";
+import "../components/ha-input";

@customElement("ha-auth-form-string")
 export class HaAuthFormString extends HaFormString {
@@ -12,59 +9,9 @@ export class HaAuthFormString extends HaFormString {
    return this;
  }

-  protected render(): TemplateResult {
-    return html`
-      <style>
-        ha-auth-form-string {
-          display: block;
-          position: relative;
-        }
-        ha-auth-form-string[own-margin] {
-          margin-bottom: 5px;
-        }
-        ha-auth-form-string ha-auth-textfield {
-          display: block !important;
-        }
-        ha-auth-form-string ha-icon-button {
-          position: absolute;
-          top: 8px;
-          right: 8px;
-          inset-inline-start: initial;
-          inset-inline-end: 8px;
-          --ha-icon-button-size: 40px;
-          --mdc-icon-size: 20px;
-          color: var(--secondary-text-color);
-          direction: var(--direction);
-        }
-      </style>
-      <ha-auth-textfield
-        .type=${!this.isPassword
-          ? this.stringType
-          : this.unmaskedPassword
-            ? "text"
-            : "password"}
-        .label=${this.label}
-        .value=${this.data || ""}
-        .helper=${this.helper}
-        helperPersistent
-        .disabled=${this.disabled}
-        .required=${this.schema.required}
-        .autoValidate=${this.schema.required}
-        .name=${this.schema.name}
-        .autocomplete=${this.schema.autocomplete}
-        ?autofocus=${this.schema.autofocus}
-        .suffix=${this.isPassword
-          ? // reserve some space for the icon.
-            html`<div style="width: 24px"></div>`
-          : this.schema.description?.suffix}
-        .validationMessage=${this.schema.required
-          ? this.localize?.("ui.panel.page-authorize.form.error_required")
-          : undefined}
-        @input=${this._valueChanged}
-        @change=${this._valueChanged}
-      ></ha-auth-textfield>
-      ${this.renderIcon()}
-    `;
+  public connectedCallback(): void {
+    super.connectedCallback();
+    this.style.position = "relative";
  }
 }

--- a/src/auth/ha-auth-textfield.ts
+++ b/src/auth/ha-auth-textfield.ts
@@ -1,264 +0,0 @@
-/* eslint-disable lit/value-after-constraints */
-/* eslint-disable lit/prefer-static-styles */
-import { floatingLabel } from "@material/mwc-floating-label/mwc-floating-label-directive";
-import type { TemplateResult } from "lit";
-import { html } from "lit";
-import { customElement } from "lit/decorators";
-import { ifDefined } from "lit/directives/if-defined";
-import { live } from "lit/directives/live";
-import { HaTextField } from "../components/ha-textfield";
-
-@customElement("ha-auth-textfield")
-export class HaAuthTextField extends HaTextField {
-  protected renderLabel(): TemplateResult | string {
-    return !this.label
-      ? ""
-      : html`
-          <span
-            .floatingLabelFoundation=${floatingLabel(
-              this.label
-            ) as unknown as any}
-            .id=${this.name}
-            >${this.label}</span
-          >
-        `;
-  }
-
-  protected renderInput(shouldRenderHelperText: boolean): TemplateResult {
-    const minOrUndef = this.minLength === -1 ? undefined : this.minLength;
-    const maxOrUndef = this.maxLength === -1 ? undefined : this.maxLength;
-    const autocapitalizeOrUndef = this.autocapitalize
-      ? (this.autocapitalize as
-          | "off"
-          | "none"
-          | "on"
-          | "sentences"
-          | "words"
-          | "characters")
-      : undefined;
-    const showValidationMessage = this.validationMessage && !this.isUiValid;
-    const ariaLabelledbyOrUndef = this.label ? this.name : undefined;
-    const ariaControlsOrUndef = shouldRenderHelperText
-      ? "helper-text"
-      : undefined;
-    const ariaDescribedbyOrUndef =
-      this.focused || this.helperPersistent || showValidationMessage
-        ? "helper-text"
-        : undefined;
-    // TODO: live() directive needs casting for lit-analyzer
-    // https://github.com/runem/lit-analyzer/pull/91/files
-    // TODO: lit-analyzer labels min/max as (number|string) instead of string
-    return html`<input
-      aria-labelledby=${ifDefined(ariaLabelledbyOrUndef)}
-      aria-controls=${ifDefined(ariaControlsOrUndef)}
-      aria-describedby=${ifDefined(ariaDescribedbyOrUndef)}
-      class="mdc-text-field__input"
-      type=${this.type}
-      .value=${live(this.value) as unknown as string}
-      ?disabled=${this.disabled}
-      placeholder=${this.placeholder}
-      ?required=${this.required}
-      ?readonly=${this.readOnly}
-      minlength=${ifDefined(minOrUndef)}
-      maxlength=${ifDefined(maxOrUndef)}
-      pattern=${ifDefined(this.pattern ? this.pattern : undefined)}
-      min=${ifDefined(this.min === "" ? undefined : (this.min as number))}
-      max=${ifDefined(this.max === "" ? undefined : (this.max as number))}
-      step=${ifDefined(this.step === null ? undefined : (this.step as number))}
-      size=${ifDefined(this.size === null ? undefined : this.size)}
-      name=${ifDefined(this.name === "" ? undefined : this.name)}
-      inputmode=${ifDefined(this.inputMode)}
-      autocapitalize=${ifDefined(autocapitalizeOrUndef)}
-      ?autofocus=${this.autofocus}
-      @input=${this.handleInputChange}
-      @focus=${this.onInputFocus}
-      @blur=${this.onInputBlur}
-    />`;
-  }
-
-  public render() {
-    return html`
-      <style>
-        ha-auth-textfield {
-          display: inline-flex;
-          flex-direction: column;
-          outline: none;
-        }
-        ha-auth-textfield:not([disabled]):hover
-          :not(.mdc-text-field--invalid):not(.mdc-text-field--focused)
-          mwc-notched-outline {
-          --mdc-notched-outline-border-color: var(
-            --mdc-text-field-outlined-hover-border-color,
-            rgba(0, 0, 0, 0.87)
-          );
-        }
-
-        ha-auth-textfield:not([disabled])
-          .mdc-text-field:not(.mdc-text-field--outlined) {
-          background-color: var(--mdc-text-field-fill-color, whitesmoke);
-        }
-
-        ha-auth-textfield:not([disabled])
-          .mdc-text-field.mdc-text-field--invalid
-          mwc-notched-outline {
-          --mdc-notched-outline-border-color: var(
-            --mdc-text-field-error-color,
-            var(--mdc-theme-error, #b00020)
-          );
-        }
-
-        ha-auth-textfield:not([disabled])
-          .mdc-text-field.mdc-text-field--invalid
-          + .mdc-text-field-helper-line
-          .mdc-text-field-character-counter,
-        ha-auth-textfield:not([disabled])
-          .mdc-text-field.mdc-text-field--invalid
-          .mdc-text-field__icon {
-          color: var(
-            --mdc-text-field-error-color,
-            var(--mdc-theme-error, #b00020)
-          );
-        }
-
-        ha-auth-textfield:not([disabled])
-          .mdc-text-field:not(.mdc-text-field--invalid):not(
-            .mdc-text-field--focused
-          )
-          .mdc-floating-label,
-        ha-auth-textfield:not([disabled])
-          .mdc-text-field:not(.mdc-text-field--invalid):not(
-            .mdc-text-field--focused
-          )
-          .mdc-floating-label::after {
-          color: var(--mdc-text-field-label-ink-color, rgba(0, 0, 0, 0.6));
-        }
-
-        ha-auth-textfield:not([disabled])
-          .mdc-text-field.mdc-text-field--focused
-          mwc-notched-outline {
-          --mdc-notched-outline-stroke-width: 2px;
-        }
-
-        ha-auth-textfield:not([disabled])
-          .mdc-text-field.mdc-text-field--focused:not(.mdc-text-field--invalid)
-          mwc-notched-outline {
-          --mdc-notched-outline-border-color: var(
-            --mdc-text-field-focused-label-color,
-            var(--mdc-theme-primary, rgba(98, 0, 238, 0.87))
-          );
-        }
-
-        ha-auth-textfield:not([disabled])
-          .mdc-text-field.mdc-text-field--focused:not(.mdc-text-field--invalid)
-          .mdc-floating-label {
-          color: #6200ee;
-          color: var(--mdc-theme-primary, #6200ee);
-        }
-
-        ha-auth-textfield:not([disabled])
-          .mdc-text-field
-          .mdc-text-field__input {
-          color: var(--mdc-text-field-ink-color, rgba(0, 0, 0, 0.87));
-        }
-
-        ha-auth-textfield:not([disabled])
-          .mdc-text-field
-          .mdc-text-field__input::placeholder {
-          color: var(--mdc-text-field-label-ink-color, rgba(0, 0, 0, 0.6));
-        }
-
-        ha-auth-textfield:not([disabled])
-          .mdc-text-field-helper-line
-          .mdc-text-field-helper-text:not(
-            .mdc-text-field-helper-text--validation-msg
-          ),
-        ha-auth-textfield:not([disabled])
-          .mdc-text-field-helper-line:not(.mdc-text-field--invalid)
-          .mdc-text-field-character-counter {
-          color: var(--mdc-text-field-label-ink-color, rgba(0, 0, 0, 0.6));
-        }
-
-        ha-auth-textfield[disabled]
-          .mdc-text-field:not(.mdc-text-field--outlined) {
-          background-color: var(--mdc-text-field-disabled-fill-color, #fafafa);
-        }
-
-        ha-auth-textfield[disabled]
-          .mdc-text-field.mdc-text-field--outlined
-          mwc-notched-outline {
-          --mdc-notched-outline-border-color: var(
-            --mdc-text-field-outlined-disabled-border-color,
-            rgba(0, 0, 0, 0.06)
-          );
-        }
-
-        ha-auth-textfield[disabled]
-          .mdc-text-field:not(.mdc-text-field--invalid):not(
-            .mdc-text-field--focused
-          )
-          .mdc-floating-label,
-        ha-auth-textfield[disabled]
-          .mdc-text-field:not(.mdc-text-field--invalid):not(
-            .mdc-text-field--focused
-          )
-          .mdc-floating-label::after {
-          color: var(--mdc-text-field-disabled-ink-color, rgba(0, 0, 0, 0.38));
-        }
-
-        ha-auth-textfield[disabled] .mdc-text-field .mdc-text-field__input,
-        ha-auth-textfield[disabled]
-          .mdc-text-field
-          .mdc-text-field__input::placeholder {
-          color: var(--mdc-text-field-disabled-ink-color, rgba(0, 0, 0, 0.38));
-        }
-
-        ha-auth-textfield[disabled]
-          .mdc-text-field-helper-line
-          .mdc-text-field-helper-text,
-        ha-auth-textfield[disabled]
-          .mdc-text-field-helper-line
-          .mdc-text-field-character-counter {
-          color: var(--mdc-text-field-disabled-ink-color, rgba(0, 0, 0, 0.38));
-        }
-        ha-auth-textfield:not([disabled])
-          .mdc-text-field.mdc-text-field--focused:not(.mdc-text-field--invalid)
-          .mdc-floating-label {
-          color: var(--mdc-theme-primary, #6200ee);
-        }
-        ha-auth-textfield[no-spinner] input::-webkit-outer-spin-button,
-        ha-auth-textfield[no-spinner] input::-webkit-inner-spin-button {
-          -webkit-appearance: none;
-          margin: 0;
-        }
-
-        /* Firefox */
-        ha-auth-textfield[no-spinner] input[type="number"] {
-          -moz-appearance: textfield;
-        }
-      </style>
-      ${super.render()}
-    `;
-  }
-
-  protected createRenderRoot() {
-    // add parent style to light dom
-    const style = document.createElement("style");
-    style.textContent = HaTextField.elementStyles as unknown as string;
-    this.append(style);
-    return this;
-  }
-
-  public firstUpdated() {
-    super.firstUpdated();
-
-    if (this.autofocus) {
-      this.focus();
-    }
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-auth-textfield": HaAuthTextField;
-  }
-}
--- a/src/components/ha-form/ha-form-string.ts
+++ b/src/components/ha-form/ha-form-string.ts
@@ -1,15 +1,11 @@
-import { mdiEye, mdiEyeOff } from "@mdi/js";
 import type { PropertyValues, TemplateResult } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
-import type {
-  LocalizeFunc,
-  LocalizeKeys,
-} from "../../common/translations/localize";
+import type { LocalizeFunc } from "../../common/translations/localize";
 import "../ha-icon-button";
-import "../ha-textfield";
-import type { HaTextField } from "../ha-textfield";
+import "../ha-input";
+import type { HaInput } from "../ha-input";
 import type {
  HaFormElement,
  HaFormStringData,
@@ -37,7 +33,7 @@ export class HaFormString extends LitElement implements HaFormElement {

  @state() protected unmaskedPassword = false;

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

  public focus(): void {
    if (this._input) {
@@ -47,48 +43,29 @@ export class HaFormString extends LitElement implements HaFormElement {

  protected render(): TemplateResult {
    return html`
-      <ha-textfield
-        .type=${!this.isPassword
-          ? this.stringType
-          : this.unmaskedPassword
-            ? "text"
-            : "password"}
+      <ha-input
+        .passwordToggle=${this.isPassword}
+        .passwordVisible=${this.unmaskedPassword}
+        .type=${!this.isPassword ? this.stringType : "password"}
        .label=${this.label}
        .value=${this.data || ""}
-        .helper=${this.helper}
-        helperPersistent
+        .hint=${this.helper}
        .disabled=${this.disabled}
-        .required=${this.schema.required}
-        .autoValidate=${this.schema.required}
+        .required=${!!this.schema.required}
+        .autoValidate=${!!this.schema.required}
        .name=${this.schema.name}
-        .autofocus=${this.schema.autofocus}
+        .autofocus=${!!this.schema.autofocus}
        .autocomplete=${this.schema.autocomplete}
-        .suffix=${this.isPassword
-          ? // reserve some space for the icon.
-            html`<div style="width: 24px"></div>`
-          : this.schema.description?.suffix}
        .validationMessage=${this.schema.required
          ? this.localize?.("ui.common.error_required")
          : undefined}
        @input=${this._valueChanged}
        @change=${this._valueChanged}
-      ></ha-textfield>
-      ${this.renderIcon()}
-    `;
-  }
-
-  protected renderIcon() {
-    if (!this.isPassword) return nothing;
-    return html`
-      <ha-icon-button
-        .label=${this.localize?.(
-          `${this.localizeBaseKey}.${
-            this.unmaskedPassword ? "hide_password" : "show_password"
-          }` as LocalizeKeys
-        )}
-        @click=${this.toggleUnmaskedPassword}
-        .path=${this.unmaskedPassword ? mdiEyeOff : mdiEye}
-      ></ha-icon-button>
+      >
+        ${this.schema.description?.suffix
+          ? html`<span slot="end">${this.schema.description.suffix}</span>`
+          : nothing}
+      </ha-input>
    `;
  }

@@ -98,12 +75,8 @@ export class HaFormString extends LitElement implements HaFormElement {
    }
  }

-  protected toggleUnmaskedPassword(): void {
-    this.unmaskedPassword = !this.unmaskedPassword;
-  }
-
  protected _valueChanged(ev: Event): void {
-    let value: string | undefined = (ev.target as HaTextField).value;
+    let value: string | undefined = (ev.target as HaInput).value;
    if (this.data === value) {
      return;
    }
@@ -115,10 +88,10 @@ export class HaFormString extends LitElement implements HaFormElement {
    });
  }

-  protected get stringType(): string {
+  protected get stringType(): "email" | "url" | "text" {
    if (this.schema.format) {
      if (["email", "url"].includes(this.schema.format)) {
-        return this.schema.format;
+        return this.schema.format as "email" | "url";
      }
      if (this.schema.format === "fqdnurl") {
        return "url";
@@ -139,20 +112,6 @@ export class HaFormString extends LitElement implements HaFormElement {
    :host([own-margin]) {
      margin-bottom: 5px;
    }
-    ha-textfield {
-      display: block;
-    }
-    ha-icon-button {
-      position: absolute;
-      top: 8px;
-      right: 8px;
-      inset-inline-start: initial;
-      inset-inline-end: 8px;
-      --ha-icon-button-size: 40px;
-      --mdc-icon-size: 20px;
-      color: var(--secondary-text-color);
-      direction: var(--direction);
-    }
  `;
 }

--- a/src/components/ha-input.ts
+++ b/src/components/ha-input.ts
@@ -0,0 +1,473 @@
+import { preventDefault } from "@fullcalendar/core/internal";
+import "@home-assistant/webawesome/dist/components/animation/animation";
+import "@home-assistant/webawesome/dist/components/input/input";
+import type WaInput from "@home-assistant/webawesome/dist/components/input/input";
+import { mdiClose, mdiEye, mdiEyeOff, mdiInformationOutline } from "@mdi/js";
+import { LitElement, type PropertyValues, css, html, nothing } from "lit";
+import { customElement, property, query, state } from "lit/decorators";
+import "./ha-icon-button";
+import "./ha-svg-icon";
+import "./ha-tooltip";
+
+@customElement("ha-input")
+export class HaInput extends LitElement {
+  /** The type of input. */
+  @property()
+  public type:
+    | "date"
+    | "datetime-local"
+    | "email"
+    | "number"
+    | "password"
+    | "search"
+    | "tel"
+    | "text"
+    | "time"
+    | "url" = "text";
+
+  /** The current value of the input. */
+  @property()
+  public value?: string;
+
+  /** The input's size. */
+  @property()
+  public size: "small" | "medium" | "large" = "medium";
+
+  /** The input's visual appearance. */
+  @property()
+  public appearance: "filled" | "outlined" | "filled-outlined" = "outlined";
+
+  /** Draws a pill-style input with rounded edges. */
+  @property({ type: Boolean })
+  public pill = false;
+
+  /** The input's label. */
+  @property()
+  public label = "";
+
+  /** The input's hint. */
+  @property()
+  public hint? = "";
+
+  /** Adds a clear button when the input is not empty. */
+  @property({ type: Boolean, attribute: "with-clear" })
+  public withClear = false;
+
+  /** Placeholder text to show as a hint when the input is empty. */
+  @property()
+  public placeholder = "";
+
+  /** Makes the input readonly. */
+  @property({ type: Boolean })
+  public readonly = false;
+
+  /** Adds a button to toggle the password's visibility. */
+  @property({ type: Boolean, attribute: "password-toggle" })
+  public passwordToggle = false;
+
+  /** Determines whether or not the password is currently visible. */
+  @property({ type: Boolean, attribute: "password-visible" })
+  public passwordVisible = false;
+
+  /** Hides the browser's built-in increment/decrement spin buttons for number inputs. */
+  @property({ type: Boolean, attribute: "without-spin-buttons" })
+  public withoutSpinButtons = false;
+
+  /** Makes the input a required field. */
+  @property({ type: Boolean })
+  public required = false;
+
+  /** A regular expression pattern to validate input against. */
+  @property()
+  public pattern?: string;
+
+  /** The minimum length of input that will be considered valid. */
+  @property({ type: Number })
+  public minlength?: number;
+
+  /** The maximum length of input that will be considered valid. */
+  @property({ type: Number })
+  public maxlength?: number;
+
+  /** The input's minimum value. Only applies to date and number input types. */
+  @property()
+  public min?: number | string;
+
+  /** The input's maximum value. Only applies to date and number input types. */
+  @property()
+  public max?: number | string;
+
+  /** Specifies the granularity that the value must adhere to. */
+  @property()
+  public step?: number | "any";
+
+  /** Controls whether and how text input is automatically capitalized. */
+  @property()
+  // eslint-disable-next-line lit/no-native-attributes
+  public autocapitalize:
+    | "off"
+    | "none"
+    | "on"
+    | "sentences"
+    | "words"
+    | "characters"
+    | "" = "";
+
+  /** Indicates whether the browser's autocorrect feature is on or off. */
+  @property({ type: Boolean })
+  public autocorrect = false;
+
+  /** Specifies what permission the browser has to provide assistance in filling out form field values. */
+  @property()
+  public autocomplete?: string;
+
+  /** Indicates that the input should receive focus on page load. */
+  @property({ type: Boolean })
+  // eslint-disable-next-line lit/no-native-attributes
+  public autofocus = false;
+
+  /** Used to customize the label or icon of the Enter key on virtual keyboards. */
+  @property()
+  // eslint-disable-next-line lit/no-native-attributes
+  public enterkeyhint:
+    | "enter"
+    | "done"
+    | "go"
+    | "next"
+    | "previous"
+    | "search"
+    | "send"
+    | "" = "";
+
+  /** Enables spell checking on the input. */
+  @property({ type: Boolean })
+  // eslint-disable-next-line lit/no-native-attributes
+  public spellcheck = true;
+
+  /** Tells the browser what type of data will be entered by the user. */
+  @property()
+  // eslint-disable-next-line lit/no-native-attributes
+  public inputmode:
+    | "none"
+    | "text"
+    | "decimal"
+    | "numeric"
+    | "tel"
+    | "search"
+    | "email"
+    | "url"
+    | "" = "";
+
+  /** The name of the input, submitted as a name/value pair with form data. */
+  @property()
+  public name?: string;
+
+  /** Disables the form control. */
+  @property({ type: Boolean })
+  public disabled = false;
+
+  /** Custom validation message to show when the input is invalid. */
+  @property({ attribute: "validation-message" })
+  public validationMessage? = "";
+
+  /** When true, validates the input on blur instead of on form submit. */
+  @property({ type: Boolean, attribute: "auto-validate" })
+  public autoValidate = false;
+
+  @property({ type: Boolean })
+  public invalid = false;
+
+  @state()
+  private _invalid = false;
+
+  @query("wa-input")
+  private _input?: WaInput;
+
+  static shadowRootOptions: ShadowRootInit = {
+    mode: "open",
+    delegatesFocus: true,
+  };
+
+  /** Selects all the text in the input. */
+  public select(): void {
+    this._input?.select();
+  }
+
+  /** Sets the start and end positions of the text selection (0-based). */
+  public setSelectionRange(
+    selectionStart: number,
+    selectionEnd: number,
+    selectionDirection?: "forward" | "backward" | "none"
+  ): void {
+    this._input?.setSelectionRange(
+      selectionStart,
+      selectionEnd,
+      selectionDirection
+    );
+  }
+
+  /** Replaces a range of text with a new string. */
+  public setRangeText(
+    replacement: string,
+    start?: number,
+    end?: number,
+    selectMode?: "select" | "start" | "end" | "preserve"
+  ): void {
+    this._input?.setRangeText(replacement, start, end, selectMode);
+  }
+
+  /** Displays the browser picker for an input element. */
+  public showPicker(): void {
+    this._input?.showPicker();
+  }
+
+  /** Increments the value of a numeric input type by the value of the step attribute. */
+  public stepUp(): void {
+    this._input?.stepUp();
+  }
+
+  /** Decrements the value of a numeric input type by the value of the step attribute. */
+  public stepDown(): void {
+    this._input?.stepDown();
+  }
+
+  public checkValidity(): boolean {
+    return this._input?.checkValidity() ?? true;
+  }
+
+  public reportValidity(): boolean {
+    const valid = this.checkValidity();
+
+    this._invalid = !valid;
+    return valid;
+  }
+
+  protected override updated(changedProperties: PropertyValues): void {
+    super.updated(changedProperties);
+
+    const nativeInput = this._input?.input;
+    if (!nativeInput) return;
+
+    // wa-input hardcodes aria-describedby="hint" pointing to its internal hint slot wrapper.
+    // We remove it and use aria-description instead to properly convey our hint or error text.
+    // TODO: fix upstream in wa-input
+    nativeInput.removeAttribute("aria-describedby");
+
+    // wa-input doesn't set aria-invalid on its internal <input>, so we do it manually
+    // TODO: fix upstream in wa-input
+    if (changedProperties.has("invalid") || changedProperties.has("_invalid")) {
+      const isInvalid = this.invalid || this._invalid;
+      nativeInput.setAttribute("aria-invalid", String(isInvalid));
+    }
+
+    // Expose hint or validation error to screen readers on the input itself
+    const description =
+      this.invalid || this._invalid
+        ? this.validationMessage || this._input?.validationMessage
+        : this.hint;
+
+    if (description) {
+      nativeInput.setAttribute("aria-description", description);
+    } else {
+      nativeInput.removeAttribute("aria-description");
+    }
+  }
+
+  protected render() {
+    return html`
+      <wa-input
+        .type=${this.type}
+        .value=${this.value ?? null}
+        .size=${this.size}
+        .appearance=${this.appearance}
+        .withClear=${this.withClear}
+        .placeholder=${this.placeholder}
+        .readonly=${this.readonly}
+        .passwordToggle=${this.passwordToggle}
+        .passwordVisible=${this.passwordVisible}
+        .withoutSpinButtons=${this.withoutSpinButtons}
+        .required=${this.required}
+        .pattern=${this.pattern}
+        .minlength=${this.minlength}
+        .maxlength=${this.maxlength}
+        .min=${this.min}
+        .max=${this.max}
+        .step=${this.step}
+        .autocapitalize=${this.autocapitalize || undefined}
+        .autocorrect=${this.autocorrect ? "on" : "off"}
+        .autocomplete=${this.autocomplete}
+        .autofocus=${this.autofocus}
+        .enterkeyhint=${this.enterkeyhint || undefined}
+        .spellcheck=${this.spellcheck}
+        .inputmode=${this.inputmode || undefined}
+        .name=${this.name}
+        .disabled=${this.disabled}
+        class=${this.invalid || this._invalid ? "invalid" : ""}
+        @input=${this._handleInput}
+        @change=${this._handleChange}
+        @blur=${this._handleBlur}
+        @wa-invalid=${this._handleInvalid}
+      >
+        <div class="label" slot="label">
+          <span>
+            <slot name="label">${this.label}</slot>
+          </span>
+          ${this.hint
+            ? html`<ha-icon-button
+                  @click=${preventDefault}
+                  .path=${mdiInformationOutline}
+                  .label=${"Hint"}
+                  hide-title
+                  id="hint"
+                ></ha-icon-button>
+                <ha-tooltip for="hint">${this.hint}</ha-tooltip> `
+            : nothing}
+        </div>
+        <slot name="start" slot="start"></slot>
+        <slot name="end" slot="end"></slot>
+        <slot name="clear-icon" slot="clear-icon">
+          <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
+        </slot>
+        <slot name="show-password-icon" slot="show-password-icon">
+          <ha-svg-icon .path=${mdiEye}></ha-svg-icon>
+        </slot>
+        <slot name="hide-password-icon" slot="hide-password-icon">
+          <ha-svg-icon .path=${mdiEyeOff}></ha-svg-icon>
+        </slot>
+        <div
+          slot="hint"
+          class="error ${this.invalid || this._invalid ? "visible" : ""}"
+          role="alert"
+          aria-live="assertive"
+        >
+          <span
+            >${this.validationMessage || this._input?.validationMessage}</span
+          >
+        </div>
+      </wa-input>
+    `;
+  }
+
+  private _handleInput() {
+    this.value = this._input?.value ?? undefined;
+    if (this._invalid && this._input?.checkValidity()) {
+      this._invalid = false;
+    }
+  }
+
+  private _handleChange() {
+    this.value = this._input?.value ?? undefined;
+  }
+
+  private _handleBlur() {
+    if (this.autoValidate) {
+      this._invalid = !this._input?.checkValidity();
+    }
+  }
+
+  private _handleInvalid() {
+    this._invalid = true;
+  }
+
+  static styles = css`
+    :host {
+      display: flex;
+      align-items: flex-start;
+      padding-top: var(--ha-input-padding-top, var(--ha-space-2));
+      padding-bottom: var(--ha-input-padding-bottom, var(--ha-space-2));
+      text-align: var(--ha-input-text-align, start);
+    }
+    wa-input {
+      flex: 1;
+      min-width: 0;
+    }
+
+    wa-input::part(base):focus-within {
+      outline: none;
+      --wa-form-control-border-color: var(--ha-color-border-primary-normal);
+    }
+
+    wa-input.invalid,
+    wa-input.invalid::part(base):focus-within {
+      --wa-form-control-border-color: var(--ha-color-border-danger-normal);
+    }
+
+    wa-input::part(label) {
+      margin-block-end: 2px;
+    }
+
+    .label {
+      height: 24px;
+      display: flex;
+      width: 100%;
+      align-items: center;
+      color: var(--ha-color-text-secondary);
+      font-size: var(--ha-font-size-s);
+      font-weight: var(--ha-font-weight-medium);
+      gap: var(--ha-space-1);
+    }
+
+    .label span {
+      line-height: 1;
+      flex: 1;
+      min-width: 0;
+      overflow-x: clip;
+      overflow-y: visible;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .label ha-svg-icon {
+      color: var(--ha-color-on-disabled-normal);
+      --mdc-icon-size: 16px;
+    }
+
+    #hint {
+      --ha-icon-button-size: 16px;
+      --mdc-icon-size: 16px;
+      color: var(--ha-color-on-disabled-normal);
+    }
+
+    wa-input::part(hint) {
+      margin-block-start: 0;
+      color: var(--ha-color-on-danger-quiet);
+      font-size: var(--ha-font-size-s);
+      margin-inline-start: var(--ha-space-3);
+    }
+
+    .error {
+      padding-top: var(--ha-space-1);
+      transition:
+        opacity 0.3s ease-out,
+        height 0.3s ease-out;
+      height: 0;
+      overflow: hidden;
+    }
+
+    .error span {
+      transition: transform 0.3s ease-out;
+      display: inline-block;
+      transform: translateY(
+        calc(-1 * (var(--ha-font-size-s) + var(--ha-space-1)))
+      );
+    }
+
+    .error.visible {
+      height: calc(var(--ha-font-size-s) + var(--ha-space-2));
+    }
+
+    .error.visible span {
+      transform: translateY(0);
+    }
+
+    wa-input::part(end) {
+      color: var(--ha-color-text-secondary);
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-input": HaInput;
+  }
+}
--- a/src/components/ha-md-textfield.ts
+++ b/src/components/ha-md-textfield.ts
@@ -1,34 +0,0 @@
-import { styles } from "@material/web/textfield/internal/filled-styles";
-import { FilledTextField } from "@material/web/textfield/internal/filled-text-field";
-import { styles as sharedStyles } from "@material/web/textfield/internal/shared-styles";
-import { css } from "lit";
-import { customElement } from "lit/decorators";
-
-@customElement("ha-md-textfield")
-export class HaMdTextfield extends FilledTextField {
-  static override styles = [
-    sharedStyles,
-    styles,
-    css`
-      :host {
-        --ha-icon-display: block;
-        --md-sys-color-primary: var(--primary-text-color);
-        --md-sys-color-secondary: var(--secondary-text-color);
-        --md-sys-color-surface: var(--card-background-color);
-        --md-sys-color-on-surface-variant: var(--secondary-text-color);
-
-        --md-sys-color-surface-container-highest: var(--input-fill-color);
-        --md-sys-color-on-surface: var(--input-ink-color);
-
-        --md-sys-color-surface-container: var(--input-fill-color);
-        --md-sys-color-secondary-container: var(--input-fill-color);
-      }
-    `,
-  ];
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-md-textfield": HaMdTextfield;
-  }
-}
--- a/src/components/ha-password-field.ts
+++ b/src/components/ha-password-field.ts
@@ -1,211 +0,0 @@
-import type { TextAreaCharCounter } from "@material/mwc-textfield/mwc-textfield-base";
-import { mdiEye, mdiEyeOff } from "@mdi/js";
-import { LitElement, css, html } from "lit";
-import {
-  customElement,
-  eventOptions,
-  property,
-  query,
-  state,
-} from "lit/decorators";
-import type { HomeAssistant } from "../types";
-import "./ha-icon-button";
-import "./ha-textfield";
-import type { HaTextField } from "./ha-textfield";
-
-@customElement("ha-password-field")
-export class HaPasswordField extends LitElement {
-  @property({ attribute: false }) public hass?: HomeAssistant;
-
-  @property({ type: Boolean }) public invalid?: boolean;
-
-  @property({ attribute: "error-message" }) public errorMessage?: string;
-
-  @property({ type: Boolean }) public icon = false;
-
-  // eslint-disable-next-line lit/attribute-names
-  @property({ type: Boolean }) public iconTrailing = false;
-
-  @property() public autocomplete?: string;
-
-  @property({ type: Boolean }) public autocorrect = true;
-
-  @property({ attribute: "input-spellcheck" })
-  public inputSpellcheck?: string;
-
-  @property({ type: String }) value = "";
-
-  @property({ type: String }) placeholder = "";
-
-  @property({ type: String }) label = "";
-
-  @property({ type: Boolean, reflect: true }) disabled = false;
-
-  @property({ type: Boolean }) required = false;
-
-  // eslint-disable-next-line lit/attribute-names
-  @property({ type: Number }) minLength = -1;
-
-  // eslint-disable-next-line lit/attribute-names
-  @property({ type: Number }) maxLength = -1;
-
-  @property({ type: Boolean, reflect: true }) outlined = false;
-
-  @property({ type: String }) helper = "";
-
-  // eslint-disable-next-line lit/attribute-names
-  @property({ type: Boolean }) validateOnInitialRender = false;
-
-  // eslint-disable-next-line lit/attribute-names
-  @property({ type: String }) validationMessage = "";
-
-  // eslint-disable-next-line lit/attribute-names
-  @property({ type: Boolean }) autoValidate = false;
-
-  @property({ type: String }) pattern = "";
-
-  @property({ type: Number }) size: number | null = null;
-
-  // eslint-disable-next-line lit/attribute-names
-  @property({ type: Boolean }) helperPersistent = false;
-
-  // eslint-disable-next-line lit/attribute-names
-  @property({ type: Boolean }) charCounter: boolean | TextAreaCharCounter =
-    false;
-
-  // eslint-disable-next-line lit/attribute-names
-  @property({ type: Boolean }) endAligned = false;
-
-  @property({ type: String }) prefix = "";
-
-  @property({ type: String }) suffix = "";
-
-  @property({ type: String }) name = "";
-
-  @property({ type: String, attribute: "input-mode" })
-  inputMode!: string;
-
-  // eslint-disable-next-line lit/attribute-names
-  @property({ type: Boolean }) readOnly = false;
-
-  // eslint-disable-next-line lit/no-native-attributes
-  @property({ attribute: false }) autocapitalize = "";
-
-  @state() private _unmaskedPassword = false;
-
-  @query("ha-textfield") private _textField!: HaTextField;
-
-  protected render() {
-    return html`<ha-textfield
-        .invalid=${this.invalid}
-        .errorMessage=${this.errorMessage}
-        .icon=${this.icon}
-        .iconTrailing=${this.iconTrailing}
-        .autocomplete=${this.autocomplete}
-        .autocorrect=${this.autocorrect}
-        .inputSpellcheck=${this.inputSpellcheck}
-        .value=${this.value}
-        .placeholder=${this.placeholder}
-        .label=${this.label}
-        .disabled=${this.disabled}
-        .required=${this.required}
-        .minLength=${this.minLength}
-        .maxLength=${this.maxLength}
-        .outlined=${this.outlined}
-        .helper=${this.helper}
-        .validateOnInitialRender=${this.validateOnInitialRender}
-        .validationMessage=${this.validationMessage}
-        .autoValidate=${this.autoValidate}
-        .pattern=${this.pattern}
-        .size=${this.size}
-        .helperPersistent=${this.helperPersistent}
-        .charCounter=${this.charCounter}
-        .endAligned=${this.endAligned}
-        .prefix=${this.prefix}
-        .name=${this.name}
-        .inputMode=${this.inputMode}
-        .readOnly=${this.readOnly}
-        .autocapitalize=${this.autocapitalize}
-        .type=${this._unmaskedPassword ? "text" : "password"}
-        .suffix=${html`<div style="width: 24px"></div>`}
-        @input=${this._handleInputEvent}
-        @change=${this._handleChangeEvent}
-      ></ha-textfield>
-      <ha-icon-button
-        .label=${this.hass?.localize(
-          this._unmaskedPassword
-            ? "ui.components.selectors.text.hide_password"
-            : "ui.components.selectors.text.show_password"
-        ) || (this._unmaskedPassword ? "Hide password" : "Show password")}
-        @click=${this._toggleUnmaskedPassword}
-        .path=${this._unmaskedPassword ? mdiEyeOff : mdiEye}
-      ></ha-icon-button>`;
-  }
-
-  public focus(): void {
-    this._textField.focus();
-  }
-
-  public checkValidity(): boolean {
-    return this._textField.checkValidity();
-  }
-
-  public reportValidity(): boolean {
-    return this._textField.reportValidity();
-  }
-
-  public setCustomValidity(message: string): void {
-    return this._textField.setCustomValidity(message);
-  }
-
-  public layout(): Promise<void> {
-    return this._textField.layout();
-  }
-
-  private _toggleUnmaskedPassword(): void {
-    this._unmaskedPassword = !this._unmaskedPassword;
-  }
-
-  @eventOptions({ passive: true })
-  private _handleInputEvent(ev) {
-    this.value = ev.target.value;
-  }
-
-  @eventOptions({ passive: true })
-  private _handleChangeEvent(ev) {
-    this.value = ev.target.value;
-    this._reDispatchEvent(ev);
-  }
-
-  private _reDispatchEvent(oldEvent: Event) {
-    const newEvent = new Event(oldEvent.type, oldEvent);
-    this.dispatchEvent(newEvent);
-  }
-
-  static styles = css`
-    :host {
-      display: block;
-      position: relative;
-    }
-    ha-textfield {
-      width: 100%;
-    }
-    ha-icon-button {
-      position: absolute;
-      top: 8px;
-      right: 8px;
-      inset-inline-start: initial;
-      inset-inline-end: 8px;
-      --ha-icon-button-size: 40px;
-      --mdc-icon-size: 20px;
-      color: var(--secondary-text-color);
-      direction: var(--direction);
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-password-field": HaPasswordField;
-  }
-}
--- a/src/components/ha-textfield.ts
+++ b/src/components/ha-textfield.ts
@@ -1,242 +1,351 @@
-import { TextFieldBase } from "@material/mwc-textfield/mwc-textfield-base";
-import { styles } from "@material/mwc-textfield/mwc-textfield.css";
-import type { TemplateResult, PropertyValues } from "lit";
-import { html, css } from "lit";
+import type { PropertyValues, TemplateResult } from "lit";
+import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query } from "lit/decorators";
-import { mainWindow } from "../common/dom/get_main_window";
+import "./ha-input";
+import type { HaInput } from "./ha-input";

+/**
+ * Legacy wrapper around ha-input that preserves the mwc-textfield API.
+ * New code should use ha-input directly.
+ * @deprecated Use ha-input instead.
+ */
@customElement("ha-textfield")
-export class HaTextField extends TextFieldBase {
-  @property({ type: Boolean }) public invalid?: boolean;
+export class HaTextField extends LitElement {
+  @property({ type: String })
+  public value = "";

-  @property({ attribute: "error-message" }) public errorMessage?: string;
+  @property({ type: String })
+  public type:
+    | "text"
+    | "search"
+    | "tel"
+    | "url"
+    | "email"
+    | "password"
+    | "date"
+    | "month"
+    | "week"
+    | "time"
+    | "datetime-local"
+    | "number"
+    | "color" = "text";

+  @property({ type: String })
+  public label = "";
+
+  @property({ type: String })
+  public placeholder = "";
+
+  @property({ type: String })
+  public prefix = "";
+
+  @property({ type: String })
+  public suffix = "";
+
+  @property({ type: Boolean })
  // @ts-ignore
-  @property({ type: Boolean }) public icon = false;
+  public icon = false;

+  @property({ type: Boolean })
  // @ts-ignore
  // eslint-disable-next-line lit/attribute-names
-  @property({ type: Boolean }) public iconTrailing = false;
+  public iconTrailing = false;

-  @property() public autocomplete?: string;
+  @property({ type: Boolean })
+  public disabled = false;

-  @property({ type: Boolean }) public autocorrect = true;
+  @property({ type: Boolean })
+  public required = false;
+
+  @property({ type: Number, attribute: "minlength" })
+  public minLength = -1;
+
+  @property({ type: Number, attribute: "maxlength" })
+  public maxLength = -1;
+
+  @property({ type: Boolean, reflect: true })
+  public outlined = false;
+
+  @property({ type: String })
+  public helper = "";
+
+  @property({ type: Boolean, attribute: "validateoninitialrender" })
+  public validateOnInitialRender = false;
+
+  @property({ type: String, attribute: "validationmessage" })
+  public validationMessage = "";
+
+  @property({ type: Boolean, attribute: "autovalidate" })
+  public autoValidate = false;
+
+  @property({ type: String })
+  public pattern = "";
+
+  @property()
+  public min: number | string = "";
+
+  @property()
+  public max: number | string = "";
+
+  @property()
+  public step: number | "any" | null = null;
+
+  @property({ type: Number })
+  public size: number | null = null;
+
+  @property({ type: Boolean, attribute: "helperpersistent" })
+  public helperPersistent = false;
+
+  @property({ attribute: "charcounter" })
+  public charCounter: boolean | "external" | "internal" = false;
+
+  @property({ type: Boolean, attribute: "endaligned" })
+  public endAligned = false;
+
+  @property({ type: String, attribute: "inputmode" })
+  public inputMode = "";
+
+  @property({ type: Boolean, reflect: true, attribute: "readonly" })
+  public readOnly = false;
+
+  @property({ type: String })
+  public name = "";
+
+  @property({ type: String })
+  // eslint-disable-next-line lit/no-native-attributes
+  public autocapitalize = "";
+
+  // --- ha-textfield-specific properties ---
+
+  @property({ type: Boolean })
+  public invalid = false;
+
+  @property({ attribute: "error-message" })
+  public errorMessage?: string;
+
+  @property()
+  public autocomplete?: string;
+
+  @property({ type: Boolean })
+  public autocorrect = true;

  @property({ attribute: "input-spellcheck" })
  public inputSpellcheck?: string;

-  @query("input") public formElement!: HTMLInputElement;
+  @query("ha-input")
+  private _haInput?: HaInput;

-  override updated(changedProperties: PropertyValues) {
+  static shadowRootOptions: ShadowRootInit = {
+    mode: "open",
+    delegatesFocus: true,
+  };
+
+  public get formElement(): HTMLInputElement | undefined {
+    return (this._haInput as any)?._input?.input;
+  }
+
+  public select(): void {
+    this._haInput?.select();
+  }
+
+  public setSelectionRange(
+    selectionStart: number,
+    selectionEnd: number,
+    selectionDirection?: "forward" | "backward" | "none"
+  ): void {
+    this._haInput?.setSelectionRange(
+      selectionStart,
+      selectionEnd,
+      selectionDirection
+    );
+  }
+
+  public setRangeText(
+    replacement: string,
+    start?: number,
+    end?: number,
+    selectMode?: "select" | "start" | "end" | "preserve"
+  ): void {
+    this._haInput?.setRangeText(replacement, start, end, selectMode);
+  }
+
+  public checkValidity(): boolean {
+    return this._haInput?.checkValidity() ?? true;
+  }
+
+  public reportValidity(): boolean {
+    return this._haInput?.reportValidity() ?? true;
+  }
+
+  public setCustomValidity(message: string): void {
+    this.validationMessage = message;
+    this.invalid = !!message;
+  }
+
+  /** No-op. Preserved for backward compatibility. */
+  public layout(): void {
+    // no-op — mwc-textfield needed this for notched outline recalculation
+  }
+
+  protected override firstUpdated(changedProperties: PropertyValues): void {
+    super.firstUpdated(changedProperties);
+    if (this.validateOnInitialRender) {
+      this.reportValidity();
+    }
+  }
+
+  protected override updated(changedProperties: PropertyValues): void {
    super.updated(changedProperties);
-    if (
-      changedProperties.has("invalid") ||
-      changedProperties.has("errorMessage")
-    ) {
-      this.setCustomValidity(
-        this.invalid
-          ? this.errorMessage || this.validationMessage || "Invalid"
-          : ""
-      );
+
+    if (changedProperties.has("invalid") && this._haInput) {
      if (
        this.invalid ||
-        this.validateOnInitialRender ||
-        (changedProperties.has("invalid") &&
-          changedProperties.get("invalid") !== undefined)
+        (changedProperties.get("invalid") !== undefined && !this.invalid)
      ) {
-        // Only report validity if the field is invalid or the invalid state has changed from
-        // true to false to prevent setting empty required fields to invalid on first render
        this.reportValidity();
      }
    }
-    if (changedProperties.has("autocomplete")) {
-      if (this.autocomplete) {
-        this.formElement.setAttribute("autocomplete", this.autocomplete);
-      } else {
-        this.formElement.removeAttribute("autocomplete");
-      }
-    }
-    if (changedProperties.has("autocorrect")) {
-      if (this.autocorrect === false) {
-        this.formElement.setAttribute("autocorrect", "off");
-      } else {
-        this.formElement.removeAttribute("autocorrect");
-      }
-    }
-    if (changedProperties.has("inputSpellcheck")) {
-      if (this.inputSpellcheck) {
-        this.formElement.setAttribute("spellcheck", this.inputSpellcheck);
-      } else {
-        this.formElement.removeAttribute("spellcheck");
-      }
+  }
+
+  private _mapType(
+    type: string
+  ):
+    | "text"
+    | "search"
+    | "tel"
+    | "url"
+    | "email"
+    | "password"
+    | "date"
+    | "datetime-local"
+    | "number"
+    | "time" {
+    // mwc-textfield supports "color", "month", "week" which ha-input doesn't
+    switch (type) {
+      case "text":
+      case "search":
+      case "tel":
+      case "url":
+      case "email":
+      case "password":
+      case "date":
+      case "datetime-local":
+      case "number":
+      case "time":
+        return type;
+      default:
+        return "text";
    }
  }

-  protected override renderIcon(
-    _icon: string,
-    isTrailingIcon = false
-  ): TemplateResult {
-    const type = isTrailingIcon ? "trailing" : "leading";
-
+  protected override render(): TemplateResult {
+    const errorMsg = this.errorMessage || this.validationMessage;
    return html`
-      <span
-        class="mdc-text-field__icon mdc-text-field__icon--${type}"
-        tabindex=${isTrailingIcon ? 1 : -1}
+      <ha-input
+        .type=${this._mapType(this.type)}
+        .value=${this.value || undefined}
+        .label=${this.label}
+        .placeholder=${this.placeholder}
+        .disabled=${this.disabled}
+        .required=${this.required}
+        .readonly=${this.readOnly}
+        .pattern=${this.pattern || undefined}
+        .minlength=${this.minLength > 0 ? this.minLength : undefined}
+        .maxlength=${this.maxLength > 0 ? this.maxLength : undefined}
+        .min=${this.min !== "" ? this.min : undefined}
+        .max=${this.max !== "" ? this.max : undefined}
+        .step=${this.step ?? undefined}
+        .name=${this.name || undefined}
+        .autocomplete=${this.autocomplete}
+        .autocorrect=${this.autocorrect}
+        .spellcheck=${this.inputSpellcheck === "true"}
+        .inputmode=${this._mapInputMode(this.inputMode)}
+        .autocapitalize=${this.autocapitalize || ""}
+        .invalid=${this.invalid}
+        .validationMessage=${errorMsg || ""}
+        .autoValidate=${this.autoValidate}
+        .hint=${this.helper}
+        .withoutSpinButtons=${this.type === "number"}
+        @input=${this._onInput}
+        @change=${this._onChange}
      >
-        <slot name="${type}Icon"></slot>
-      </span>
+        ${this.icon
+          ? html`<slot name="leadingIcon" slot="start"></slot>`
+          : nothing}
+        ${this.prefix
+          ? html`<span class="prefix" slot="start">${this.prefix}</span>`
+          : nothing}
+        ${this.suffix
+          ? html`<span class="suffix" slot="end">${this.suffix}</span>`
+          : nothing}
+        ${this.iconTrailing
+          ? html`<slot name="trailingIcon" slot="end"></slot>`
+          : nothing}
+      </ha-input>
    `;
  }

-  static override styles = [
-    styles,
-    css`
-      .mdc-text-field__input {
-        width: var(--ha-textfield-input-width, 100%);
-      }
-      .mdc-text-field:not(.mdc-text-field--with-leading-icon) {
-        padding: var(--text-field-padding, 0px 16px);
-      }
-      .mdc-text-field__affix--suffix {
-        padding-left: var(--text-field-suffix-padding-left, 12px);
-        padding-right: var(--text-field-suffix-padding-right, 0px);
-        padding-inline-start: var(--text-field-suffix-padding-left, 12px);
-        padding-inline-end: var(--text-field-suffix-padding-right, 0px);
-        direction: ltr;
-      }
-      .mdc-text-field--with-leading-icon {
-        padding-inline-start: var(--text-field-suffix-padding-left, 0px);
-        padding-inline-end: var(--text-field-suffix-padding-right, 16px);
-        direction: var(--direction);
-      }
+  private _mapInputMode(
+    mode: string
+  ):
+    | "none"
+    | "text"
+    | "decimal"
+    | "numeric"
+    | "tel"
+    | "search"
+    | "email"
+    | "url"
+    | "" {
+    switch (mode) {
+      case "none":
+      case "text":
+      case "decimal":
+      case "numeric":
+      case "tel":
+      case "search":
+      case "email":
+      case "url":
+        return mode;
+      default:
+        return "";
+    }
+  }

-      .mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon {
-        padding-left: var(--text-field-suffix-padding-left, 0px);
-        padding-right: var(--text-field-suffix-padding-right, 0px);
-        padding-inline-start: var(--text-field-suffix-padding-left, 0px);
-        padding-inline-end: var(--text-field-suffix-padding-right, 0px);
-      }
-      .mdc-text-field:not(.mdc-text-field--disabled)
-        .mdc-text-field__affix--suffix {
-        color: var(--secondary-text-color);
-      }
+  private _onInput(): void {
+    this.value = this._haInput?.value ?? "";
+  }

-      .mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__icon {
-        color: var(--secondary-text-color);
-      }
+  private _onChange(): void {
+    this.value = this._haInput?.value ?? "";
+  }

-      .mdc-text-field__icon--leading {
-        margin-inline-start: 16px;
-        margin-inline-end: 8px;
-        direction: var(--direction);
-      }
+  static override styles = css`
+    :host {
+      display: inline-flex;
+      flex-direction: column;
+      outline: none;
+    }

-      .mdc-text-field__icon--trailing {
-        padding: var(--textfield-icon-trailing-padding, 12px);
-      }
+    ha-input {
+      --ha-input-padding-bottom: 0;
+      width: 100%;
+    }

-      .mdc-floating-label:not(.mdc-floating-label--float-above) {
-        max-width: calc(100% - 16px);
-      }
+    .prefix,
+    .suffix {
+      color: var(--secondary-text-color);
+    }

-      .mdc-floating-label--float-above {
-        max-width: calc((100% - 16px) / 0.75);
-        transition: none;
-      }
+    .prefix {
+      margin-inline-end: var(--text-field-prefix-padding-right);
+    }

-      input {
-        text-align: var(--text-field-text-align, start);
-      }
-
-      input[type="color"] {
-        height: 20px;
-      }
-
-      /* Edge, hide reveal password icon */
-      ::-ms-reveal {
-        display: none;
-      }
-
-      /* Chrome, Safari, Edge, Opera */
-      :host([no-spinner]) input::-webkit-outer-spin-button,
-      :host([no-spinner]) input::-webkit-inner-spin-button {
-        -webkit-appearance: none;
-        margin: 0;
-      }
-
-      input[type="color"]::-webkit-color-swatch-wrapper {
-        padding: 0;
-      }
-
-      /* Firefox */
-      :host([no-spinner]) input[type="number"] {
-        -moz-appearance: textfield;
-      }
-
-      .mdc-text-field__ripple {
-        overflow: hidden;
-      }
-
-      .mdc-text-field {
-        overflow: var(--text-field-overflow);
-      }
-
-      .mdc-floating-label {
-        padding-inline-end: 16px;
-        padding-inline-start: initial;
-        inset-inline-start: 16px !important;
-        inset-inline-end: initial !important;
-        transform-origin: var(--float-start);
-        direction: var(--direction);
-        text-align: var(--float-start);
-        box-sizing: border-box;
-        text-overflow: ellipsis;
-      }
-
-      .mdc-text-field--with-leading-icon.mdc-text-field--filled
-        .mdc-floating-label {
-        max-width: calc(
-          100% - 48px - var(--text-field-suffix-padding-left, 0px)
-        );
-        inset-inline-start: calc(
-          48px + var(--text-field-suffix-padding-left, 0px)
-        ) !important;
-        inset-inline-end: initial !important;
-        direction: var(--direction);
-      }
-
-      .mdc-text-field__input[type="number"] {
-        direction: var(--direction);
-      }
-      .mdc-text-field__affix--prefix {
-        padding-right: var(--text-field-prefix-padding-right, 2px);
-        padding-inline-end: var(--text-field-prefix-padding-right, 2px);
-        padding-inline-start: initial;
-      }
-
-      .mdc-text-field:not(.mdc-text-field--disabled)
-        .mdc-text-field__affix--prefix {
-        color: var(--mdc-text-field-label-ink-color);
-      }
-      #helper-text ha-markdown {
-        display: inline-block;
-      }
-    `,
-    // safari workaround - must be explicit
-    mainWindow.document.dir === "rtl"
-      ? css`
-          .mdc-text-field--with-leading-icon,
-          .mdc-text-field__icon--leading,
-          .mdc-floating-label,
-          .mdc-text-field--with-leading-icon.mdc-text-field--filled
-            .mdc-floating-label,
-          .mdc-text-field__input[type="number"] {
-            direction: rtl;
-            --direction: rtl;
-          }
-        `
-      : css``,
-  ];
+    /* Edge, hide reveal password icon */
+    ::-ms-reveal {
+      display: none;
+    }
+  `;
 }

 declare global {
--- a/src/dialogs/voice-assistant-setup/cloud/cloud-step-signin.ts
+++ b/src/dialogs/voice-assistant-setup/cloud/cloud-step-signin.ts
@@ -4,11 +4,9 @@ import { fireEvent } from "../../../common/dom/fire_event";
 import { navigate } from "../../../common/navigate";
 import "../../../components/ha-alert";
 import "../../../components/ha-button";
-import "../../../components/ha-password-field";
-import type { HaPasswordField } from "../../../components/ha-password-field";
+import "../../../components/ha-input";
+import type { HaInput } from "../../../components/ha-input";
 import "../../../components/ha-svg-icon";
-import "../../../components/ha-textfield";
-import type { HaTextField } from "../../../components/ha-textfield";
 import { cloudLogin } from "../../../data/cloud";
 import { showCloudAlreadyConnectedDialog } from "../../../panels/config/cloud/dialog-cloud-already-connected/show-dialog-cloud-already-connected";
 import type { HomeAssistant } from "../../../types";
@@ -28,9 +26,9 @@ export class CloudStepSignin extends LitElement {

  @state() private _checkConnection = true;

-  @query("#email", true) private _emailField!: HaTextField;
+  @query("#email", true) private _emailField!: HaInput;

-  @query("#password", true) private _passwordField!: HaPasswordField;
+  @query("#password", true) private _passwordField!: HaInput;

  render() {
    return html`<div class="content">
@@ -42,7 +40,7 @@ export class CloudStepSignin extends LitElement {
        ${this._error
          ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
          : ""}
-        <ha-textfield
+        <ha-input
          autofocus
          id="email"
          name="email"
@@ -54,12 +52,14 @@ export class CloudStepSignin extends LitElement {
          autocomplete="email"
          required
          @keydown=${this._keyDown}
-          validationMessage=${this.hass.localize(
+          .validationMessage=${this.hass.localize(
            "ui.panel.config.cloud.register.email_error_msg"
          )}
-        ></ha-textfield>
-        <ha-password-field
+        ></ha-input>
+        <ha-input
          id="password"
+          type="password"
+          password-toggle
          name="password"
          .label=${this.hass.localize(
            "ui.panel.config.cloud.register.password"
@@ -69,10 +69,10 @@ export class CloudStepSignin extends LitElement {
          minlength="8"
          required
          @keydown=${this._keyDown}
-          validationMessage=${this.hass.localize(
+          .validationMessage=${this.hass.localize(
            "ui.panel.config.cloud.register.password_error_msg"
          )}
-        ></ha-password-field>
+        ></ha-input>
      </div>
      <div class="footer">
        <ha-button
@@ -95,8 +95,8 @@ export class CloudStepSignin extends LitElement {
    const emailField = this._emailField;
    const passwordField = this._passwordField;

-    const email = emailField.value;
-    const password = passwordField.value;
+    const email = emailField.value as string;
+    const password = passwordField.value as string;

    if (!emailField.reportValidity()) {
      passwordField.reportValidity();
@@ -216,8 +216,7 @@ export class CloudStepSignin extends LitElement {
      :host {
        display: block;
      }
-      ha-textfield,
-      ha-password-field {
+      ha-textfield {
        display: block;
      }
    `,
--- a/src/dialogs/voice-assistant-setup/cloud/cloud-step-signup.ts
+++ b/src/dialogs/voice-assistant-setup/cloud/cloud-step-signup.ts
@@ -3,11 +3,9 @@ import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/ha-alert";
 import "../../../components/ha-button";
-import "../../../components/ha-password-field";
-import type { HaPasswordField } from "../../../components/ha-password-field";
+import "../../../components/ha-input";
+import type { HaInput } from "../../../components/ha-input";
 import "../../../components/ha-svg-icon";
-import "../../../components/ha-textfield";
-import type { HaTextField } from "../../../components/ha-textfield";
 import {
  cloudLogin,
  cloudRegister,
@@ -30,9 +28,9 @@ export class CloudStepSignup extends LitElement {

  @state() private _state?: "VERIFY";

-  @query("#email", true) private _emailField!: HaTextField;
+  @query("#email", true) private _emailField!: HaInput;

-  @query("#password", true) private _passwordField!: HaPasswordField;
+  @query("#password", true) private _passwordField!: HaInput;

  render() {
    return html`<div class="content">
@@ -53,7 +51,7 @@ export class CloudStepSignup extends LitElement {
                { email: this._email }
              )}
            </p>`
-          : html`<ha-textfield
+          : html`<ha-input
                autofocus
                id="email"
                name="email"
@@ -65,12 +63,14 @@ export class CloudStepSignup extends LitElement {
                autocomplete="email"
                required
                @keydown=${this._keyDown}
-                validationMessage=${this.hass.localize(
+                .validationMessage=${this.hass.localize(
                  "ui.panel.config.cloud.register.email_error_msg"
                )}
-              ></ha-textfield>
-              <ha-password-field
+              ></ha-input>
+              <ha-input
                id="password"
+                type="password"
+                password-toggle
                name="password"
                .label=${this.hass.localize(
                  "ui.panel.config.cloud.register.password"
@@ -80,10 +80,10 @@ export class CloudStepSignup extends LitElement {
                minlength="8"
                required
                @keydown=${this._keyDown}
-                validationMessage=${this.hass.localize(
+                .validationMessage=${this.hass.localize(
                  "ui.panel.config.cloud.register.password_error_msg"
                )}
-              ></ha-password-field>`}
+              ></ha-input>`}
      </div>
      <div class="footer side-by-side">
        ${this._state === "VERIFY"
@@ -131,19 +131,26 @@ export class CloudStepSignup extends LitElement {
    const emailField = this._emailField;
    const passwordField = this._passwordField;

+    let invalid = false;
+
    if (!emailField.reportValidity()) {
-      passwordField.reportValidity();
+      invalid = true;
      emailField.focus();
-      return;
    }

    if (!passwordField.reportValidity()) {
-      passwordField.focus();
+      if (!invalid) {
+        passwordField.focus();
+      }
+      invalid = true;
+    }
+
+    if (invalid) {
      return;
    }

-    const email = emailField.value.toLowerCase();
-    const password = passwordField.value;
+    const email = emailField.value!.toLowerCase();
+    const password = passwordField.value!;

    this._requestInProgress = true;

@@ -211,10 +218,6 @@ export class CloudStepSignup extends LitElement {
      .content {
        width: 100%;
      }
-      ha-textfield,
-      ha-password-field {
-        display: block;
-      }
    `,
  ];
 }
--- a/src/onboarding/restore-backup/onboarding-restore-backup-restore.ts
+++ b/src/onboarding/restore-backup/onboarding-restore-backup-restore.ts
@@ -1,25 +1,25 @@
 import { css, html, LitElement, nothing, type CSSResultGroup } from "lit";
-import { customElement, property, state, query } from "lit/decorators";
-import "../../components/ha-button";
+import { customElement, property, query, state } from "lit/decorators";
+import { formatDateTimeWithBrowserDefaults } from "../../common/datetime/format_date_time";
+import { fireEvent } from "../../common/dom/fire_event";
+import type { LocalizeFunc } from "../../common/translations/localize";
+import "../../components/buttons/ha-progress-button";
+import type { HaProgressButton } from "../../components/buttons/ha-progress-button";
 import "../../components/ha-alert";
+import "../../components/ha-button";
+import "../../components/ha-icon-button-arrow-prev";
+import "../../components/ha-input";
 import "../../components/ha-md-list";
 import "../../components/ha-md-list-item";
-import "../../components/buttons/ha-progress-button";
-import "../../components/ha-icon-button-arrow-prev";
-import "../../components/ha-password-field";
-import "../../panels/config/backup/components/ha-backup-data-picker";
-import "../../panels/config/backup/components/ha-backup-formfield-label";
-import type { LocalizeFunc } from "../../common/translations/localize";
 import {
  getPreferredAgentForDownload,
  type BackupContentExtended,
  type BackupData,
 } from "../../data/backup";
 import { restoreOnboardingBackup } from "../../data/backup_onboarding";
-import type { HaProgressButton } from "../../components/buttons/ha-progress-button";
-import { fireEvent } from "../../common/dom/fire_event";
+import "../../panels/config/backup/components/ha-backup-data-picker";
+import "../../panels/config/backup/components/ha-backup-formfield-label";
 import { onBoardingStyles } from "../styles";
-import { formatDateTimeWithBrowserDefaults } from "../../common/datetime/format_date_time";

@customElement("onboarding-restore-backup-restore")
 class OnboardingRestoreBackupRestore extends LitElement {
@@ -170,7 +170,7 @@ class OnboardingRestoreBackupRestore extends LitElement {
                `ui.panel.page-onboarding.restore.details.restore.encryption.description${this.mode === "cloud" ? "_cloud" : ""}`
              )}
            </span>
-            <ha-password-field
+            <ha-input
              .disabled=${this._loading}
              @input=${this._encryptionKeyChanged}
              .label=${this.localize(
@@ -178,13 +178,11 @@ class OnboardingRestoreBackupRestore extends LitElement {
              )}
              .value=${this._encryptionKey}
              @keydown=${this._keyDown}
-              .errorMessage=${this._encryptionKeyWrong
-                ? this.localize(
-                    "ui.panel.page-onboarding.restore.details.restore.encryption.incorrect_key"
-                  )
-                : ""}
+              .validationMessage=${this.localize(
+                "ui.panel.page-onboarding.restore.details.restore.encryption.incorrect_key"
+              )}
              .invalid=${this._encryptionKeyWrong}
-            ></ha-password-field>
+            ></ha-input>
          </div>`
        : nothing}

@@ -353,7 +351,7 @@ class OnboardingRestoreBackupRestore extends LitElement {
        .encryption {
          margin-bottom: 32px;
        }
-        .encryption ha-password-field {
+        .encryption ha-input {
          margin-top: 24px;
        }
        .actions {
--- a/src/panels/config/application_credentials/dialog-add-application-credential.ts
+++ b/src/panels/config/application_credentials/dialog-add-application-credential.ts
@@ -5,15 +5,14 @@ import { customElement, property, state } from "lit/decorators";
 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-fade-in";
 import "../../../components/ha-generic-picker";
+import "../../../components/ha-input";
 import "../../../components/ha-markdown";
-import "../../../components/ha-password-field";
 import type { PickerComboBoxItem } from "../../../components/ha-picker-combo-box";
 import "../../../components/ha-spinner";
-import "../../../components/ha-textfield";
-import "../../../components/ha-dialog";
 import type {
  ApplicationCredential,
  ApplicationCredentialsConfig,
@@ -69,6 +68,7 @@ export class DialogAddApplicationCredential extends LitElement {
    this._params = params;
    this._domain = params.selectedDomain;
    this._manifest = params.manifest;
+    this._invalid = false;
    this._name = "";
    this._description = "";
    this._clientId = "";
@@ -195,7 +195,7 @@ export class DialogAddApplicationCredential extends LitElement {
                      .content=${this._description}
                    ></ha-markdown>`
                  : nothing}
-                <ha-textfield
+                <ha-input
                  class="name"
                  name="name"
                  .label=${this.hass.localize(
@@ -205,12 +205,12 @@ export class DialogAddApplicationCredential extends LitElement {
                  .invalid=${this._invalid && !this._name}
                  required
                  @input=${this._handleValueChanged}
-                  .errorMessage=${this.hass.localize(
+                  .validationMessage=${this.hass.localize(
                    "ui.common.error_required"
                  )}
                  dialogInitialFocus
-                ></ha-textfield>
-                <ha-textfield
+                ></ha-input>
+                <ha-input
                  class="clientId"
                  name="clientId"
                  .label=${this.hass.localize(
@@ -220,16 +220,17 @@ export class DialogAddApplicationCredential extends LitElement {
                  .invalid=${this._invalid && !this._clientId}
                  required
                  @input=${this._handleValueChanged}
-                  .errorMessage=${this.hass.localize(
+                  .validationMessage=${this.hass.localize(
                    "ui.common.error_required"
                  )}
                  dialogInitialFocus
-                  .helper=${this.hass.localize(
+                  .hint=${this.hass.localize(
                    "ui.panel.config.application_credentials.editor.client_id_helper"
                  )}
-                  helperPersistent
-                ></ha-textfield>
-                <ha-password-field
+                ></ha-input>
+                <ha-input
+                  type="password"
+                  password-toggle
                  .label=${this.hass.localize(
                    "ui.panel.config.application_credentials.editor.client_secret"
                  )}
@@ -238,14 +239,13 @@ export class DialogAddApplicationCredential extends LitElement {
                  .invalid=${this._invalid && !this._clientSecret}
                  required
                  @input=${this._handleValueChanged}
-                  .errorMessage=${this.hass.localize(
+                  .validationMessage=${this.hass.localize(
                    "ui.common.error_required"
                  )}
-                  .helper=${this.hass.localize(
+                  .hint=${this.hass.localize(
                    "ui.panel.config.application_credentials.editor.client_secret_helper"
                  )}
-                  helperPersistent
-                ></ha-password-field>
+                ></ha-input>
              </div>

              <ha-dialog-footer slot="footer">
@@ -377,11 +377,6 @@ export class DialogAddApplicationCredential extends LitElement {
          display: flex;
          padding: var(--ha-space-2) 0;
        }
-        ha-textfield {
-          display: block;
-          margin-top: var(--ha-space-4);
-          margin-bottom: var(--ha-space-4);
-        }
        a {
          text-decoration: none;
        }
--- a/src/panels/config/backup/components/config/ha-backup-config-addon.ts
+++ b/src/panels/config/backup/components/config/ha-backup-config-addon.ts
@@ -1,10 +1,10 @@
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
+import "../../../../../components/ha-input";
+import type { HaInput } from "../../../../../components/ha-input";
 import "../../../../../components/ha-md-list";
 import "../../../../../components/ha-md-list-item";
-import "../../../../../components/ha-md-textfield";
-import type { HaMdTextfield } from "../../../../../components/ha-md-textfield";
 import "../../../../../components/ha-select";
 import type { SupervisorUpdateConfig } from "../../../../../data/supervisor/update";
 import type { HomeAssistant, ValueChangedEvent } from "../../../../../types";
@@ -62,7 +62,7 @@ class HaBackupConfigAddon extends LitElement {
              `ui.panel.config.backup.settings.app_update_backup.retention_description`
            )}
          </span>
-          <ha-md-textfield
+          <ha-input
            slot="end"
            @change=${this._backupRetentionChanged}
            .value=${this.supervisorUpdateConfig?.add_on_backup_retain_copies?.toString() ||
@@ -70,11 +70,13 @@ class HaBackupConfigAddon extends LitElement {
            type="number"
            min=${MIN_RETENTION_VALUE.toString()}
            step="1"
-            .suffixText=${this.hass.localize(
-              "ui.panel.config.backup.schedule.retention_units.copies"
-            )}
          >
-          </ha-md-textfield>
+            <span slot="end">
+              ${this.hass.localize(
+                "ui.panel.config.backup.schedule.retention_units.copies"
+              )}
+            </span>
+          </ha-input>
        </ha-md-list-item>
      </ha-md-list>
    `;
@@ -92,7 +94,7 @@ class HaBackupConfigAddon extends LitElement {
  }

  private _backupRetentionChanged(ev) {
-    const target = ev.currentTarget as HaMdTextfield;
+    const target = ev.currentTarget as HaInput;
    const add_on_backup_retain_copies = Number(target.value);
    if (add_on_backup_retain_copies >= MIN_RETENTION_VALUE) {
      fireEvent(this, "update-config-changed", {
@@ -115,7 +117,7 @@ class HaBackupConfigAddon extends LitElement {
    ha-select {
      min-width: 210px;
    }
-    ha-md-textfield {
+    ha-input {
      width: 210px;
    }
    @media all and (max-width: 450px) {
@@ -123,7 +125,7 @@ class HaBackupConfigAddon extends LitElement {
        min-width: 160px;
        width: 160px;
      }
-      ha-md-textfield {
+      ha-input {
        width: 160px;
      }
    }
--- a/src/panels/config/backup/components/config/ha-backup-config-retention.ts
+++ b/src/panels/config/backup/components/config/ha-backup-config-retention.ts
@@ -3,9 +3,9 @@ import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import { clamp } from "../../../../../common/number/clamp";
 import "../../../../../components/ha-expansion-panel";
+import "../../../../../components/ha-input";
+import type { HaInput } from "../../../../../components/ha-input";
 import "../../../../../components/ha-md-list-item";
-import "../../../../../components/ha-md-textfield";
-import type { HaMdTextfield } from "../../../../../components/ha-md-textfield";
 import "../../../../../components/ha-select";
 import type { HaSelect } from "../../../../../components/ha-select";
 import type { BackupConfig, Retention } from "../../../../../data/backup";
@@ -54,7 +54,7 @@ class HaBackupConfigRetention extends LitElement {

  @state() private _value = 3;

-  @query("#value") private _customValueField?: HaMdTextfield;
+  @query("#value") private _customValueField?: HaInput;

  @query("#type") private _customTypeField?: HaSelect;

@@ -141,7 +141,7 @@ class HaBackupConfigRetention extends LitElement {
                  "ui.panel.config.backup.schedule.custom_retention_label"
                )}
              </span>
-              <ha-md-textfield
+              <ha-input
                slot="end"
                @change=${this._retentionValueChanged}
                .value=${this._value.toString()}
@@ -151,7 +151,7 @@ class HaBackupConfigRetention extends LitElement {
                .max=${MAX_VALUE.toString()}
                step="1"
              >
-              </ha-md-textfield>
+              </ha-input>
              <ha-select
                slot="end"
                @selected=${this._retentionTypeChanged}
@@ -208,8 +208,8 @@ class HaBackupConfigRetention extends LitElement {

  private _retentionValueChanged(ev) {
    ev.stopPropagation();
-    const target = ev.currentTarget as HaMdTextfield;
-    const value = parseInt(target.value);
+    const target = ev.currentTarget as HaInput;
+    const value = parseInt(target.value ?? "");
    const clamped = clamp(value, MIN_VALUE, MAX_VALUE);
    target.value = clamped.toString();

@@ -258,14 +258,14 @@ class HaBackupConfigRetention extends LitElement {
        width: 160px;
      }
    }
-    ha-md-textfield#value {
+    ha-input#value {
      min-width: 70px;
    }
    ha-select#type {
      min-width: 100px;
    }
    @media all and (max-width: 450px) {
-      ha-md-textfield#value {
+      ha-input#value {
        min-width: 60px;
        margin: 0 -8px;
      }
--- a/src/panels/config/backup/components/config/ha-backup-config-schedule.ts
+++ b/src/panels/config/backup/components/config/ha-backup-config-schedule.ts
@@ -9,7 +9,6 @@ import "../../../../../components/ha-expansion-panel";
 import "../../../../../components/ha-formfield";
 import "../../../../../components/ha-md-list";
 import "../../../../../components/ha-md-list-item";
-import "../../../../../components/ha-md-textfield";
 import "../../../../../components/ha-select";
 import "../../../../../components/ha-time-input";
 import "../../../../../components/ha-tip";
--- a/src/panels/config/backup/dialogs/dialog-backup-onboarding.ts
+++ b/src/panels/config/backup/dialogs/dialog-backup-onboarding.ts
@@ -13,7 +13,6 @@ import "../../../../components/ha-icon-next";
 import "../../../../components/ha-dialog";
 import "../../../../components/ha-md-list";
 import "../../../../components/ha-md-list-item";
-import "../../../../components/ha-password-field";
 import "../../../../components/ha-svg-icon";
 import type {
  BackupConfig,
--- a/src/panels/config/backup/dialogs/dialog-change-backup-encryption-key.ts
+++ b/src/panels/config/backup/dialogs/dialog-change-backup-encryption-key.ts
@@ -11,7 +11,6 @@ import "../../../../components/ha-icon-button-prev";
 import "../../../../components/ha-dialog";
 import "../../../../components/ha-md-list";
 import "../../../../components/ha-md-list-item";
-import "../../../../components/ha-password-field";
 import {
  downloadEmergencyKit,
  generateEncryptionKey,
--- a/src/panels/config/backup/dialogs/dialog-download-decrypted-backup.ts
+++ b/src/panels/config/backup/dialogs/dialog-download-decrypted-backup.ts
@@ -4,9 +4,9 @@ import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-alert";
 import "../../../../components/ha-button";
-import "../../../../components/ha-dialog-footer";
 import "../../../../components/ha-dialog";
-import "../../../../components/ha-password-field";
+import "../../../../components/ha-dialog-footer";
+import "../../../../components/ha-input";
 import {
  canDecryptBackupOnDownload,
  getPreferredAgentForDownload,
@@ -85,12 +85,14 @@ class DialogDownloadDecryptedBackup extends LitElement implements HassDialog {
          )}
        </p>

-        <ha-password-field
+        <ha-input
+          type="password"
+          password-toggle
          .label=${this.hass.localize(
            "ui.panel.config.backup.dialogs.download.encryption_key"
          )}
          @input=${this._keyChanged}
-        ></ha-password-field>
+        ></ha-input>

        ${this._error
          ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
--- a/src/panels/config/backup/dialogs/dialog-restore-backup.ts
+++ b/src/panels/config/backup/dialogs/dialog-restore-backup.ts
@@ -5,13 +5,13 @@ import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-button";
 import "../../../../components/ha-dialog-footer";
+import "../../../../components/ha-input";
 import "../../../../components/ha-spinner";
-import "../../../../components/ha-password-field";

 import { isComponentLoaded } from "../../../../common/config/is_component_loaded";
 import "../../../../components/ha-alert";
-import "../../../../components/ha-svg-icon";
 import "../../../../components/ha-dialog";
+import "../../../../components/ha-svg-icon";
 import type { RestoreBackupParams } from "../../../../data/backup";
 import {
  fetchBackupConfig,
@@ -23,11 +23,11 @@ import type {
  RestoreBackupState,
 } from "../../../../data/backup_manager";
 import { subscribeBackupEvents } from "../../../../data/backup_manager";
+import { waitForIntegrationSetup } from "../../../../data/integration";
 import type { HassDialog } from "../../../../dialogs/make-dialog-manager";
 import { haStyle, haStyleDialog } from "../../../../resources/styles";
 import type { HomeAssistant } from "../../../../types";
 import type { RestoreBackupDialogParams } from "./show-dialog-restore-backup";
-import { waitForIntegrationSetup } from "../../../../data/integration";

 interface FormData {
  encryption_key_type: "config" | "custom";
@@ -211,14 +211,16 @@ class DialogRestoreBackup extends LitElement implements HassDialog {
    return html`
      ${this._renderEncryptionIntro()}

-      <ha-password-field
+      <ha-input
+        type="password"
+        password-toggle
        autofocus
        @input=${this._passwordChanged}
        .label=${this.hass.localize(
          "ui.panel.config.backup.dialogs.restore.encryption.input_label"
        )}
        .value=${this._userPassword || ""}
-      ></ha-password-field>
+      ></ha-input>
    `;
  }

@@ -387,10 +389,6 @@ class DialogRestoreBackup extends LitElement implements HassDialog {
          display: block;
          margin-top: 16px;
        }
-        ha-password-field {
-          display: block;
-          margin-top: 16px;
-        }
      `,
    ];
  }
--- a/src/panels/config/backup/dialogs/dialog-set-backup-encryption-key.ts
+++ b/src/panels/config/backup/dialogs/dialog-set-backup-encryption-key.ts
@@ -5,12 +5,11 @@ import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { copyToClipboard } from "../../../../common/util/copy-clipboard";
 import "../../../../components/ha-button";
+import "../../../../components/ha-dialog";
 import "../../../../components/ha-dialog-footer";
 import "../../../../components/ha-icon-button";
-import "../../../../components/ha-dialog";
 import "../../../../components/ha-md-list";
 import "../../../../components/ha-md-list-item";
-import "../../../../components/ha-password-field";
 import {
  downloadEmergencyKit,
  generateEncryptionKey,
--- a/src/panels/config/backup/dialogs/dialog-show-backup-encryption-key.ts
+++ b/src/panels/config/backup/dialogs/dialog-show-backup-encryption-key.ts
@@ -11,7 +11,6 @@ import "../../../../components/ha-icon-button-prev";
 import "../../../../components/ha-dialog";
 import "../../../../components/ha-md-list";
 import "../../../../components/ha-md-list-item";
-import "../../../../components/ha-password-field";
 import { downloadEmergencyKit } from "../../../../data/backup";
 import type { HassDialog } from "../../../../dialogs/make-dialog-manager";
 import { haStyle, haStyleDialog } from "../../../../resources/styles";
--- a/src/panels/config/backup/ha-config-backup-settings.ts
+++ b/src/panels/config/backup/ha-config-backup-settings.ts
@@ -13,7 +13,6 @@ import "../../../components/ha-dropdown";
 import "../../../components/ha-dropdown-item";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-icon-next";
-import "../../../components/ha-password-field";
 import "../../../components/ha-svg-icon";
 import type { BackupAgent, BackupConfig } from "../../../data/backup";
 import { updateBackupConfig } from "../../../data/backup";
--- a/src/panels/config/cloud/login/cloud-login-panel.ts
+++ b/src/panels/config/cloud/login/cloud-login-panel.ts
@@ -7,6 +7,7 @@ import { navigate } from "../../../../common/navigate";
 import "../../../../components/ha-alert";
 import "../../../../components/ha-card";
 import "../../../../components/ha-dropdown";
+import type { HaDropdownSelectEvent } from "../../../../components/ha-dropdown";
 import "../../../../components/ha-dropdown-item";
 import "../../../../components/ha-icon-next";
 import "../../../../components/ha-list";
@@ -24,7 +25,6 @@ import "../../ha-config-section";
 import { showSupportPackageDialog } from "../account/show-dialog-cloud-support-package";
 import "./cloud-login";
 import type { CloudLogin } from "./cloud-login";
-import type { HaDropdownSelectEvent } from "../../../../components/ha-dropdown";

@customElement("cloud-login-panel")
 export class CloudLoginPanel extends LitElement {
@@ -149,7 +149,7 @@ export class CloudLoginPanel extends LitElement {
  private _handleForgotPassword() {
    this._dismissFlash();
    fireEvent(this, "cloud-email-changed", {
-      value: this._cloudLoginElement.emailField.value,
+      value: this._cloudLoginElement.emailField.value ?? "",
    });
    navigate("/config/cloud/forgot-password");
  }
@@ -158,7 +158,7 @@ export class CloudLoginPanel extends LitElement {
    this._dismissFlash();

    fireEvent(this, "cloud-email-changed", {
-      value: this._cloudLoginElement.emailField.value,
+      value: this._cloudLoginElement.emailField.value ?? "",
    });
    navigate("/config/cloud/register");
  }
--- a/src/panels/config/cloud/login/cloud-login.ts
+++ b/src/panels/config/cloud/login/cloud-login.ts
@@ -2,26 +2,24 @@ import type { TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
+import type { LocalizeFunc } from "../../../../common/translations/localize";
 import "../../../../components/buttons/ha-progress-button";
 import "../../../../components/ha-alert";
-import "../../../../components/ha-card";
 import "../../../../components/ha-button";
-import "../../../../components/ha-password-field";
-import type { HaPasswordField } from "../../../../components/ha-password-field";
-import "../../../../components/ha-textfield";
-import type { HaTextField } from "../../../../components/ha-textfield";
-import { haStyle } from "../../../../resources/styles";
-import type { LocalizeFunc } from "../../../../common/translations/localize";
+import "../../../../components/ha-card";
+import "../../../../components/ha-input";
+import type { HaInput } from "../../../../components/ha-input";
+import { setAssistPipelinePreferred } from "../../../../data/assist_pipeline";
 import { cloudLogin } from "../../../../data/cloud";
+import { loginHaCloud } from "../../../../data/onboarding";
+import { haStyle } from "../../../../resources/styles";
+import type { HomeAssistant } from "../../../../types";
 import {
  showAlertDialog,
  showConfirmationDialog,
  showPromptDialog,
 } from "../../../lovelace/custom-card-helpers";
-import { setAssistPipelinePreferred } from "../../../../data/assist_pipeline";
 import { showCloudAlreadyConnectedDialog } from "../dialog-cloud-already-connected/show-dialog-cloud-already-connected";
-import type { HomeAssistant } from "../../../../types";
-import { loginHaCloud } from "../../../../data/onboarding";

@customElement("cloud-login")
 export class CloudLogin extends LitElement {
@@ -40,9 +38,9 @@ export class CloudLogin extends LitElement {

  @property({ type: Boolean, attribute: "card-less" }) public cardLess = false;

-  @query("#email", true) public emailField!: HaTextField;
+  @query("#email", true) public emailField!: HaInput;

-  @query("#password", true) private _passwordField!: HaPasswordField;
+  @query("#password", true) private _passwordField!: HaInput;

  @state() private _error?: string;

@@ -71,13 +69,14 @@ export class CloudLogin extends LitElement {
        ${this._error
          ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
          : nothing}
-        <ha-textfield
+        <ha-input
          .label=${this.localize(
            `ui.panel.${this.translationKeyPanel}.login.email`
          )}
          id="email"
          name="username"
          type="email"
+          hint="This should be a real email address, not an alias. If you used an alias to register, use the email address that the alias forwards to."
          autocomplete="username"
          required
          .value=${this.email ?? ""}
@@ -86,10 +85,13 @@ export class CloudLogin extends LitElement {
          .validationMessage=${this.localize(
            `ui.panel.${this.translationKeyPanel}.login.email_error_msg`
          )}
-        ></ha-textfield>
-        <ha-password-field
+        ></ha-input>
+        <ha-input
          id="password"
+          type="password"
+          password-toggle
          name="password"
+          hint="Use your nabu casa password, not your Home Assistant password. If you don't remember it, use the forgot password link below."
          .label=${this.localize(
            `ui.panel.${this.translationKeyPanel}.login.password`
          )}
@@ -101,7 +103,7 @@ export class CloudLogin extends LitElement {
          .validationMessage=${this.localize(
            `ui.panel.${this.translationKeyPanel}.login.password_error_msg`
          )}
-        ></ha-password-field>
+        ></ha-input>
      </div>
      <div class="card-actions">
        <ha-button
@@ -277,21 +279,29 @@ export class CloudLogin extends LitElement {

  private async _handleLogin() {
    if (!this._inProgress) {
+      let valid = true;
+
      if (!this.emailField.reportValidity()) {
        this.emailField.focus();
-        return;
+        valid = false;
      }

      if (!this._passwordField.reportValidity()) {
-        this._passwordField.focus();
+        if (valid) {
+          this._passwordField.focus();
+        }
+        valid = false;
+      }
+
+      if (!valid) {
        return;
      }

      this._inProgress = true;

      this._login(
-        this.emailField.value,
-        this._passwordField.value,
+        this.emailField.value as string,
+        this._passwordField.value as string,
        this.checkConnection
      );
    }
--- a/src/panels/config/cloud/register/cloud-register.ts
+++ b/src/panels/config/cloud/register/cloud-register.ts
@@ -5,14 +5,13 @@ import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/buttons/ha-progress-button";
 import "../../../../components/ha-alert";
 import "../../../../components/ha-card";
-import "../../../../components/ha-textfield";
-import type { HaTextField } from "../../../../components/ha-textfield";
+import "../../../../components/ha-input";
+import type { HaInput } from "../../../../components/ha-input";
 import { cloudRegister, cloudResendVerification } from "../../../../data/cloud";
 import "../../../../layouts/hass-subpage";
 import { haStyle } from "../../../../resources/styles";
 import type { HomeAssistant } from "../../../../types";
 import "../../ha-config-section";
-import "../../../../components/ha-password-field";

@customElement("cloud-register")
 export class CloudRegister extends LitElement {
@@ -30,9 +29,9 @@ export class CloudRegister extends LitElement {

  @state() private _error?: string;

-  @query("#email", true) private _emailField!: HaTextField;
+  @query("#email", true) private _emailField!: HaInput;

-  @query("#password", true) private _passwordField!: HaTextField;
+  @query("#password", true) private _passwordField!: HaInput;

  protected render(): TemplateResult {
    return html`
@@ -131,7 +130,7 @@ export class CloudRegister extends LitElement {
                ${this._error
                  ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
                  : ""}
-                <ha-textfield
+                <ha-input
                  autofocus
                  id="email"
                  name="email"
@@ -143,12 +142,14 @@ export class CloudRegister extends LitElement {
                  required
                  .value=${this.email ?? ""}
                  @keydown=${this._keyDown}
-                  validationMessage=${this.hass.localize(
+                  .validationMessage=${this.hass.localize(
                    "ui.panel.config.cloud.register.email_error_msg"
                  )}
-                ></ha-textfield>
-                <ha-password-field
+                ></ha-input>
+                <ha-input
                  id="password"
+                  type="password"
+                  password-toggle
                  name="password"
                  .label=${this.hass.localize(
                    "ui.panel.config.cloud.register.password"
@@ -158,10 +159,10 @@ export class CloudRegister extends LitElement {
                  minlength="8"
                  required
                  @keydown=${this._keyDown}
-                  validationMessage=${this.hass.localize(
+                  .validationMessage=${this.hass.localize(
                    "ui.panel.config.cloud.register.password_error_msg"
                  )}
-                ></ha-password-field>
+                ></ha-input>
              </div>
              <div class="card-actions">
                <button
@@ -209,8 +210,8 @@ export class CloudRegister extends LitElement {
      return;
    }

-    const email = emailField.value.toLowerCase();
-    const password = passwordField.value;
+    const email = emailField.value?.toLowerCase() || "";
+    const password = passwordField.value || "";

    this._requestInProgress = true;

@@ -235,7 +236,7 @@ export class CloudRegister extends LitElement {
      return;
    }

-    const email = emailField.value;
+    const email = emailField.value || "";

    const doResend = async (username: string) => {
      try {
--- a/src/panels/config/helpers/forms/ha-timer-form.ts
+++ b/src/panels/config/helpers/forms/ha-timer-form.ts
@@ -8,7 +8,7 @@ import "../../../../components/ha-duration-input";
 import type { HaDurationData } from "../../../../components/ha-duration-input";
 import "../../../../components/ha-formfield";
 import "../../../../components/ha-icon-picker";
-import "../../../../components/ha-textfield";
+import "../../../../components/ha-input";
 import type { ForDict } from "../../../../data/automation";
 import type { DurationDict, Timer } from "../../../../data/timer";
 import { haStyle } from "../../../../resources/styles";
@@ -66,21 +66,21 @@ class HaTimerForm extends LitElement {

    return html`
      <div class="form">
-        <ha-textfield
+        <ha-input
          .value=${this._name}
          .configValue=${"name"}
          @input=${this._valueChanged}
          .label=${this.hass!.localize(
            "ui.dialogs.helper_settings.generic.name"
          )}
-          autoValidate
+          auto-validate
          required
          .validationMessage=${this.hass!.localize(
            "ui.dialogs.helper_settings.required_error_msg"
          )}
          dialogInitialFocus
          .disabled=${this.disabled}
-        ></ha-textfield>
+        ></ha-input>
        <ha-icon-picker
          .hass=${this.hass}
          .value=${this._icon}
--- a/src/panels/config/network/supervisor-network.ts
+++ b/src/panels/config/network/supervisor-network.ts
@@ -11,16 +11,15 @@ import "../../../components/ha-dropdown-item";
 import "../../../components/ha-expansion-panel";
 import "../../../components/ha-formfield";
 import "../../../components/ha-icon-button";
+import "../../../components/ha-input";
+import type { HaInput } from "../../../components/ha-input";
 import "../../../components/ha-list";
 import "../../../components/ha-list-item";
-import "../../../components/ha-password-field";
 import "../../../components/ha-radio";
 import type { HaRadio } from "../../../components/ha-radio";
 import "../../../components/ha-spinner";
 import "../../../components/ha-tab-group";
 import "../../../components/ha-tab-group-tab";
-import "../../../components/ha-textfield";
-import type { HaTextField } from "../../../components/ha-textfield";
 import { extractApiErrorMessage } from "../../../data/hassio/common";
 import {
  type AccessPoint,
@@ -233,7 +232,9 @@ export class HassioNetwork extends LitElement {
                      ${this._wifiConfiguration.auth === "wpa-psk" ||
                      this._wifiConfiguration.auth === "wep"
                        ? html`
-                            <ha-password-field
+                            <ha-input
+                              type="password"
+                              password-toggle
                              id="psk"
                              .label=${this.hass.localize(
                                "ui.panel.config.network.supervisor.wifi_password"
@@ -241,7 +242,7 @@ export class HassioNetwork extends LitElement {
                              .version=${"wifi"}
                              @change=${this._handleInputValueChangedWifi}
                            >
-                            </ha-password-field>
+                            </ha-input>
                          `
                        : nothing}
                    `
@@ -388,7 +389,7 @@ export class HassioNetwork extends LitElement {
                  const { ip, mask, prefix } = parseAddress(address);
                  return html`
                    <div class="address-row">
-                      <ha-textfield
+                      <ha-input
                        id="address"
                        .label=${this.hass.localize(
                          "ui.panel.config.network.supervisor.ip"
@@ -399,10 +400,10 @@ export class HassioNetwork extends LitElement {
                        @change=${this._handleInputValueChanged}
                        .disabled=${disableInputs}
                      >
-                      </ha-textfield>
+                      </ha-input>
                      ${version === "ipv6"
                        ? html`
-                            <ha-textfield
+                            <ha-input
                              id="prefix"
                              .label=${this.hass.localize(
                                "ui.panel.config.network.supervisor.prefix"
@@ -413,10 +414,10 @@ export class HassioNetwork extends LitElement {
                              @change=${this._handleInputValueChanged}
                              .disabled=${disableInputs}
                            >
-                            </ha-textfield>
+                            </ha-input>
                          `
                        : html`
-                            <ha-textfield
+                            <ha-input
                              id="netmask"
                              .label=${this.hass.localize(
                                "ui.panel.config.network.supervisor.netmask"
@@ -427,7 +428,7 @@ export class HassioNetwork extends LitElement {
                              @change=${this._handleInputValueChanged}
                              .disabled=${disableInputs}
                            >
-                            </ha-textfield>
+                            </ha-input>
                          `}
                      ${this._interface![version].address.length > 1 &&
                      !disableInputs
@@ -461,7 +462,7 @@ export class HassioNetwork extends LitElement {
                    </ha-button>
                  `
                : nothing}
-              <ha-textfield
+              <ha-input
                id="gateway"
                .label=${this.hass.localize(
                  "ui.panel.config.network.supervisor.gateway"
@@ -471,12 +472,12 @@ export class HassioNetwork extends LitElement {
                @change=${this._handleInputValueChanged}
                .disabled=${disableInputs}
              >
-              </ha-textfield>
+              </ha-input>
              <div class="nameservers">
                ${nameservers.map(
                  (nameserver: string, index: number) => html`
                    <div class="address-row">
-                      <ha-textfield
+                      <ha-input
                        id="nameserver"
                        .label=${`${this.hass.localize(
                          "ui.panel.config.network.supervisor.dns_server"
@@ -486,10 +487,11 @@ export class HassioNetwork extends LitElement {
                        .index=${index}
                        @change=${this._handleInputValueChanged}
                      >
-                      </ha-textfield>
+                      </ha-input>
                      ${this._interface![version].nameservers?.length > 1
                        ? html`
                            <ha-icon-button
+                              slot="end"
                              .label=${this.hass.localize("ui.common.delete")}
                              .path=${mdiDeleteOutline}
                              .version=${version}
@@ -677,12 +679,13 @@ export class HassioNetwork extends LitElement {
  }

  private _handleInputValueChanged(ev: Event): void {
-    const source = ev.target as HaTextField;
+    const source = ev.target as HaInput;
    const value = source.value;
    const version = (ev.target as any).version as "ipv4" | "ipv6";
    const id = source.id;

    if (!value || !this._interface?.[version]) {
+      source.reportValidity();
      return;
    }

@@ -718,7 +721,7 @@ export class HassioNetwork extends LitElement {
  }

  private _handleInputValueChangedWifi(ev: Event): void {
-    const source = ev.target as HaTextField;
+    const source = ev.target as HaInput;
    const value = source.value;
    const id = source.id;

@@ -727,6 +730,7 @@ export class HassioNetwork extends LitElement {
      !this._wifiConfiguration ||
      this._wifiConfiguration![id] === value
    ) {
+      source.reportValidity();
      return;
    }
    this._dirty = true;
@@ -819,26 +823,25 @@ export class HassioNetwork extends LitElement {
          --expansion-panel-summary-padding: 0 16px;
          margin: 4px 0;
        }
-        ha-textfield {
-          display: block;
-          margin-top: 16px;
-        }
        .address-row {
          display: flex;
          flex-direction: row;
          gap: var(--ha-space-2);
          align-items: center;
        }
-        .address-row ha-textfield {
+        .address-row ha-input {
          flex: 1;
        }
        .address-row #prefix {
          flex: none;
          width: 95px;
        }
+        ha-icon-button {
+          color: var(--secondary-text-color);
+        }
        .address-row ha-icon-button {
          --ha-icon-button-size: 36px;
-          margin-top: 16px;
+          margin-top: var(--ha-space-5);
        }
        ha-dropdown {
          display: block;
--- a/src/panels/config/users/dialog-add-user.ts
+++ b/src/panels/config/users/dialog-add-user.ts
@@ -4,14 +4,14 @@ import { customElement, property, state } from "lit/decorators";
 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-icon-button";
+import "../../../components/ha-input";
+import type { HaInput } from "../../../components/ha-input";
 import "../../../components/ha-md-list-item";
 import "../../../components/ha-switch";
 import type { HaSwitch } from "../../../components/ha-switch";
-import "../../../components/ha-textfield";
-import type { HaTextField } from "../../../components/ha-textfield";
-import "../../../components/ha-dialog";
 import { createAuthForUser } from "../../../data/auth";
 import type { User } from "../../../data/user";
 import {
@@ -23,7 +23,6 @@ import {
 import { haStyleDialog } from "../../../resources/styles";
 import type { HomeAssistant, ValueChangedEvent } from "../../../types";
 import type { AddUserDialogParams } from "./show-dialog-add-user";
-import "../../../components/ha-password-field";

@customElement("dialog-add-user")
 export class DialogAddUser extends LitElement {
@@ -100,7 +99,7 @@ export class DialogAddUser extends LitElement {
        <div>
          ${this._error ? html` <div class="error">${this._error}</div> ` : ""}
          ${this._allowChangeName
-            ? html`<ha-textfield
+            ? html`<ha-input
                class="name"
                name="name"
                .label=${this.hass.localize(
@@ -114,9 +113,9 @@ export class DialogAddUser extends LitElement {
                @input=${this._handleValueChanged}
                @blur=${this._maybePopulateUsername}
                autofocus
-              ></ha-textfield>`
+              ></ha-input>`
            : ""}
-          <ha-textfield
+          <ha-input
            class="username"
            name="username"
            .label=${this.hass.localize(
@@ -127,9 +126,11 @@ export class DialogAddUser extends LitElement {
            @input=${this._handleValueChanged}
            .validationMessage=${this.hass.localize("ui.common.error_required")}
            ?autofocus=${!this._allowChangeName}
-          ></ha-textfield>
+          ></ha-input>

-          <ha-password-field
+          <ha-input
+            type="password"
+            password-toggle
            .label=${this.hass.localize(
              "ui.panel.config.users.add_user.password"
            )}
@@ -138,9 +139,11 @@ export class DialogAddUser extends LitElement {
            required
            @input=${this._handleValueChanged}
            .validationMessage=${this.hass.localize("ui.common.error_required")}
-          ></ha-password-field>
+          ></ha-input>

-          <ha-password-field
+          <ha-input
+            type="password"
+            password-toggle
            .label=${this.hass.localize(
              "ui.panel.config.users.add_user.password_confirm"
            )}
@@ -154,7 +157,7 @@ export class DialogAddUser extends LitElement {
            .errorMessage=${this.hass.localize(
              "ui.panel.config.users.add_user.password_not_match"
            )}
-          ></ha-password-field>
+          ></ha-input>
          <ha-md-list-item>
            <span slot="headline"
              >${this.hass.localize(
@@ -245,7 +248,7 @@ export class DialogAddUser extends LitElement {

  private _handleValueChanged(ev: ValueChangedEvent<string>): void {
    this._error = undefined;
-    const target = ev.target as HaTextField;
+    const target = ev.target as HaInput;
    this[`_${target.name}`] = target.value;
  }

@@ -318,11 +321,6 @@ export class DialogAddUser extends LitElement {
          display: flex;
          padding: 8px 0;
        }
-        ha-textfield,
-        ha-password-field {
-          display: block;
-          margin-bottom: 8px;
-        }
        ha-md-list-item {
          --md-list-item-leading-space: 0;
          --md-list-item-trailing-space: 0;
--- a/src/panels/profile/ha-change-password-card.ts
+++ b/src/panels/profile/ha-change-password-card.ts
@@ -1,20 +1,19 @@
 import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import "../../components/ha-card";
-import "../../components/ha-button";
-import "../../components/ha-spinner";
-import "../../components/ha-textfield";
-import "../../components/ha-password-field";
-import { haStyle } from "../../resources/styles";
-import type { HomeAssistant } from "../../types";
 import "../../components/ha-alert";
+import "../../components/ha-button";
+import "../../components/ha-card";
+import "../../components/ha-input";
+import "../../components/ha-spinner";
+import { changePassword, deleteAllRefreshTokens } from "../../data/auth";
+import type { RefreshToken } from "../../data/refresh_token";
 import {
  showAlertDialog,
  showConfirmationDialog,
 } from "../../dialogs/generic/show-dialog-box";
-import type { RefreshToken } from "../../data/refresh_token";
-import { changePassword, deleteAllRefreshTokens } from "../../data/auth";
+import { haStyle } from "../../resources/styles";
+import type { HomeAssistant } from "../../types";

@customElement("ha-change-password-card")
 class HaChangePasswordCard extends LitElement {
@@ -47,8 +46,10 @@ class HaChangePasswordCard extends LitElement {
            ? html`<ha-alert alert-type="success">${this._statusMsg}</ha-alert>`
            : ""}

-          <ha-password-field
+          <ha-input
            id="currentPassword"
+            type="password"
+            password-toggle
            name="currentPassword"
            .label=${this.hass.localize(
              "ui.panel.profile.change_password.current_password"
@@ -58,10 +59,12 @@ class HaChangePasswordCard extends LitElement {
            @input=${this._currentPasswordChanged}
            @change=${this._currentPasswordChanged}
            required
-          ></ha-password-field>
+          ></ha-input>

          ${this._currentPassword
-            ? html`<ha-password-field
+            ? html`<ha-input
+                  type="password"
+                  password-toggle
                  .label=${this.hass.localize(
                    "ui.panel.profile.change_password.new_password"
                  )}
@@ -72,8 +75,10 @@ class HaChangePasswordCard extends LitElement {
                  @change=${this._newPasswordChanged}
                  required
                  autoValidate
-                ></ha-password-field>
-                <ha-password-field
+                ></ha-input>
+                <ha-input
+                  type="password"
+                  password-toggle
                  .label=${this.hass.localize(
                    "ui.panel.profile.change_password.confirm_new_password"
                  )}
@@ -84,7 +89,7 @@ class HaChangePasswordCard extends LitElement {
                  @change=${this._newPasswordConfirmChanged}
                  required
                  autoValidate
-                ></ha-password-field>`
+                ></ha-input>`
            : ""}
        </div>

@@ -195,10 +200,6 @@ class HaChangePasswordCard extends LitElement {
    return [
      haStyle,
      css`
-        ha-textfield {
-          margin-top: 8px;
-          display: block;
-        }
        #currentPassword {
          margin-top: 0;
        }
--- a/src/resources/theme/color/wa.globals.ts
+++ b/src/resources/theme/color/wa.globals.ts
@@ -64,5 +64,10 @@ export const waColorStyles = css`

    --wa-focus-ring-color: var(--ha-color-neutral-60);
    --wa-shadow-l: 4px 8px 12px 0 rgba(0, 0, 0, 0.3);
+
+    --wa-form-control-background-color: var(--wa-color-surface-raised);
+    --wa-form-control-border-color: var(--ha-color-border-neutral-quiet);
+    --wa-form-control-value-color: var(--primary-text-color);
+    --wa-form-control-placeholder-color: var(--ha-color-text-secondary);
  }
 `;
--- a/src/resources/theme/wa.globals.ts
+++ b/src/resources/theme/wa.globals.ts
@@ -14,10 +14,8 @@ export const waMainStyles = css`
    --wa-space-l: var(--ha-space-6);
    --wa-space-xl: var(--ha-space-8);

-    --wa-form-control-padding-block: 0.75em;
-    --wa-form-control-value-line-height: var(--ha-line-height-condensed);
-
    --wa-font-weight-action: var(--ha-font-weight-medium);
+    --wa-font-weight-body: var(--ha-font-weight-normal);
    --wa-transition-normal: 150ms;
    --wa-transition-fast: 75ms;
    --wa-transition-easing: ease;
@@ -29,13 +27,25 @@ export const waMainStyles = css`
    --wa-border-radius-s: var(--ha-border-radius-sm);
    --wa-border-radius-m: var(--ha-border-radius-md);
    --wa-border-radius-l: var(--ha-border-radius-lg);
+    --wa-border-radius-pill: var(--ha-border-radius-pill);

    --wa-line-height-condensed: var(--ha-line-height-condensed);

+    --wa-font-size-s: var(--ha-font-size-s);
    --wa-font-size-m: var(--ha-font-size-m);
+    --wa-font-size-l: var(--ha-font-size-l);
    --wa-shadow-s: var(--ha-box-shadow-s);
    --wa-shadow-m: var(--ha-box-shadow-m);
    --wa-shadow-l: var(--ha-box-shadow-l);
+
+    --wa-form-control-padding-block: 0.75em;
+    --wa-form-control-value-line-height: var(--wa-line-height-condensed);
+    --wa-form-control-value-font-weight: var(--wa-font-weight-body);
+    --wa-form-control-border-radius: var(--wa-border-radius-l);
+    --wa-form-control-border-style: var(--wa-border-style);
+    --wa-form-control-border-width: var(--wa-border-width-s);
+    --wa-form-control-height: 40px;
+    --wa-form-control-padding-inline: var(--ha-space-3);
  }

  ${scrollLockStyles}
Author	SHA1	Message	Date
Wendelin	9b720c8a9f	Refactor ha-auth-form-string and ha-form-string to use ha-input component; remove ha-auth-textfield	2026-02-27 13:29:59 +01:00
Wendelin	643942f350	Update ha-input and supervisor-network styles for improved layout	2026-02-27 11:36:54 +01:00
Wendelin	544a0c2971	Refactor ha-textfield to integrate ha-input component	2026-02-27 11:25:49 +01:00
Wendelin	1b367e85da	Migrate ha-md-textfield	2026-02-27 10:57:25 +01:00
Wendelin	820c8d7975	Remove ha-password-field and migrate to ha-input	2026-02-27 10:15:51 +01:00
Wendelin	ab966d039a	Add ha-input component and update ha-timer-form to use it	2026-02-26 13:25:13 +01:00