Add helpers to all selectors (#12230)

gallery/src/pages/components/ha-selector.ts

@@ -261,6 +261,8 @@ class DemoHaSelector extends LitElement implements ProvideHassElement {
 
   @state() private _required = false;
 
+  @state() private _helper = false;
+
   @state() private _label = true;
 
   private data = SCHEMAS.map(() => ({}));
@@ -418,6 +420,13 @@ class DemoHaSelector extends LitElement implements ProvideHassElement {
             @change=${this._handleOptionChange}
           ></ha-switch>
         </ha-formfield>
+        <ha-formfield label="Helper text">
+          <ha-switch
+            .name=${"helper"}
+            .checked=${this._helper}
+            @change=${this._handleOptionChange}
+          ></ha-switch>
+        </ha-formfield>
       </div>
       ${SCHEMAS.map((info, idx) => {
         const data = this.data[idx];
@@ -446,6 +455,7 @@ class DemoHaSelector extends LitElement implements ProvideHassElement {
                         .disabled=${this._disabled}
                         .required=${this._required}
                         @value-changed=${valueChanged}
+                        .helper=${this._helper ? "Helper text" : undefined}
                       ></ha-selector>
                     </ha-settings-row>
                   `
@@ -466,7 +476,8 @@ class DemoHaSelector extends LitElement implements ProvideHassElement {
       width: 60;
     }
     .options {
-      padding: 16px 48px;
+      max-width: 800px;
+      margin: 16px auto;
     }
     .options ha-formfield {
       margin-right: 16px;

src/components/device/ha-device-picker.ts

@@ -52,6 +52,8 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
 
   @property() public value?: string;
 
+  @property() public helper?: string;
+
   @property() public devices?: DeviceRegistryEntry[];
 
   @property() public areas?: AreaRegistryEntry[];
@@ -269,6 +271,7 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
           ? this.hass.localize("ui.components.device-picker.device")
           : this.label}
         .value=${this._value}
+        .helper=${this.helper}
         .renderer=${rowRenderer}
         .disabled=${this.disabled}
         .required=${this.required}

src/components/device/ha-devices-picker.ts

@@ -11,6 +11,8 @@ class HaDevicesPicker extends LitElement {
 
   @property() public value?: string[];
 
+  @property() public helper?: string;
+
   @property({ type: Boolean }) public required?: boolean;
 
   /**
@@ -64,6 +66,7 @@ class HaDevicesPicker extends LitElement {
       <div>
         <ha-device-picker
           .hass=${this.hass}
+          .helper=${this.helper}
           .includeDomains=${this.includeDomains}
           .excludeDomains=${this.excludeDomains}
           .includeDeviceClasses=${this.includeDeviceClasses}

src/components/entity/ha-entities-picker.ts

@@ -16,6 +16,8 @@ class HaEntitiesPickerLight extends LitElement {
 
   @property({ type: Boolean }) public required?: boolean;
 
+  @property() public helper?: string;
+
   /**
    * Show entities from specific domains.
    * @type {string}
@@ -110,6 +112,7 @@ class HaEntitiesPickerLight extends LitElement {
           .includeUnitOfMeasurement=${this.includeUnitOfMeasurement}
           .entityFilter=${this._entityFilter}
           .label=${this.pickEntityLabel}
+          .helper=${this.helper}
           .required=${this.required && !currentEntities.length}
           @value-changed=${this._addEntity}
         ></ha-entity-picker>

src/components/entity/ha-entity-attribute-picker.ts

@@ -28,6 +28,8 @@ class HaEntityAttributePicker extends LitElement {
 
   @property() public value?: string;
 
+  @property() public helper?: string;
+
   @property({ type: Boolean }) private _opened = false;
 
   @query("ha-combo-box", true) private _comboBox!: HaComboBox;
@@ -64,6 +66,7 @@ class HaEntityAttributePicker extends LitElement {
         )}
         .disabled=${this.disabled || !this.entityId}
         .required=${this.required}
+        .helper=${this.helper}
         .allowCustomValue=${this.allowCustomValue}
         item-value-path="value"
         item-label-path="label"

src/components/entity/ha-entity-picker.ts

@@ -48,6 +48,8 @@ export class HaEntityPicker extends LitElement {
 
   @property() public value?: string;
 
+  @property() public helper?: string;
+
   /**
    * Show entities from specific domains.
    * @type {Array}
@@ -304,6 +306,7 @@ export class HaEntityPicker extends LitElement {
         .label=${this.label === undefined
           ? this.hass.localize("ui.components.entity.entity-picker.entity")
           : this.label}
+        .helper=${this.helper}
         .allowCustomValue=${this.allowCustomEntity}
         .filteredItems=${this._states}
         .renderer=${rowRenderer}

src/components/ha-addon-picker.ts

@@ -29,6 +29,8 @@ class HaAddonPicker extends LitElement {
 
   @property() public value = "";
 
+  @property() public helper?: string;
+
   @state() private _addons?: HassioAddonInfo[];
 
   @property({ type: Boolean }) public disabled = false;
@@ -62,6 +64,7 @@ class HaAddonPicker extends LitElement {
         .value=${this._value}
         .required=${this.required}
         .disabled=${this.disabled}
+        .helper=${this.helper}
         .renderer=${rowRenderer}
         .items=${this._addons}
         item-value-path="slug"

src/components/ha-area-picker.ts

@@ -49,6 +49,8 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
 
   @property() public value?: string;
 
+  @property() public helper?: string;
+
   @property() public placeholder?: string;
 
   @property({ type: Boolean, attribute: "no-add" })
@@ -312,6 +314,7 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
     return html`
       <ha-combo-box
         .hass=${this.hass}
+        .helper=${this.helper}
         item-value-path="area_id"
         item-id-path="area_id"
         item-label-path="name"

src/components/ha-areas-picker.ts

@@ -15,6 +15,8 @@ export class HaAreasPicker extends SubscribeMixin(LitElement) {
 
   @property() public value?: string[];
 
+  @property() public helper?: string;
+
   @property() public placeholder?: string;
 
   @property({ type: Boolean, attribute: "no-add" })
@@ -90,6 +92,7 @@ export class HaAreasPicker extends SubscribeMixin(LitElement) {
           .noAdd=${this.noAdd}
           .hass=${this.hass}
           .label=${this.pickAreaLabel}
+          .helper=${this.helper}
           .includeDomains=${this.includeDomains}
           .excludeDomains=${this.excludeDomains}
           .includeDeviceClasses=${this.includeDeviceClasses}

src/components/ha-base-time-input.ts

@@ -5,6 +5,7 @@ import { fireEvent } from "../common/dom/fire_event";
 import { stopPropagation } from "../common/dom/stop_propagation";
 import "./ha-select";
 import "./ha-textfield";
+import "./ha-input-helper-text";
 
 export interface TimeChangedEvent {
   days?: number;
@@ -253,7 +254,9 @@ export class HaBaseTimeInput extends LitElement {
               <mwc-list-item value="PM">PM</mwc-list-item>
             </ha-select>`}
       </div>
-      ${this.helper ? html`<div class="helper">${this.helper}</div>` : ""}
+      ${this.helper
+        ? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`
+        : ""}
     `;
   }
 
@@ -350,13 +353,6 @@ export class HaBaseTimeInput extends LitElement {
       color: var(--mdc-theme-text-primary-on-background, rgba(0, 0, 0, 0.87));
       padding-left: 4px;
     }
-
-    .helper {
-      color: var(--mdc-text-field-label-ink-color, rgba(0, 0, 0, 0.6));
-      font-size: 0.75rem;
-      padding-left: 16px;
-      padding-right: 16px;
-    }
   `;
 }
 

src/components/ha-combo-box.ts

@@ -64,6 +64,8 @@ export class HaComboBox extends LitElement {
 
   @property() public validationMessage?: string;
 
+  @property() public helper?: string;
+
   @property({ attribute: "error-message" }) public errorMessage?: string;
 
   @property({ type: Boolean }) public invalid?: boolean;
@@ -147,6 +149,8 @@ export class HaComboBox extends LitElement {
           .suffix=${html`<div style="width: 28px;"></div>`}
           .icon=${this.icon}
           .invalid=${this.invalid}
+          .helper=${this.helper}
+          helperPersistent
         >
           <slot name="icon" slot="leadingIcon"></slot>
         </ha-textfield>

src/components/ha-date-input.ts

@@ -39,11 +39,15 @@ export class HaDateInput extends LitElement {
 
   @property() public label?: string;
 
+  @property() public helper?: string;
+
   render() {
     return html`<ha-textfield
       .label=${this.label}
+      .helper=${this.helper}
       .disabled=${this.disabled}
       iconTrailing
+      helperPersistent
       @click=${this._openDialog}
       .value=${this.value
         ? formatDateNumeric(new Date(this.value), this.locale)

src/components/ha-icon-picker.ts

@@ -31,6 +31,8 @@ export class HaIconPicker extends LitElement {
 
   @property() public label?: string;
 
+  @property() public helper?: string;
+
   @property() public placeholder?: string;
 
   @property() public fallbackPath?: string;
@@ -57,6 +59,7 @@ export class HaIconPicker extends LitElement {
         allow-custom-value
         .filteredItems=${iconItems}
         .label=${this.label}
+        .helper=${this.helper}
         .disabled=${this.disabled}
         .required=${this.required}
         .placeholder=${this.placeholder}

src/components/ha-input-helper-text.ts

@@ -0,0 +1,25 @@
+import { css, html, LitElement, TemplateResult } from "lit";
+import { customElement } from "lit/decorators";
+
+@customElement("ha-input-helper-text")
+class InputHelperText extends LitElement {
+  protected render(): TemplateResult {
+    return html`<slot></slot>`;
+  }
+
+  static styles = css`
+    :host {
+      display: block;
+      color: var(--mdc-text-field-label-ink-color, rgba(0, 0, 0, 0.6));
+      font-size: 0.75rem;
+      padding-left: 16px;
+      padding-right: 16px;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-input-helper-text": InputHelperText;
+  }
+}

src/components/ha-labeled-slider.js

@@ -46,6 +46,9 @@ class HaLabeledSlider extends PolymerElement {
           value="{{value}}"
         ></ha-slider>
       </div>
+      <template is="dom-if" if="[[helper]]">
+        <ha-input-helper-text>[[helper]]</ha-input-helper-text>
+      </template>
     `;
   }
 
@@ -62,6 +65,7 @@ class HaLabeledSlider extends PolymerElement {
       max: Number,
       pin: Boolean,
       step: Number,
+      helper: String,
 
       extra: {
         type: Boolean,

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

@@ -14,6 +14,8 @@ export class HaAddonSelector extends LitElement {
 
   @property() public label?: string;
 
+  @property() public helper?: string;
+
   @property({ type: Boolean }) public disabled = false;
 
   @property({ type: Boolean }) public required = true;
@@ -23,6 +25,7 @@ export class HaAddonSelector extends LitElement {
       .hass=${this.hass}
       .value=${this.value}
       .label=${this.label}
+      .helper=${this.helper}
       .disabled=${this.disabled}
       .required=${this.required}
       allow-custom-entity

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

@@ -18,6 +18,8 @@ export class HaAreaSelector extends LitElement {
 
   @property() public label?: string;
 
+  @property() public helper?: string;
+
   @state() public _configEntries?: ConfigEntry[];
 
   @property({ type: Boolean }) public disabled = false;
@@ -47,6 +49,7 @@ export class HaAreaSelector extends LitElement {
           .hass=${this.hass}
           .value=${this.value}
           .label=${this.label}
+          .helper=${this.helper}
           no-add
           .deviceFilter=${this._filterDevices}
           .entityFilter=${this._filterEntities}
@@ -66,6 +69,7 @@ export class HaAreaSelector extends LitElement {
       <ha-areas-picker
         .hass=${this.hass}
         .value=${this.value}
+        .helper=${this.helper}
         .pickAreaLabel=${this.label}
         no-add
         .deviceFilter=${this._filterDevices}

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

@@ -16,6 +16,8 @@ export class HaSelectorAttribute extends SubscribeMixin(LitElement) {
 
   @property() public label?: string;
 
+  @property() public helper?: string;
+
   @property({ type: Boolean }) public disabled = false;
 
   @property({ type: Boolean }) public required = true;
@@ -32,6 +34,7 @@ export class HaSelectorAttribute extends SubscribeMixin(LitElement) {
         this.context?.filter_entity}
         .value=${this.value}
         .label=${this.label}
+        .helper=${this.helper}
         .disabled=${this.disabled}
         .required=${this.required}
         allow-custom-value

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

@@ -4,6 +4,7 @@ import { fireEvent } from "../../common/dom/fire_event";
 import { HomeAssistant } from "../../types";
 import "../ha-formfield";
 import "../ha-switch";
+import "../ha-input-helper-text";
 
 @customElement("ha-selector-boolean")
 export class HaBooleanSelector extends LitElement {
@@ -13,16 +14,23 @@ export class HaBooleanSelector extends LitElement {
 
   @property() public label?: string;
 
+  @property() public helper?: string;
+
   @property({ type: Boolean }) public disabled = false;
 
   protected render() {
-    return html`<ha-formfield alignEnd spaceBetween .label=${this.label}>
+    return html`
-      <ha-switch
+      <ha-formfield alignEnd spaceBetween .label=${this.label}>
-        .checked=${this.value}
+        <ha-switch
-        @change=${this._handleChange}
+          .checked=${this.value}
-        .disabled=${this.disabled}
+          @change=${this._handleChange}
-      ></ha-switch>
+          .disabled=${this.disabled}
-    </ha-formfield>`;
+        ></ha-switch>
+      </ha-formfield>
+      ${this.helper
+        ? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`
+        : ""}
+    `;
   }
 
   private _handleChange(ev) {
@@ -35,12 +43,10 @@ export class HaBooleanSelector extends LitElement {
 
   static get styles(): CSSResultGroup {
     return css`
-      :host {
-        height: 56px;
-        display: flex;
-      }
       ha-formfield {
-        width: 100%;
+        display: flex;
+        height: 56px;
+        align-items: center;
         --mdc-typography-body2-font-size: 1em;
       }
     `;

src/components/ha-selector/ha-selector-color-rgb.ts

@@ -16,6 +16,8 @@ export class HaColorRGBSelector extends LitElement {
 
   @property() public label?: string;
 
+  @property() public helper?: string;
+
   @property({ type: Boolean, reflect: true }) public disabled = false;
 
   @property({ type: Boolean }) public required = true;
@@ -24,9 +26,11 @@ export class HaColorRGBSelector extends LitElement {
     return html`
       <ha-textfield
         type="color"
+        helperPersistent
         .value=${this.value ? rgb2hex(this.value as any) : ""}
         .label=${this.label || ""}
         .required=${this.required}
+        .helper=${this.helper}
         .disalbled=${this.disabled}
         @change=${this._valueChanged}
       ></ha-textfield>

src/components/ha-selector/ha-selector-color-temp.ts

@@ -15,6 +15,8 @@ export class HaColorTempSelector extends LitElement {
 
   @property() public label?: string;
 
+  @property() public helper?: string;
+
   @property({ type: Boolean, reflect: true }) public disabled = false;
 
   @property({ type: Boolean }) public required = true;
@@ -29,6 +31,7 @@ export class HaColorTempSelector extends LitElement {
         .max=${this.selector.color_temp.max_mireds ?? 500}
         .value=${this.value}
         .disabled=${this.disabled}
+        .helper=${this.helper}
         .required=${this.required}
         @change=${this._valueChanged}
       ></ha-labeled-slider>

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

@@ -14,6 +14,8 @@ export class HaDateSelector extends LitElement {
 
   @property() public label?: string;
 
+  @property() public helper?: string;
+
   @property({ type: Boolean, reflect: true }) public disabled = false;
 
   @property({ type: Boolean }) public required = true;
@@ -26,6 +28,7 @@ export class HaDateSelector extends LitElement {
         .disabled=${this.disabled}
         .value=${this.value}
         .required=${this.required}
+        .helper=${this.helper}
       >
       </ha-date-input>
     `;

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

@@ -6,6 +6,7 @@ import type { HomeAssistant } from "../../types";
 import "../ha-date-input";
 import type { HaDateInput } from "../ha-date-input";
 import "../ha-time-input";
+import "../ha-input-helper-text";
 import type { HaTimeInput } from "../ha-time-input";
 
 @customElement("ha-selector-datetime")
@@ -18,6 +19,8 @@ export class HaDateTimeSelector extends LitElement {
 
   @property() public label?: string;
 
+  @property() public helper?: string;
+
   @property({ type: Boolean, reflect: true }) public disabled = false;
 
   @property({ type: Boolean }) public required = true;
@@ -30,23 +33,28 @@ export class HaDateTimeSelector extends LitElement {
     const values = this.value?.split(" ");
 
     return html`
-      <ha-date-input
+      <div class="input">
-        .label=${this.label}
+        <ha-date-input
-        .locale=${this.hass.locale}
+          .label=${this.label}
-        .disabled=${this.disabled}
+          .locale=${this.hass.locale}
-        .required=${this.required}
+          .disabled=${this.disabled}
-        .value=${values?.[0]}
+          .required=${this.required}
-        @value-changed=${this._valueChanged}
+          .value=${values?.[0]}
-      >
+          @value-changed=${this._valueChanged}
-      </ha-date-input>
+        >
-      <ha-time-input
+        </ha-date-input>
-        enable-second
+        <ha-time-input
-        .value=${values?.[1] || "0:00:00"}
+          enable-second
-        .locale=${this.hass.locale}
+          .value=${values?.[1] || "0:00:00"}
-        .disabled=${this.disabled}
+          .locale=${this.hass.locale}
-        .required=${this.required}
+          .disabled=${this.disabled}
-        @value-changed=${this._valueChanged}
+          .required=${this.required}
-      ></ha-time-input>
+          @value-changed=${this._valueChanged}
+        ></ha-time-input>
+      </div>
+      ${this.helper
+        ? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`
+        : ""}
     `;
   }
 
@@ -58,7 +66,7 @@ export class HaDateTimeSelector extends LitElement {
   }
 
   static styles = css`
-    :host {
+    .input {
       display: flex;
       align-items: center;
       flex-direction: row;

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

@@ -17,6 +17,8 @@ export class HaDeviceSelector extends LitElement {
 
   @property() public label?: string;
 
+  @property() public helper?: string;
+
   @state() public _configEntries?: ConfigEntry[];
 
   @property({ type: Boolean }) public disabled = false;
@@ -43,6 +45,7 @@ export class HaDeviceSelector extends LitElement {
           .hass=${this.hass}
           .value=${this.value}
           .label=${this.label}
+          .helper=${this.helper}
           .deviceFilter=${this._filterDevices}
           .includeDeviceClasses=${this.selector.device.entity?.device_class
             ? [this.selector.device.entity.device_class]
@@ -62,6 +65,7 @@ export class HaDeviceSelector extends LitElement {
       <ha-devices-picker
         .hass=${this.hass}
         .value=${this.value}
+        .helper=${this.helper}
         .includeDeviceClasses=${this.selector.device.entity?.device_class
           ? [this.selector.device.entity.device_class]
           : undefined}

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

@@ -23,6 +23,8 @@ export class HaEntitySelector extends LitElement {
 
   @property() public label?: string;
 
+  @property() public helper?: string;
+
   @property({ type: Boolean }) public disabled = false;
 
   @property({ type: Boolean }) public required = true;
@@ -33,6 +35,7 @@ export class HaEntitySelector extends LitElement {
         .hass=${this.hass}
         .value=${this.value}
         .label=${this.label}
+        .helper=${this.helper}
         .includeEntities=${this.selector.entity.include_entities}
         .excludeEntities=${this.selector.entity.exclude_entities}
         .entityFilter=${this._filterEntities}
@@ -47,6 +50,7 @@ export class HaEntitySelector extends LitElement {
       <ha-entities-picker
         .hass=${this.hass}
         .value=${this.value}
+        .helper=${this.helper}
         .entityFilter=${this._filterEntities}
         .includeEntities=${this.selector.entity.include_entities}
         .excludeEntities=${this.selector.entity.exclude_entities}

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

@@ -15,6 +15,8 @@ export class HaIconSelector extends LitElement {
 
   @property() public label?: string;
 
+  @property() public helper?: string;
+
   @property({ type: Boolean, reflect: true }) public disabled = false;
 
   @property({ type: Boolean }) public required = true;
@@ -26,6 +28,7 @@ export class HaIconSelector extends LitElement {
         .value=${this.value}
         .required=${this.required}
         .disabled=${this.disabled}
+        .helper=${this.helper}
         .fallbackPath=${this.selector.icon.fallbackPath}
         .placeholder=${this.selector.icon.placeholder}
         @value-changed=${this._valueChanged}

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

@@ -20,6 +20,8 @@ export class HaLocationSelector extends LitElement {
 
   @property() public label?: string;
 
+  @property() public helper?: string;
+
   @property({ type: Boolean, reflect: true }) public disabled = false;
 
   protected render() {
@@ -27,6 +29,7 @@ export class HaLocationSelector extends LitElement {
       <ha-locations-editor
         class="flex"
         .hass=${this.hass}
+        .helper=${this.helper}
         .locations=${this._location(this.selector, this.value)}
         @location-updated=${this._locationChanged}
         @radius-updated=${this._radiusChanged}

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

@@ -33,6 +33,8 @@ export class HaMediaSelector extends LitElement {
 
   @property() public label?: string;
 
+  @property() public helper?: string;
+
   @property({ type: Boolean, reflect: true }) public disabled = false;
 
   @property({ type: Boolean, reflect: true }) public required = true;
@@ -86,6 +88,7 @@ export class HaMediaSelector extends LitElement {
         .label=${this.label ||
         this.hass.localize("ui.components.selectors.media.pick_media_player")}
         .disabled=${this.disabled}
+        .helper=${this.helper}
         .required=${this.required}
         include-domains='["media_player"]'
         allow-custom-entity

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

@@ -6,6 +6,7 @@ import { NumberSelector } from "../../data/selector";
 import { HomeAssistant } from "../../types";
 import "../ha-slider";
 import "../ha-textfield";
+import "../ha-input-helper-text";
 
 @customElement("ha-selector-number")
 export class HaNumberSelector extends LitElement {
@@ -26,8 +27,13 @@ export class HaNumberSelector extends LitElement {
   @property({ type: Boolean }) public disabled = false;
 
   protected render() {
-    return html`${this.selector.number.mode !== "box"
+    const isBox = this.selector.number.mode === "box";
-        ? html`${this.label}${this.required ? "*" : ""}<ha-slider
+
+    return html`
+      ${this.label}${this.required ? "*" : ""}
+      <div class="input">
+        ${!isBox
+          ? html`<ha-slider
               .min=${this.selector.number.min}
               .max=${this.selector.number.max}
               .value=${this._value}
@@ -39,28 +45,33 @@ export class HaNumberSelector extends LitElement {
               @change=${this._handleSliderChange}
             >
             </ha-slider>`
+          : ""}
+        <ha-textfield
+          inputMode="numeric"
+          pattern="[0-9]+([\\.][0-9]+)?"
+          .label=${this.selector.number.mode !== "box" ? undefined : this.label}
+          .placeholder=${this.placeholder}
+          class=${classMap({ single: this.selector.number.mode === "box" })}
+          .min=${this.selector.number.min}
+          .max=${this.selector.number.max}
+          .value=${this.value ?? ""}
+          .step=${this.selector.number.step ?? 1}
+          helperPersistent
+          .helper=${isBox ? this.helper : undefined}
+          .disabled=${this.disabled}
+          .required=${this.required}
+          .suffix=${this.selector.number.unit_of_measurement}
+          type="number"
+          autoValidate
+          ?no-spinner=${this.selector.number.mode !== "box"}
+          @input=${this._handleInputChange}
+        >
+        </ha-textfield>
+      </div>
+      ${!isBox && this.helper
+        ? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`
         : ""}
-      <ha-textfield
+    `;
-        inputMode="numeric"
-        pattern="[0-9]+([\\.][0-9]+)?"
-        .label=${this.selector.number.mode !== "box" ? undefined : this.label}
-        .placeholder=${this.placeholder}
-        class=${classMap({ single: this.selector.number.mode === "box" })}
-        .min=${this.selector.number.min}
-        .max=${this.selector.number.max}
-        .value=${this.value ?? ""}
-        .step=${this.selector.number.step ?? 1}
-        helperPersistent
-        .helper=${this.helper}
-        .disabled=${this.disabled}
-        .required=${this.required}
-        .suffix=${this.selector.number.unit_of_measurement}
-        type="number"
-        autoValidate
-        ?no-spinner=${this.selector.number.mode !== "box"}
-        @input=${this._handleInputChange}
-      >
-      </ha-textfield>`;
   }
 
   private get _value() {
@@ -92,7 +103,7 @@ export class HaNumberSelector extends LitElement {
 
   static get styles(): CSSResultGroup {
     return css`
-      :host {
+      .input {
         display: flex;
         justify-content: space-between;
         align-items: center;

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

@@ -58,6 +58,7 @@ export class HaSelectSelector extends LitElement {
               `
             )}
           </div>
+          ${this._renderHelper()}
         `;
       }
 
@@ -76,6 +77,7 @@ export class HaSelectSelector extends LitElement {
             `
           )}
         </div>
+        ${this._renderHelper()}
       `;
     }
 
@@ -107,6 +109,7 @@ export class HaSelectSelector extends LitElement {
           item-label-path="label"
           .hass=${this.hass}
           .label=${this.label}
+          .helper=${this.helper}
           .disabled=${this.disabled}
           .required=${this.required && !value.length}
           .value=${this._filter}
@@ -131,6 +134,7 @@ export class HaSelectSelector extends LitElement {
           item-label-path="label"
           .hass=${this.hass}
           .label=${this.label}
+          .helper=${this.helper}
           .disabled=${this.disabled}
           .required=${this.required}
           .items=${options}
@@ -161,6 +165,12 @@ export class HaSelectSelector extends LitElement {
     `;
   }
 
+  private _renderHelper() {
+    return this.helper
+      ? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`
+      : "";
+  }
+
   private get _mode(): "list" | "dropdown" {
     return (
       this.selector.select.mode ||

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

@@ -26,6 +26,8 @@ export class HaTargetSelector extends SubscribeMixin(LitElement) {
 
   @property() public label?: string;
 
+  @property() public helper?: string;
+
   @state() private _entityPlaformLookup?: Record<string, string>;
 
   @state() private _configEntries?: ConfigEntry[];
@@ -64,6 +66,7 @@ export class HaTargetSelector extends SubscribeMixin(LitElement) {
     return html`<ha-target-picker
       .hass=${this.hass}
       .value=${this.value}
+      .helper=${this.helper}
       .deviceFilter=${this._filterDevices}
       .entityRegFilter=${this._filterRegEntities}
       .entityFilter=${this._filterEntities}

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

@@ -14,6 +14,8 @@ export class HaTimeSelector extends LitElement {
 
   @property() public label?: string;
 
+  @property() public helper?: string;
+
   @property({ type: Boolean }) public disabled = false;
 
   @property({ type: Boolean }) public required = false;
@@ -25,6 +27,7 @@ export class HaTimeSelector extends LitElement {
         .locale=${this.hass.locale}
         .disabled=${this.disabled}
         .required=${this.required}
+        .helper=${this.helper}
         .label=${this.label}
         enable-second
       ></ha-time-input>

src/components/ha-target-picker.ts

@@ -43,6 +43,7 @@ import type { HaEntityPickerEntityFilterFunc } from "./entity/ha-entity-picker";
 import "./ha-area-picker";
 import "./ha-icon-button";
 import "./ha-svg-icon";
+import "./ha-input-helper-text";
 
 @customElement("ha-target-picker")
 export class HaTargetPicker extends SubscribeMixin(LitElement) {
@@ -52,6 +53,8 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
 
   @property() public label?: string;
 
+  @property() public helper?: string;
+
   /**
    * Show only targets with entities from specific domains.
    * @type {Array}
@@ -213,7 +216,11 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
             </span>
           </span>
         </div>
-      </div>`;
+      </div>
+
+      ${this.helper
+        ? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`
+        : ""} `;
   }
 
   private async _showPicker(ev) {

src/components/ha-time-input.ts

@@ -14,6 +14,8 @@ export class HaTimeInput extends LitElement {
 
   @property() public label?: string;
 
+  @property() public helper?: string;
+
   @property({ type: Boolean }) public disabled = false;
 
   @property({ type: Boolean }) public required = false;
@@ -46,6 +48,7 @@ export class HaTimeInput extends LitElement {
         @value-changed=${this._timeChanged}
         .enableSecond=${this.enableSecond}
         .required=${this.required}
+        .helper=${this.helper}
       ></ha-base-time-input>
     `;
   }

src/components/map/ha-locations-editor.ts

@@ -21,6 +21,7 @@ import type { LeafletModuleType } from "../../common/dom/setup-leaflet-map";
 import type { HomeAssistant } from "../../types";
 import "./ha-map";
 import type { HaMap } from "./ha-map";
+import "../ha-input-helper-text";
 
 declare global {
   // for fire event
@@ -50,6 +51,8 @@ export class HaLocationsEditor extends LitElement {
 
   @property({ attribute: false }) public locations?: MarkerLocation[];
 
+  @property() public helper?: string;
+
   @property({ type: Boolean }) public autoFit = false;
 
   @property({ type: Number }) public zoom = 16;
@@ -102,13 +105,18 @@ export class HaLocationsEditor extends LitElement {
   }
 
   protected render(): TemplateResult {
-    return html`<ha-map
+    return html`
-      .hass=${this.hass}
+      <ha-map
-      .layers=${this._getLayers(this._circles, this._locationMarkers)}
+        .hass=${this.hass}
-      .zoom=${this.zoom}
+        .layers=${this._getLayers(this._circles, this._locationMarkers)}
-      .autoFit=${this.autoFit}
+        .zoom=${this.zoom}
-      .darkMode=${this.darkMode}
+        .autoFit=${this.autoFit}
-    ></ha-map>`;
+        .darkMode=${this.darkMode}
+      ></ha-map>
+      ${this.helper
+        ? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`
+        : ""}
+    `;
   }
 
   private _getLayers = memoizeOne(
@@ -287,13 +295,10 @@ export class HaLocationsEditor extends LitElement {
 
   static get styles(): CSSResultGroup {
     return css`
-      :host {
+      ha-map {
         display: block;
         height: 300px;
       }
-      ha-map {
-        height: 100%;
-      }
     `;
   }
 }