Multi textfield helper (#23649)

Co-authored-by: Bram Kragten <[email protected]>

Author: karwosts

src/components/ha-multi-textfield.ts

@@ -1,13 +1,14 @@
 import { mdiDeleteOutline, mdiPlus } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
-import { LitElement, css, html } from "lit";
+import { LitElement, css, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import { haStyle } from "../resources/styles";
 import type { HomeAssistant } from "../types";
 import "./ha-button";
 import "./ha-icon-button";
 import "./ha-textfield";
+import "./ha-input-helper-text";
 import type { HaTextField } from "./ha-textfield";
 
 @customElement("ha-multi-textfield")
@@ -20,6 +21,8 @@ class HaMultiTextField extends LitElement {
 
   @property() public label?: string;
 
+  @property({ attribute: false }) public helper?: string;
+
   @property({ attribute: false }) public inputType?: string;
 
   @property({ attribute: false }) public inputSuffix?: string;
@@ -69,12 +72,21 @@ class HaMultiTextField extends LitElement {
           </div>
         `;
       })}
-      <div class="layout horizontal center-center">
+      <div class="layout horizontal">
         <ha-button @click=${this._addItem} .disabled=${this.disabled}>
-          ${this.addLabel ?? this.hass?.localize("ui.common.add") ?? "Add"}
+          ${this.addLabel ??
+          (this.label
+            ? this.hass?.localize("ui.components.multi-textfield.add_item", {
+                item: this.label,
+              })
+            : this.hass?.localize("ui.common.add")) ??
+          "Add"}
           <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
         </ha-button>
       </div>
+      ${this.helper
+        ? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`
+        : nothing}
     `;
   }
 

src/components/ha-selector/ha-selector-text.ts

@@ -50,6 +50,7 @@ export class HaTextSelector extends LitElement {
           .inputType=${this.selector.text?.type}
           .inputSuffix=${this.selector.text?.suffix}
           .inputPrefix=${this.selector.text?.prefix}
+          .helper=${this.helper}
           .autocomplete=${this.selector.text?.autocomplete}
           @value-changed=${this._handleChange}
         >

src/translations/en.json

@@ -1115,6 +1115,9 @@
         "last_updated": "Last updated",
         "remaining_time": "Remaining time",
         "install_status": "Install status"
+      },
+      "multi-textfield": {
+        "add_item": "Add {item}"
       }
     },
     "dialogs": {