Migrate form/selector components ha-textfield to ha-input (#30294)

* Migrate ha-textfield to ha-input across form components and update related logic * Apply suggestions from code review Co-authored-by: Petar Petrov <MindFreeze@users.noreply.github.com> --------- Co-authored-by: Petar Petrov <MindFreeze@users.noreply.github.com>
2026-04-02 00:27:49 +01:00 · 2026-03-24 14:18:09 +01:00
parent 5bbfa36228
commit 4bdac1f385
5 changed files with 68 additions and 67 deletions
--- a/src/components/ha-form/ha-form-float.ts
+++ b/src/components/ha-form/ha-form-float.ts
@@ -1,10 +1,10 @@
 import type { PropertyValues, TemplateResult } from "lit";
-import { css, html, LitElement } from "lit";
+import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import type { LocalizeFunc } from "../../common/translations/localize";
-import "../ha-textfield";
-import type { HaTextField } from "../ha-textfield";
+import "../input/ha-input";
+import type { HaInput } from "../input/ha-input";
 import type {
  HaFormElement,
  HaFormFloatData,
@@ -25,7 +25,7 @@ export class HaFormFloat extends LitElement implements HaFormElement {

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

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

  static shadowRootOptions = {
    ...LitElement.shadowRootOptions,
@@ -38,23 +38,25 @@ export class HaFormFloat extends LitElement implements HaFormElement {

  protected render(): TemplateResult {
    return html`
-      <ha-textfield
+      <ha-input
        type="number"
        inputMode="decimal"
        step="any"
        .label=${this.label}
-        .helper=${this.helper}
-        helperPersistent
+        .hint=${this.helper}
        .value=${this.data !== undefined ? this.data : ""}
        .disabled=${this.disabled}
        .required=${this.schema.required}
        .autoValidate=${this.schema.required}
-        .suffix=${this.schema.description?.suffix}
        .validationMessage=${this.schema.required
          ? this.localize?.("ui.common.error_required")
          : undefined}
-        @input=${this._valueChanged}
-      ></ha-textfield>
+        @input=${this._handleInput}
+      >
+        ${this.schema.description?.suffix
+          ? html`<span slot="end">${this.schema.description?.suffix}</span>`
+          : nothing}
+      </ha-input>
    `;
  }

@@ -64,9 +66,9 @@ export class HaFormFloat extends LitElement implements HaFormElement {
    }
  }

-  private _valueChanged(ev: Event) {
-    const source = ev.target as HaTextField;
-    const rawValue = source.value.replace(",", ".");
+  private _handleInput(ev: InputEvent) {
+    const source = ev.target as HaInput;
+    const rawValue = (source.value ?? "").replace(",", ".");

    let value: number | undefined;

@@ -74,6 +76,11 @@ export class HaFormFloat extends LitElement implements HaFormElement {
      return;
    }

+    // Allow user to keep typing decimal places (e.g., 5.0, 5.00, 5.10)
+    if (rawValue.includes(".") && rawValue.endsWith("0")) {
+      return;
+    }
+
    // Allow user to start typing a negative value
    if (rawValue === "-") {
      return;
@@ -105,9 +112,6 @@ export class HaFormFloat extends LitElement implements HaFormElement {
    :host([own-margin]) {
      margin-bottom: 5px;
    }
-    ha-textfield {
-      display: block;
-    }
  `;
 }

--- a/src/components/ha-form/ha-form-integer.ts
+++ b/src/components/ha-form/ha-form-integer.ts
@@ -1,5 +1,5 @@
 import type { PropertyValues, TemplateResult } from "lit";
-import { css, html, LitElement } from "lit";
+import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import type { LocalizeFunc } from "../../common/translations/localize";
@@ -7,8 +7,8 @@ import "../ha-checkbox";
 import type { HaCheckbox } from "../ha-checkbox";
 import "../ha-input-helper-text";
 import "../ha-slider";
-import "../ha-textfield";
-import type { HaTextField } from "../ha-textfield";
+import "../input/ha-input";
+import type { HaInput } from "../input/ha-input";
 import type {
  HaFormElement,
  HaFormIntegerData,
@@ -29,8 +29,8 @@ export class HaFormInteger extends LitElement implements HaFormElement {

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

-  @query("ha-textfield, ha-slider", true) private _input?:
-    | HaTextField
+  @query("ha-input, ha-slider", true) private _input?:
+    | HaInput
    | HTMLInputElement;

  private _lastValue?: HaFormIntegerData;
@@ -89,28 +89,30 @@ export class HaFormInteger extends LitElement implements HaFormElement {
            ? html`<ha-input-helper-text .disabled=${this.disabled}
                >${this.helper}</ha-input-helper-text
              >`
-            : ""}
+            : nothing}
        </div>
      `;
    }

    return html`
-      <ha-textfield
+      <ha-input
        type="number"
        inputMode="numeric"
        .label=${this.label}
-        .helper=${this.helper}
-        helperPersistent
-        .value=${this.data !== undefined ? this.data : ""}
+        .hint=${this.helper}
+        .value=${this.data !== undefined ? this.data.toString() : ""}
        .disabled=${this.disabled}
        .required=${this.schema.required}
        .autoValidate=${this.schema.required}
-        .suffix=${this.schema.description?.suffix}
        .validationMessage=${this.schema.required
          ? this.localize?.("ui.common.error_required")
          : undefined}
        @input=${this._valueChanged}
-      ></ha-textfield>
+      >
+        ${this.schema.description?.suffix
+          ? html`<span slot="end">${this.schema.description.suffix}</span>`
+          : nothing}
+      </ha-input>
    `;
  }

@@ -167,8 +169,8 @@ export class HaFormInteger extends LitElement implements HaFormElement {
    });
  }

-  private _valueChanged(ev: Event) {
-    const source = ev.target as HaTextField | HTMLInputElement;
+  private _valueChanged(ev: InputEvent) {
+    const source = ev.target as HaInput | HTMLInputElement;
    const rawValue = source.value;

    let value: number | undefined;
@@ -201,9 +203,6 @@ export class HaFormInteger extends LitElement implements HaFormElement {
    ha-slider {
      flex: 1;
    }
-    ha-textfield {
-      display: block;
-    }
  `;
 }

--- a/src/components/ha-selector/ha-selector-color-rgb.ts
+++ b/src/components/ha-selector/ha-selector-color-rgb.ts
@@ -3,13 +3,10 @@ import { customElement, property } from "lit/decorators";
 import { hex2rgb, rgb2hex } from "../../common/color/convert-color";
 import { fireEvent } from "../../common/dom/fire_event";
 import type { ColorRGBSelector } from "../../data/selector";
-import type { HomeAssistant } from "../../types";
-import "../ha-textfield";
+import "../input/ha-input";

@customElement("ha-selector-color_rgb")
 export class HaColorRGBSelector extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
  @property({ attribute: false }) public selector!: ColorRGBSelector;

  @property() public value?: string;
@@ -24,16 +21,15 @@ export class HaColorRGBSelector extends LitElement {

  protected render() {
    return html`
-      <ha-textfield
+      <ha-input
        type="color"
-        helperPersistent
        .value=${this.value ? rgb2hex(this.value as any) : ""}
        .label=${this.label || ""}
        .required=${this.required}
-        .helper=${this.helper}
+        .hint=${this.helper}
        .disabled=${this.disabled}
        @change=${this._valueChanged}
-      ></ha-textfield>
+      ></ha-input>
    `;
  }

@@ -50,14 +46,10 @@ export class HaColorRGBSelector extends LitElement {
      justify-content: flex-end;
      align-items: center;
    }
-    ha-textfield {
-      --text-field-padding-top: 8px;
-      --text-field-padding-bottom: 8px;
-      --text-field-padding-start: 8px;
-      --text-field-padding-end: 8px;
+    ha-input {
      min-width: 75px;
      flex-grow: 1;
-      margin: 0 4px;
+      margin: 0 var(--ha-space-1);
    }
  `;
 }
--- a/src/components/ha-selector/ha-selector-number.ts
+++ b/src/components/ha-selector/ha-selector-number.ts
@@ -1,19 +1,15 @@
 import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query } from "lit/decorators";
-import { classMap } from "lit/directives/class-map";
 import { fireEvent } from "../../common/dom/fire_event";
 import type { NumberSelector } from "../../data/selector";
-import type { HomeAssistant } from "../../types";
 import "../ha-input-helper-text";
 import "../ha-slider";
-import "../ha-textfield";
-import type { HaTextField } from "../ha-textfield";
+import "../input/ha-input";
+import type { HaInput } from "../input/ha-input";

@customElement("ha-selector-number")
 export class HaNumberSelector extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
  @property({ attribute: false }) public selector!: NumberSelector;

  @property({ type: Number }) public value?: number;
@@ -31,7 +27,7 @@ export class HaNumberSelector extends LitElement {

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

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

  private _valueStr = "";

@@ -99,29 +95,30 @@ export class HaNumberSelector extends LitElement {
              </ha-slider>
            `
          : nothing}
-        <ha-textfield
+        <ha-input
          .inputMode=${this.selector.number?.step === "any" ||
          (this.selector.number?.step ?? 1) % 1 !== 0
            ? "decimal"
            : "numeric"}
          .label=${!isBox ? undefined : this.label}
-          .placeholder=${this.placeholder}
-          class=${classMap({ single: isBox })}
+          .placeholder=${this.placeholder !== undefined
+            ? this.placeholder.toString()
+            : ""}
+          class=${isBox ? "single" : ""}
          .min=${this.selector.number?.min}
          .max=${this.selector.number?.max}
          .value=${this._valueStr ?? ""}
          .step=${this.selector.number?.step ?? 1}
-          helperPersistent
-          .helper=${isBox ? this.helper : undefined}
+          .hint=${isBox ? this.helper : undefined}
          .disabled=${this.disabled}
          .required=${this.required}
-          .suffix=${unit}
          type="number"
          autoValidate
-          ?no-spinner=${!isBox}
+          .withoutSpinButtons=${!isBox}
          @input=${this._handleInputChange}
        >
-        </ha-textfield>
+          ${unit ? html`<span slot="end">${unit}</span>` : nothing}
+        </ha-input>
      </div>
      ${!isBox && this.helper
        ? html`<ha-input-helper-text .disabled=${this.disabled}
@@ -166,11 +163,10 @@ export class HaNumberSelector extends LitElement {
      margin-inline-end: 16px;
      margin-inline-start: 0;
    }
-    ha-textfield {
-      --ha-textfield-input-width: 40px;
+    ha-input::part(wa-input) {
+      width: 40px;
    }
-    .single {
-      --ha-textfield-input-width: unset;
+    ha-input.single {
      flex: 1;
    }
  `;
--- a/src/components/input/ha-input.ts
+++ b/src/components/input/ha-input.ts
@@ -22,6 +22,7 @@ export type InputType =
  | "tel"
  | "text"
  | "time"
+  | "color"
  | "url";

@customElement("ha-input")
@@ -296,7 +297,9 @@ export class HaInput extends LitElement {
        .disabled=${this.disabled}
        class=${classMap({
          invalid: this.invalid || this._invalid,
-          "label-raised": this.value || (this.label && this.placeholder),
+          "label-raised":
+            (this.value !== undefined && this.value !== "") ||
+            (this.label && this.placeholder),
          "no-label": !this.label,
          "hint-hidden":
            !this.hint &&
@@ -512,6 +515,13 @@ export class HaInput extends LitElement {
    }
    :host([type="color"]) wa-input::part(input) {
      padding-top: var(--ha-space-6);
+      cursor: pointer;
+    }
+    :host([type="color"]) wa-input.no-label::part(input) {
+      padding: var(--ha-space-2);
+    }
+    :host([type="color"]) wa-input.no-label::part(base) {
+      padding: 0;
    }
    wa-input::part(input)::placeholder {
      color: var(--ha-color-neutral-60);