Add helpers to all selectors (#12230)

2025-07-13 12:26:35 +00:00 · 2022-04-05 13:26:52 -07:00 · 2022-04-05 13:26:52 -07:00 · 59595aabde
commit 59595aabde
parent 358f91c2a9
35 changed files with 239 additions and 75 deletions
--- a/gallery/src/pages/components/ha-selector.ts
+++ b/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;
--- a/src/components/device/ha-device-picker.ts
+++ b/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}
--- a/src/components/device/ha-devices-picker.ts
+++ b/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}
--- a/src/components/entity/ha-entities-picker.ts
+++ b/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>
--- a/src/components/entity/ha-entity-attribute-picker.ts
+++ b/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"
--- a/src/components/entity/ha-entity-picker.ts
+++ b/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}
--- a/src/components/ha-addon-picker.ts
+++ b/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"
--- a/src/components/ha-area-picker.ts
+++ b/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"
--- a/src/components/ha-areas-picker.ts
+++ b/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}
--- a/src/components/ha-base-time-input.ts
+++ b/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;
-    }
  `;
 }

--- a/src/components/ha-combo-box.ts
+++ b/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>
--- a/src/components/ha-date-input.ts
+++ b/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)
--- a/src/components/ha-icon-picker.ts
+++ b/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}
--- a/src/components/ha-input-helper-text.ts
+++ b/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;
+  }
+}
--- a/src/components/ha-labeled-slider.js
+++ b/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,
--- a/src/components/ha-selector/ha-selector-addon.ts
+++ b/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
--- a/src/components/ha-selector/ha-selector-area.ts
+++ b/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}
--- a/src/components/ha-selector/ha-selector-attribute.ts
+++ b/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
--- a/src/components/ha-selector/ha-selector-boolean.ts
+++ b/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}>
-      <ha-switch
-        .checked=${this.value}
-        @change=${this._handleChange}
-        .disabled=${this.disabled}
-      ></ha-switch>
-    </ha-formfield>`;
+    return html`
+      <ha-formfield alignEnd spaceBetween .label=${this.label}>
+        <ha-switch
+          .checked=${this.value}
+          @change=${this._handleChange}
+          .disabled=${this.disabled}
+        ></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;
      }
    `;
--- a/src/components/ha-selector/ha-selector-color-rgb.ts
+++ b/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>
--- a/src/components/ha-selector/ha-selector-color-temp.ts
+++ b/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>
--- a/src/components/ha-selector/ha-selector-date.ts
+++ b/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>
    `;
--- a/src/components/ha-selector/ha-selector-datetime.ts
+++ b/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
-        .label=${this.label}
-        .locale=${this.hass.locale}
-        .disabled=${this.disabled}
-        .required=${this.required}
-        .value=${values?.[0]}
-        @value-changed=${this._valueChanged}
-      >
-      </ha-date-input>
-      <ha-time-input
-        enable-second
-        .value=${values?.[1] || "0:00:00"}
-        .locale=${this.hass.locale}
-        .disabled=${this.disabled}
-        .required=${this.required}
-        @value-changed=${this._valueChanged}
-      ></ha-time-input>
+      <div class="input">
+        <ha-date-input
+          .label=${this.label}
+          .locale=${this.hass.locale}
+          .disabled=${this.disabled}
+          .required=${this.required}
+          .value=${values?.[0]}
+          @value-changed=${this._valueChanged}
+        >
+        </ha-date-input>
+        <ha-time-input
+          enable-second
+          .value=${values?.[1] || "0:00:00"}
+          .locale=${this.hass.locale}
+          .disabled=${this.disabled}
+          .required=${this.required}
+          @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;
--- a/src/components/ha-selector/ha-selector-device.ts
+++ b/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}
--- a/src/components/ha-selector/ha-selector-entity.ts
+++ b/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}
--- a/src/components/ha-selector/ha-selector-icon.ts
+++ b/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}
--- a/src/components/ha-selector/ha-selector-location.ts
+++ b/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}
--- a/src/components/ha-selector/ha-selector-media.ts
+++ b/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
--- a/src/components/ha-selector/ha-selector-number.ts
+++ b/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"
-        ? html`${this.label}${this.required ? "*" : ""}<ha-slider
+    const isBox = this.selector.number.mode === "box";
+
+    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;
--- a/src/components/ha-selector/ha-selector-select.ts
+++ b/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 ||
--- a/src/components/ha-selector/ha-selector-target.ts
+++ b/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}
--- a/src/components/ha-selector/ha-selector-time.ts
+++ b/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>
--- a/src/components/ha-target-picker.ts
+++ b/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) {
--- a/src/components/ha-time-input.ts
+++ b/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>
    `;
  }
--- a/src/components/map/ha-locations-editor.ts
+++ b/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
-      .hass=${this.hass}
-      .layers=${this._getLayers(this._circles, this._locationMarkers)}
-      .zoom=${this.zoom}
-      .autoFit=${this.autoFit}
-      .darkMode=${this.darkMode}
-    ></ha-map>`;
+    return html`
+      <ha-map
+        .hass=${this.hass}
+        .layers=${this._getLayers(this._circles, this._locationMarkers)}
+        .zoom=${this.zoom}
+        .autoFit=${this.autoFit}
+        .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%;
-      }
    `;
  }
 }