Display label inside field for entity picker and area picker

src/components/ha-area-picker.ts

@@ -357,7 +357,11 @@ export class HaAreaPicker extends LitElement {
 
   protected render(): TemplateResult {
     const placeholder =
-      this.placeholder ?? this.hass.localize("ui.components.area-picker.area");
+      this.placeholder ??
+      this.hass.localize("ui.components.area-picker.placeholder");
+    const notFoundLabel = this.hass.localize(
+      "ui.components.area-picker.no_match"
+    );
 
     const valueRenderer = this._computeValueRenderer(this.hass.areas);
 
@@ -367,9 +371,7 @@ export class HaAreaPicker extends LitElement {
         .autofocus=${this.autofocus}
         .label=${this.label}
         .helper=${this.helper}
-        .notFoundLabel=${this.hass.localize(
-          "ui.components.area-picker.no_match"
-        )}
+        .notFoundLabel=${notFoundLabel}
         .placeholder=${placeholder}
         .value=${this.value}
         .getItems=${this._getItems}

src/components/ha-generic-picker.ts

@@ -3,7 +3,6 @@ import type { RenderItemFunction } from "@lit-labs/virtualizer/virtualize";
 import { mdiPlaylistPlus } from "@mdi/js";
 import { css, html, LitElement, nothing, type CSSResultGroup } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
-import { ifDefined } from "lit/directives/if-defined";
 import { tinykeys } from "tinykeys";
 import { fireEvent } from "../common/dom/fire_event";
 import type { HomeAssistant } from "../types";
@@ -107,9 +106,6 @@ export class HaGenericPicker extends LitElement {
 
   protected render() {
     return html`
-      ${this.label
-        ? html`<label ?disabled=${this.disabled}>${this.label}</label>`
-        : nothing}
       <div class="container">
         <div id="picker">
           <slot name="field">
@@ -130,7 +126,7 @@ export class HaGenericPicker extends LitElement {
                   type="button"
                   class=${this._opened ? "opened" : ""}
                   compact
-                  aria-label=${ifDefined(this.label)}
+                  .label=${this.label}
                   @click=${this.open}
                   @clear=${this._clear}
                   .placeholder=${this.placeholder}

src/components/ha-picker-field.ts

@@ -8,6 +8,7 @@ import {
   type TemplateResult,
 } from "lit";
 import { customElement, property, query } from "lit/decorators";
+import { ifDefined } from "lit/directives/if-defined";
 import { fireEvent } from "../common/dom/fire_event";
 import "./ha-combo-box-item";
 import type { HaComboBoxItem } from "./ha-combo-box-item";
@@ -33,6 +34,8 @@ export class HaPickerField extends LitElement {
 
   @property() public placeholder?: string;
 
+  @property() public label?: string;
+
   @property({ attribute: "hide-clear-icon", type: Boolean })
   public hideClearIcon = false;
 
@@ -51,15 +54,35 @@ export class HaPickerField extends LitElement {
       !!this.value && !this.required && !this.disabled && !this.hideClearIcon;
 
     return html`
-      <ha-combo-box-item .disabled=${this.disabled} type="button" compact>
+      <ha-combo-box-item
+        .disabled=${this.disabled}
+        type="button"
+        compact
+        aria-label=${ifDefined(this.label)}
+      >
         ${this.value
           ? this.valueRenderer
             ? this.valueRenderer(this.value)
-            : html`<slot name="headline">${this.value}</slot>`
+            : html`<span slot="headline">${this.value}</span>`
           : html`
+              ${this.label
+                ? html`
+                    <span
+                      slot="headline"
+                      class="label ${this.placeholder
+                        ? "with-placeholder"
+                        : ""}"
+                      >${this.label}</span
+                    >
+                  `
+                : nothing}
+              ${this.placeholder
+                ? html`
                     <span slot="headline" class="placeholder">
                       ${this.placeholder}
                     </span>
+                  `
+                : nothing}
             `}
         ${showClearIcon
           ? html`
@@ -152,9 +175,24 @@ export class HaPickerField extends LitElement {
           width: 32px;
         }
 
+        .label {
+          padding: 0 8px;
+          color: var(--secondary-text-color);
+          line-height: var(--ha-line-height-normal);
+          font-size: var(--ha-font-size-m);
+          white-space: nowrap;
+        }
+
+        .label.with-placeholder {
+          line-height: var(--ha-line-height-condensed);
+          font-size: var(--ha-font-size-xs);
+        }
+
         .placeholder {
           color: var(--secondary-text-color);
           padding: 0 8px;
+          line-height: var(--ha-line-height-normal);
+          font-size: var(--ha-font-size-m);
         }
       `,
     ];

src/translations/en.json

@@ -824,6 +824,7 @@
         "add_new": "Add new area…",
         "no_areas": "You don't have any areas",
         "no_match": "No matching areas found",
+        "placeholder": "Select an area",
         "unassigned_areas": "Unassigned areas",
         "failed_create_area": "Failed to create area."
       },