Change layout of automation yaml editor (#8560)

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

@@ -17,6 +17,7 @@ import { forwardHaptic } from "../../data/haptics";
 import { HomeAssistant } from "../../types";
 import "../ha-icon-button";
 import "../ha-switch";
+import "../ha-formfield";
 
 const isOn = (stateObj?: HassEntity) =>
   stateObj !== undefined &&
@@ -29,6 +30,8 @@ export class HaEntityToggle extends LitElement {
 
   @property() public stateObj?: HassEntity;
 
+  @property() public label?: string;
+
   @internalProperty() private _isOn = false;
 
   protected render(): TemplateResult {
@@ -55,15 +58,21 @@ export class HaEntityToggle extends LitElement {
       `;
     }
 
+    const switchTemplate = html`<ha-switch
+      aria-label=${`Toggle ${computeStateName(this.stateObj)} ${
+        this._isOn ? "off" : "on"
+      }`}
+      .checked=${this._isOn}
+      .disabled=${UNAVAILABLE_STATES.includes(this.stateObj.state)}
+      @change=${this._toggleChanged}
+    ></ha-switch>`;
+
+    if (!this.label) {
+      return switchTemplate;
+    }
+
     return html`
-      <ha-switch
-        aria-label=${`Toggle ${computeStateName(this.stateObj)} ${
-          this._isOn ? "off" : "on"
-        }`}
-        .checked=${this._isOn}
-        .disabled=${UNAVAILABLE_STATES.includes(this.stateObj.state)}
-        @change=${this._toggleChanged}
-      ></ha-switch>
+      <ha-formfield .label=${this.label}>${switchTemplate}</ha-formfield>
     `;
   }