Remove slot from ha-switch (#6133)

gallery/src/components/demo-cards.js

@@ -3,6 +3,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 import "../../../src/components/ha-switch";
+import "../../../src/components/ha-formfield";
 import "./demo-card";
 
 class DemoCards extends PolymerElement {
@@ -26,9 +27,10 @@ class DemoCards extends PolymerElement {
       </style>
       <app-toolbar>
         <div class="filters">
-          <ha-switch checked="[[_showConfig]]" on-change="_showConfigToggled">
+          <ha-formfield label="Show config">
-            Show config
+            <ha-switch checked="[[_showConfig]]" on-change="_showConfigToggled">
-          </ha-switch>
+            </ha-switch>
+          </ha-formfield>
         </div>
       </app-toolbar>
       <div class="cards">

src/components/ha-formfield.ts

@@ -0,0 +1,33 @@
+import "@material/mwc-formfield";
+import type { Formfield } from "@material/mwc-formfield";
+import { style } from "@material/mwc-formfield/mwc-formfield-css";
+import { css, CSSResult, customElement } from "lit-element";
+import { Constructor } from "../types";
+
+const MwcFormfield = customElements.get("mwc-formfield") as Constructor<
+  Formfield
+>;
+
+@customElement("ha-formfield")
+export class HaFormfield extends MwcFormfield {
+  protected static get styles(): CSSResult[] {
+    return [
+      style,
+      css`
+        ::slotted(ha-switch) {
+          margin-right: 10px;
+        }
+        [dir="rtl"] ::slotted(ha-switch),
+        ::slotted(ha-switch)[dir="rtl"] {
+          margin-left: 10px;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-formfield": HaFormfield;
+  }
+}

src/components/ha-switch.ts

@@ -1,15 +1,7 @@
-import { ripple } from "@material/mwc-ripple/ripple-directive";
 import "@material/mwc-switch";
 import type { Switch } from "@material/mwc-switch";
 import { style } from "@material/mwc-switch/mwc-switch-css";
-import {
+import { css, CSSResult, customElement, property } from "lit-element";
-  css,
-  CSSResult,
-  customElement,
-  html,
-  property,
-  query,
-} from "lit-element";
 import { forwardHaptic } from "../data/haptics";
 import { Constructor } from "../types";
 
@@ -22,18 +14,12 @@ export class HaSwitch extends MwcSwitch {
   // Do not add haptic when a user is required to press save.
   @property({ type: Boolean }) public haptic = false;
 
-  @query("slot") private _slot!: HTMLSlotElement;
-
   protected firstUpdated() {
     super.firstUpdated();
     this.style.setProperty(
       "--mdc-theme-secondary",
       "var(--switch-checked-color)"
     );
-    this.classList.toggle(
-      "slotted",
-      Boolean(this._slot.assignedNodes().length)
-    );
     this.addEventListener("change", () => {
       if (this.haptic) {
         forwardHaptic("light");
@@ -41,40 +27,10 @@ export class HaSwitch extends MwcSwitch {
     });
   }
 
-  protected render() {
-    return html`
-      <div class="mdc-switch">
-        <div class="mdc-switch__track"></div>
-        <div
-          class="mdc-switch__thumb-underlay"
-          .ripple="${ripple({
-            interactionNode: this,
-          })}"
-        >
-          <div class="mdc-switch__thumb">
-            <input
-              type="checkbox"
-              id="basic-switch"
-              class="mdc-switch__native-control"
-              role="switch"
-              @change="${this._haChangeHandler}"
-            />
-          </div>
-        </div>
-      </div>
-      <label for="basic-switch"><slot></slot></label>
-    `;
-  }
-
   protected static get styles(): CSSResult[] {
     return [
       style,
       css`
-        :host {
-          display: flex;
-          flex-direction: row;
-          align-items: center;
-        }
         .mdc-switch.mdc-switch--checked .mdc-switch__thumb {
           background-color: var(--switch-checked-button-color);
           border-color: var(--switch-checked-button-color);
@@ -91,18 +47,9 @@ export class HaSwitch extends MwcSwitch {
           background-color: var(--switch-unchecked-track-color);
           border-color: var(--switch-unchecked-track-color);
         }
-        :host(.slotted) .mdc-switch {
-          margin-right: 24px;
-        }
       `,
     ];
   }
-
-  private _haChangeHandler(e: Event) {
-    this.mdcFoundation.handleChange(e);
-    // catch "click" event and sync properties
-    this.checked = this.formElement.checked;
-  }
 }
 
 declare global {

src/dialogs/config-entry-system-options/dialog-config-entry-system-options.ts

@@ -11,6 +11,7 @@ import {
 } from "lit-element";
 import "../../components/dialog/ha-paper-dialog";
 import "../../components/ha-switch";
+import "../../components/ha-formfield";
 import type { HaSwitch } from "../../components/ha-switch";
 import {
   getConfigEntrySystemOptions,
@@ -82,13 +83,8 @@ class DialogConfigEntrySystemOptions extends LitElement {
                   ? html` <div class="error">${this._error}</div> `
                   : ""}
                 <div class="form">
-                  <ha-switch
+                  <ha-formfield
-                    .checked=${!this._disableNewEntities}
+                    .label=${html`<p>
-                    @change=${this._disableNewEntitiesChanged}
-                    .disabled=${this._submitting}
-                  >
-                    <div>
-                      <p>
                         ${this.hass.localize(
                           "ui.dialogs.config_entry_system_options.enable_new_entities_label"
                         )}
@@ -101,9 +97,15 @@ class DialogConfigEntrySystemOptions extends LitElement {
                             `component.${this._params.entry.domain}.title`
                           ) || this._params.entry.domain
                         )}
-                      </p>
+                      </p>`}
-                    </div>
+                  >
-                  </ha-switch>
+                    <ha-switch
+                      .checked=${!this._disableNewEntities}
+                      @change=${this._disableNewEntitiesChanged}
+                      .disabled=${this._submitting}
+                    >
+                    </ha-switch>
+                  </ha-formfield>
                 </div>
               `}
         </paper-dialog-scrollable>
@@ -172,9 +174,6 @@ class DialogConfigEntrySystemOptions extends LitElement {
           padding-bottom: 24px;
           color: var(--primary-text-color);
         }
-        p {
-          margin: 0;
-        }
         .secondary {
           color: var(--secondary-text-color);
         }

src/dialogs/mqtt-device-debug-info-dialog/dialog-mqtt-device-debug-info.ts

@@ -11,6 +11,7 @@ import {
 import { computeStateName } from "../../common/entity/compute_state_name";
 import "../../components/ha-dialog";
 import "../../components/ha-switch";
+import "../../components/ha-formfield";
 import type { HaSwitch } from "../../components/ha-switch";
 import { computeDeviceName } from "../../data/device_registry";
 import { fetchMQTTDebugInfo, MQTTDeviceDebugInfo } from "../../data/mqtt";
@@ -61,22 +62,28 @@ class DialogMQTTDeviceDebugInfo extends LitElement {
             "ui.dialogs.mqtt_device_debug_info.payload_display"
           )}
         </h4>
-        <ha-switch
+        <ha-formfield
-          .checked=${this._showDeserialized}
+          .label=${this.hass!.localize(
-          @change=${this._showDeserializedChanged}
-        >
-          ${this.hass!.localize(
             "ui.dialogs.mqtt_device_debug_info.deserialize"
           )}
-        </ha-switch>
-        <ha-switch
-          .checked=${this._showAsYaml}
-          @change=${this._showAsYamlChanged}
         >
-          ${this.hass!.localize(
+          <ha-switch
+            .checked=${this._showDeserialized}
+            @change=${this._showDeserializedChanged}
+          >
+          </ha-switch>
+        </ha-formfield>
+        <ha-formfield
+          .label=${this.hass!.localize(
             "ui.dialogs.mqtt_device_debug_info.show_as_yaml"
           )}
-        </ha-switch>
+        >
+          <ha-switch
+            .checked=${this._showAsYaml}
+            @change=${this._showAsYamlChanged}
+          >
+          </ha-switch>
+        </ha-formfield>
         <h4>
           ${this.hass!.localize("ui.dialogs.mqtt_device_debug_info.entities")}
         </h4>

src/panels/config/cloud/alexa/cloud-alexa.ts

@@ -33,6 +33,7 @@ import { showDomainTogglerDialog } from "../../../../dialogs/domain-toggler/show
 import "../../../../layouts/hass-loading-screen";
 import "../../../../layouts/hass-subpage";
 import type { HomeAssistant } from "../../../../types";
+import "../../../../components/ha-formfield";
 
 const DEFAULT_CONFIG_EXPOSE = true;
 const IGNORE_INTERFACES = ["Alexa.EndpointHealth"];
@@ -127,14 +128,19 @@ class CloudAlexa extends LitElement {
                 )
                 .join(", ")}
             </state-info>
-            <ha-switch
+            <ha-formfield
-              .entityId=${entity.entity_id}
+              .label=${this.hass!.localize(
-              .disabled=${!emptyFilter}
+                "ui.panel.config.cloud.alexa.expose"
-              .checked=${isExposed}
+              )}
-              @change=${this._exposeChanged}
             >
-              ${this.hass!.localize("ui.panel.config.cloud.alexa.expose")}
+              <ha-switch
-            </ha-switch>
+                .entityId=${entity.entity_id}
+                .disabled=${!emptyFilter}
+                .checked=${isExposed}
+                @change=${this._exposeChanged}
+              >
+              </ha-switch>
+            </ha-formfield>
           </div>
         </ha-card>
       `);

src/panels/config/cloud/google-assistant/cloud-google-assistant.ts

@@ -38,6 +38,7 @@ import "../../../../layouts/hass-loading-screen";
 import "../../../../layouts/hass-subpage";
 import type { HomeAssistant } from "../../../../types";
 import { showToast } from "../../../../util/toast";
+import "../../../../components/ha-formfield";
 
 const DEFAULT_CONFIG_EXPOSE = true;
 
@@ -127,14 +128,19 @@ class CloudGoogleAssistant extends LitElement {
                 .map((trait) => trait.substr(trait.lastIndexOf(".") + 1))
                 .join(", ")}
             </state-info>
-            <ha-switch
+            <ha-formfield
-              .entityId=${entity.entity_id}
+              .label=${this.hass!.localize(
-              .disabled=${!emptyFilter}
+                "ui.panel.config.cloud.google.expose"
-              .checked=${isExposed}
+              )}
-              @change=${this._exposeChanged}
             >
-              ${this.hass!.localize("ui.panel.config.cloud.google.expose")}
+              <ha-switch
-            </ha-switch>
+                .entityId=${entity.entity_id}
+                .disabled=${!emptyFilter}
+                .checked=${isExposed}
+                @change=${this._exposeChanged}
+              >
+              </ha-switch>
+            </ha-formfield>
             ${entity.might_2fa
               ? html`
                   <ha-switch

src/panels/config/entities/entity-registry-basic-editor.ts

@@ -88,31 +88,31 @@ export class HaEntityRegistryBasicEditor extends LitElement {
           .checked=${!this._disabledBy}
           @change=${this._disabledByChanged}
         >
-          <div>
-            <div>
-              ${this.hass.localize(
-                "ui.dialogs.entity_registry.editor.enabled_label"
-              )}
-            </div>
-            <div class="secondary">
-              ${this._disabledBy && this._disabledBy !== "user"
-                ? this.hass.localize(
-                    "ui.dialogs.entity_registry.editor.enabled_cause",
-                    "cause",
-                    this.hass.localize(
-                      `config_entry.disabled_by.${this._disabledBy}`
-                    )
-                  )
-                : ""}
-              ${this.hass.localize(
-                "ui.dialogs.entity_registry.editor.enabled_description"
-              )}
-              <br />${this.hass.localize(
-                "ui.dialogs.entity_registry.editor.note"
-              )}
-            </div>
-          </div>
         </ha-switch>
+        <div>
+          <div>
+            ${this.hass.localize(
+              "ui.dialogs.entity_registry.editor.enabled_label"
+            )}
+          </div>
+          <div class="secondary">
+            ${this._disabledBy && this._disabledBy !== "user"
+              ? this.hass.localize(
+                  "ui.dialogs.entity_registry.editor.enabled_cause",
+                  "cause",
+                  this.hass.localize(
+                    `config_entry.disabled_by.${this._disabledBy}`
+                  )
+                )
+              : ""}
+            ${this.hass.localize(
+              "ui.dialogs.entity_registry.editor.enabled_description"
+            )}
+            <br />${this.hass.localize(
+              "ui.dialogs.entity_registry.editor.note"
+            )}
+          </div>
+        </div>
       </div>
     `;
   }
@@ -127,9 +127,14 @@ export class HaEntityRegistryBasicEditor extends LitElement {
 
   static get styles() {
     return css`
+      ha-switch {
+        margin-right: 16px;
+      }
       .row {
         margin-top: 8px;
         color: var(--primary-text-color);
+        display: flex;
+        align-items: center;
       }
       .secondary {
         color: var(--secondary-text-color);

src/panels/config/entities/entity-registry-settings.ts

@@ -120,31 +120,31 @@ export class EntityRegistrySettings extends LitElement {
               .checked=${!this._disabledBy}
               @change=${this._disabledByChanged}
             >
-              <div>
-                <div>
-                  ${this.hass.localize(
-                    "ui.dialogs.entity_registry.editor.enabled_label"
-                  )}
-                </div>
-                <div class="secondary">
-                  ${this._disabledBy && this._disabledBy !== "user"
-                    ? this.hass.localize(
-                        "ui.dialogs.entity_registry.editor.enabled_cause",
-                        "cause",
-                        this.hass.localize(
-                          `config_entry.disabled_by.${this._disabledBy}`
-                        )
-                      )
-                    : ""}
-                  ${this.hass.localize(
-                    "ui.dialogs.entity_registry.editor.enabled_description"
-                  )}
-                  <br />${this.hass.localize(
-                    "ui.dialogs.entity_registry.editor.note"
-                  )}
-                </div>
-              </div>
             </ha-switch>
+            <div>
+              <div>
+                ${this.hass.localize(
+                  "ui.dialogs.entity_registry.editor.enabled_label"
+                )}
+              </div>
+              <div class="secondary">
+                ${this._disabledBy && this._disabledBy !== "user"
+                  ? this.hass.localize(
+                      "ui.dialogs.entity_registry.editor.enabled_cause",
+                      "cause",
+                      this.hass.localize(
+                        `config_entry.disabled_by.${this._disabledBy}`
+                      )
+                    )
+                  : ""}
+                ${this.hass.localize(
+                  "ui.dialogs.entity_registry.editor.enabled_description"
+                )}
+                <br />${this.hass.localize(
+                  "ui.dialogs.entity_registry.editor.note"
+                )}
+              </div>
+            </div>
           </div>
         </div>
       </paper-dialog-scrollable>
@@ -247,9 +247,14 @@ export class EntityRegistrySettings extends LitElement {
         mwc-button.warning {
           margin-right: auto;
         }
+        ha-switch {
+          margin-right: 16px;
+        }
         .row {
           margin-top: 8px;
           color: var(--primary-text-color);
+          display: flex;
+          align-items: center;
         }
       `,
     ];

src/panels/config/entities/ha-config-entities.ts

@@ -741,9 +741,6 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
         height: calc(100vh - 65px);
         display: block;
       }
-      ha-switch {
-        margin-top: 16px;
-      }
       ha-button-menu {
         margin-right: 8px;
       }

src/panels/config/helpers/forms/ha-input_boolean-form.ts

@@ -10,7 +10,6 @@ import {
 } from "lit-element";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-icon-input";
-import "../../../../components/ha-switch";
 import { InputBoolean } from "../../../../data/input_boolean";
 import { haStyle } from "../../../../resources/styles";
 import { HomeAssistant } from "../../../../types";

src/panels/config/helpers/forms/ha-input_datetime-form.ts

@@ -12,7 +12,6 @@ import {
 } from "lit-element";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-icon-input";
-import "../../../../components/ha-switch";
 import { InputDateTime } from "../../../../data/input_datetime";
 import { haStyle } from "../../../../resources/styles";
 import { HomeAssistant } from "../../../../types";

src/panels/config/helpers/forms/ha-input_number-form.ts

@@ -12,7 +12,6 @@ import {
 } from "lit-element";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-icon-input";
-import "../../../../components/ha-switch";
 import { InputNumber } from "../../../../data/input_number";
 import { haStyle } from "../../../../resources/styles";
 import { HomeAssistant } from "../../../../types";

src/panels/config/helpers/forms/ha-input_select-form.ts

@@ -16,7 +16,6 @@ import {
 } from "lit-element";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-icon-input";
-import "../../../../components/ha-switch";
 import type { InputSelect } from "../../../../data/input_select";
 import { showConfirmationDialog } from "../../../../dialogs/generic/show-dialog-box";
 import { haStyle } from "../../../../resources/styles";

src/panels/config/helpers/forms/ha-input_text-form.ts

@@ -12,7 +12,6 @@ import {
 } from "lit-element";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-icon-input";
-import "../../../../components/ha-switch";
 import { InputText } from "../../../../data/input_text";
 import { haStyle } from "../../../../resources/styles";
 import { HomeAssistant } from "../../../../types";

src/panels/config/lovelace/dashboards/dialog-lovelace-dashboard-detail.ts

@@ -10,7 +10,9 @@ import {
 } from "lit-element";
 import { createCloseHeading } from "../../../../components/ha-dialog";
 import "../../../../components/ha-icon-input";
-import { HaSwitch } from "../../../../components/ha-switch";
+import type { HaSwitch } from "../../../../components/ha-switch";
+import "../../../../components/ha-switch";
+import "../../../../components/ha-formfield";
 import { slugify } from "../../../../common/string/slugify";
 import {
   LovelaceDashboard,
@@ -141,20 +143,28 @@ export class DialogLovelaceDashboardDetail extends LitElement {
                         ></paper-input>
                       `
                     : ""}
-                  <ha-switch
+                  <ha-formfield
-                    .checked=${this._showInSidebar}
+                    .label=${this.hass.localize(
-                    @change=${this._showSidebarChanged}
-                    >${this.hass.localize(
                       "ui.panel.config.lovelace.dashboards.detail.show_sidebar"
                     )}
-                  </ha-switch>
+                  >
-                  <ha-switch
+                    <ha-switch
-                    .checked=${this._requireAdmin}
+                      .checked=${this._showInSidebar}
-                    @change=${this._requireAdminChanged}
+                      @change=${this._showSidebarChanged}
-                    >${this.hass.localize(
+                    >
+                    </ha-switch>
+                  </ha-formfield>
+                  <ha-formfield
+                    .label=${this.hass.localize(
                       "ui.panel.config.lovelace.dashboards.detail.require_admin"
                     )}
-                  </ha-switch>
+                  >
+                    <ha-switch
+                      .checked=${this._requireAdmin}
+                      @change=${this._requireAdminChanged}
+                    >
+                    </ha-switch>
+                  </ha-formfield>
                 </div>
               `}
         </div>

src/panels/config/users/dialog-add-user.ts

@@ -13,6 +13,7 @@ import {
 } from "lit-element";
 import "../../../components/ha-dialog";
 import "../../../components/ha-switch";
+import "../../../components/ha-formfield";
 import { createAuthForUser } from "../../../data/auth";
 import {
   createUser,
@@ -112,9 +113,12 @@ export class DialogAddUser extends LitElement {
             @value-changed=${this._passwordChanged}
             .errorMessage=${this.hass.localize("ui.common.error_required")}
           ></paper-input>
-          <ha-switch .checked=${this._isAdmin} @change=${this._adminChanged}>
+          <ha-formfield
-            ${this.hass.localize("ui.panel.config.users.editor.admin")}
+            .label=${this.hass.localize("ui.panel.config.users.editor.admin")}
-          </ha-switch>
+          >
+            <ha-switch .checked=${this._isAdmin} @change=${this._adminChanged}>
+            </ha-switch>
+          </ha-formfield>
           ${!this._isAdmin
             ? html`
                 <br />

src/panels/config/users/dialog-user-detail.ts

@@ -12,6 +12,7 @@ import {
 } from "lit-element";
 import { createCloseHeading } from "../../../components/ha-dialog";
 import "../../../components/ha-switch";
+import "../../../components/ha-formfield";
 import {
   SYSTEM_GROUP_ID_ADMIN,
   SYSTEM_GROUP_ID_USER,
@@ -99,13 +100,16 @@ class DialogUserDetail extends LitElement {
                 "ui.panel.config.users.editor.name"
               )}"
             ></paper-input>
-            <ha-switch
+            <ha-formfield
-              .disabled=${user.system_generated}
+              .label=${this.hass.localize("ui.panel.config.users.editor.admin")}
-              .checked=${this._isAdmin}
-              @change=${this._adminChanged}
             >
-              ${this.hass.localize("ui.panel.config.users.editor.admin")}
+              <ha-switch
-            </ha-switch>
+                .disabled=${user.system_generated}
+                .checked=${this._isAdmin}
+                @change=${this._adminChanged}
+              >
+              </ha-switch>
+            </ha-formfield>
             ${!this._isAdmin
               ? html`
                   <br />

src/panels/config/zone/dialog-zone-detail.ts

@@ -11,6 +11,7 @@ import {
 import { addDistanceToCoord } from "../../../common/location/add_distance_to_coord";
 import { createCloseHeading } from "../../../components/ha-dialog";
 import "../../../components/ha-switch";
+import "../../../components/ha-formfield";
 import "../../../components/map/ha-location-editor";
 import {
   defaultRadiusColor,
@@ -181,11 +182,16 @@ class DialogZoneDetail extends LitElement {
             <p>
               ${this.hass!.localize("ui.panel.config.zone.detail.passive_note")}
             </p>
-            <ha-switch .checked=${this._passive} @change=${this._passiveChanged}
+            <ha-formfield
-              >${this.hass!.localize(
+              .label=${this.hass!.localize(
                 "ui.panel.config.zone.detail.passive"
-              )}</ha-switch
+              )}
             >
+              <ha-switch
+                .checked=${this._passive}
+                @change=${this._passiveChanged}
+              ></ha-switch>
+            </ha-formfield>
           </div>
         </div>
         ${this._params.entry

src/panels/lovelace/editor/config-elements/hui-button-card-editor.ts

@@ -23,6 +23,7 @@ import {
   EntitiesEditorEvent,
 } from "../types";
 import "../../../../components/ha-switch";
+import "../../../../components/ha-formfield";
 import { configElementStyle } from "./config-elements-style";
 
 const cardConfigStruct = struct({
@@ -143,22 +144,25 @@ export class HuiButtonCardEditor extends LitElement
           ></ha-icon-input>
         </div>
         <div class="side-by-side">
-          <ha-switch
+        <ha-formfield .label=${this.hass.localize(
+          "ui.panel.lovelace.editor.card.generic.show_name"
+        )}>  
+        <ha-switch
             .checked="${this._config!.show_name !== false}"
             .configValue="${"show_name"}"
             @change="${this._valueChanged}"
-            >${this.hass.localize(
+            ></ha-switch
-              "ui.panel.lovelace.editor.card.generic.show_name"
-            )}</ha-switch
           >
-          <ha-switch
+        </ha-formfield>
+        <ha-formfield .label=${this.hass.localize(
+          "ui.panel.lovelace.editor.card.generic.show_icon"
+        )}>  
+        <ha-switch
             .checked="${this._config!.show_icon !== false}"
             .configValue="${"show_icon"}"
             @change="${this._valueChanged}"
-            >${this.hass.localize(
+            ></ha-switch
-              "ui.panel.lovelace.editor.card.generic.show_icon"
+          ></ha-formfield>
-            )}</ha-switch
-          >
         </div>
         <div class="side-by-side">
           <paper-input

src/panels/lovelace/editor/config-elements/hui-conditional-card-editor.ts

@@ -12,7 +12,6 @@ import {
 } from "lit-element";
 import { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/entity/ha-entity-picker";
-import "../../../../components/ha-switch";
 import { LovelaceConfig } from "../../../../data/lovelace";
 import { HomeAssistant } from "../../../../types";
 import { ConditionalCardConfig } from "../../cards/types";

src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts

@@ -13,6 +13,7 @@ import "../../../../components/entity/state-badge";
 import "../../../../components/ha-card";
 import "../../../../components/ha-icon";
 import "../../../../components/ha-switch";
+import "../../../../components/ha-formfield";
 import { HomeAssistant } from "../../../../types";
 import {
   EntitiesCardConfig,
@@ -88,14 +89,17 @@ export class HuiEntitiesCardEditor extends LitElement
           .configValue="${"theme"}"
           @value-changed="${this._valueChanged}"
         ></hui-theme-select-editor>
-        <ha-switch
+        <ha-formfield
-          .checked="${this._config!.show_header_toggle !== false}"
+          .label=${this.hass.localize(
-          .configValue="${"show_header_toggle"}"
-          @change="${this._valueChanged}"
-          >${this.hass.localize(
             "ui.panel.lovelace.editor.card.entities.show_header_toggle"
-          )}</ha-switch
+          )}
         >
+          <ha-switch
+            .checked="${this._config!.show_header_toggle !== false}"
+            .configValue="${"show_header_toggle"}"
+            @change="${this._valueChanged}"
+          ></ha-switch>
+        </ha-formfield>
       </div>
       <hui-entity-editor
         .hass=${this.hass}

src/panels/lovelace/editor/config-elements/hui-gauge-card-editor.ts

@@ -10,6 +10,7 @@ import {
 } from "lit-element";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-switch";
+import "../../../../components/ha-formfield";
 import { HomeAssistant } from "../../../../types";
 import { GaugeCardConfig, SeverityConfig } from "../../cards/types";
 import { struct } from "../../common/structs/struct";
@@ -141,13 +142,16 @@ export class HuiGaugeCardEditor extends LitElement
           .configValue=${"max"}
           @value-changed="${this._valueChanged}"
         ></paper-input>
-        <ha-switch
+        <ha-formfield
-          .checked="${this._config!.severity !== undefined}"
+          .label=${this.hass.localize(
-          @change="${this._toggleSeverity}"
-          >${this.hass.localize(
             "ui.panel.lovelace.editor.card.gauge.severity.define"
-          )}</ha-switch
+          )}
         >
+          <ha-switch
+            .checked="${this._config!.severity !== undefined}"
+            @change="${this._toggleSeverity}"
+          ></ha-switch
+        ></ha-formfield>
         ${this._config!.severity !== undefined
           ? html`
               <paper-input

src/panels/lovelace/editor/config-elements/hui-glance-card-editor.ts

@@ -13,6 +13,7 @@ import "../../../../components/entity/state-badge";
 import "../../../../components/ha-card";
 import "../../../../components/ha-icon";
 import "../../../../components/ha-switch";
+import "../../../../components/ha-formfield";
 import { HomeAssistant } from "../../../../types";
 import { ConfigEntity, GlanceCardConfig } from "../../cards/types";
 import { struct } from "../../common/structs/struct";
@@ -115,30 +116,41 @@ export class HuiGlanceCardEditor extends LitElement
           ></paper-input>
         </div>
         <div class="side-by-side">
-          <ha-switch
+          <ha-formfield
-            .checked=${this._config!.show_name !== false}
+            .label=${this.hass.localize(
-            .configValue="${"show_name"}"
-            @change="${this._valueChanged}"
-            >${this.hass.localize(
               "ui.panel.lovelace.editor.card.generic.show_name"
-            )}</ha-switch
+            )}
           >
-          <ha-switch
+            <ha-switch
-            .checked=${this._config!.show_icon !== false}
+              .checked=${this._config!.show_name !== false}
-            .configValue="${"show_icon"}"
+              .configValue="${"show_name"}"
-            @change="${this._valueChanged}"
+              @change="${this._valueChanged}"
-            >${this.hass.localize(
+            ></ha-switch>
+          </ha-formfield>
+          <ha-formfield
+            .label=${this.hass.localize(
               "ui.panel.lovelace.editor.card.generic.show_icon"
-            )}</ha-switch
+            )}
           >
-          <ha-switch
+            <ha-switch
-            .checked=${this._config!.show_state !== false}
+              .checked=${this._config!.show_icon !== false}
-            .configValue="${"show_state"}"
+              .configValue="${"show_icon"}"
-            @change="${this._valueChanged}"
+              @change="${this._valueChanged}"
-            >${this.hass.localize(
+            >
+            </ha-switch>
+          </ha-formfield>
+          <ha-formfield
+            .label=${this.hass.localize(
               "ui.panel.lovelace.editor.card.generic.show_state"
-            )}</ha-switch
+            )}
           >
+            <ha-switch
+              .checked=${this._config!.show_state !== false}
+              .configValue="${"show_state"}"
+              @change="${this._valueChanged}"
+            >
+            </ha-switch>
+          </ha-formfield>
         </div>
       </div>
       <hui-entity-editor

src/panels/lovelace/editor/config-elements/hui-map-card-editor.ts

@@ -24,6 +24,7 @@ import {
   EntitiesEditorEvent,
 } from "../types";
 import "../../../../components/ha-switch";
+import "../../../../components/ha-formfield";
 import { configElementStyle } from "./config-elements-style";
 
 const cardConfigStruct = struct({
@@ -119,14 +120,17 @@ export class HuiMapCardEditor extends LitElement implements LovelaceCardEditor {
           ></paper-input>
         </div>
         <div class="side-by-side">
-          <ha-switch
+          <ha-formfield
-            .checked="${this._dark_mode}"
+            .label=${this.hass.localize(
-            .configValue="${"dark_mode"}"
-            @change="${this._valueChanged}"
-            >${this.hass.localize(
               "ui.panel.lovelace.editor.card.map.dark_mode"
-            )}</ha-switch
+            )}
           >
+            <ha-switch
+              .checked="${this._dark_mode}"
+              .configValue="${"dark_mode"}"
+              @change="${this._valueChanged}"
+            ></ha-switch
+          ></ha-formfield>
           <paper-input
             .label="${this.hass.localize(
               "ui.panel.lovelace.editor.card.map.hours_to_show"

src/panels/lovelace/editor/config-elements/hui-picture-entity-card-editor.ts

@@ -11,6 +11,7 @@ import {
 } from "lit-element";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-switch";
+import "../../../../components/ha-formfield";
 import { ActionConfig } from "../../../../data/lovelace";
 import { HomeAssistant } from "../../../../types";
 import { PictureEntityCardConfig } from "../../cards/types";
@@ -187,22 +188,28 @@ export class HuiPictureEntityCardEditor extends LitElement
           ></paper-input>
         </div>
         <div class="side-by-side">
-          <ha-switch
+          <ha-formfield
-            .checked="${this._config!.show_name !== false}"
+            .label=${this.hass.localize(
-            .configValue="${"show_name"}"
-            @change="${this._valueChanged}"
-            >${this.hass.localize(
               "ui.panel.lovelace.editor.card.generic.show_name"
-            )}</ha-switch
+            )}
           >
-          <ha-switch
+            <ha-switch
-            .checked="${this._config!.show_state !== false}"
+              .checked="${this._config!.show_name !== false}"
-            .configValue="${"show_state"}"
+              .configValue="${"show_name"}"
-            @change="${this._valueChanged}"
+              @change="${this._valueChanged}"
-            >${this.hass.localize(
+            ></ha-switch
+          ></ha-formfield>
+          <ha-formfield
+            .label=${this.hass.localize(
               "ui.panel.lovelace.editor.card.generic.show_state"
-            )}</ha-switch
+            )}
           >
+            <ha-switch
+              .checked="${this._config!.show_state !== false}"
+              .configValue="${"show_state"}"
+              @change="${this._valueChanged}"
+            ></ha-switch
+          ></ha-formfield>
         </div>
         <div class="side-by-side">
           <hui-action-editor

src/panels/lovelace/editor/config-elements/hui-weather-forecast-card-editor.ts

@@ -8,6 +8,7 @@ import {
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/entity/ha-entity-picker";
 import "../../../../components/ha-switch";
+import "../../../../components/ha-formfield";
 import { HomeAssistant } from "../../../../types";
 import { WeatherForecastCardConfig } from "../../cards/types";
 import { struct } from "../../common/structs/struct";
@@ -109,14 +110,17 @@ export class HuiWeatherForecastCardEditor extends LitElement
             .configValue=${"secondary_info_attribute"}
             @value-changed=${this._valueChanged}
           ></paper-input>
-          <ha-switch
+          <ha-formfield
-            .checked=${this._config!.show_forecast !== false}
+            .label=${this.hass.localize(
-            .configValue=${"show_forecast"}
-            @change=${this._valueChanged}
-            >${this.hass.localize(
               "ui.panel.lovelace.editor.card.weather-forecast.show_forecast"
-            )}</ha-switch
+            )}
           >
+            <ha-switch
+              .checked=${this._config!.show_forecast !== false}
+              .configValue=${"show_forecast"}
+              @change=${this._valueChanged}
+            ></ha-switch
+          ></ha-formfield>
         </div>
       </div>
     `;

src/panels/lovelace/editor/hui-dialog-save-config.ts

@@ -15,6 +15,7 @@ import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/dialog/ha-paper-dialog";
 import type { HaPaperDialog } from "../../../components/dialog/ha-paper-dialog";
 import "../../../components/ha-switch";
+import "../../../components/ha-formfield";
 import "../../../components/ha-yaml-editor";
 import type { PolymerChangedEvent } from "../../../polymer-types";
 import { haStyleDialog } from "../../../resources/styles";
@@ -72,13 +73,16 @@ export class HuiSaveConfig extends LitElement {
                     "ui.panel.lovelace.editor.save_config.para_sure"
                   )}
                 </p>
-                <ha-switch
+                <ha-formfield
-                  .checked=${this._emptyConfig}
+                  .label=${this.hass!.localize(
-                  @change=${this._emptyConfigChanged}
-                  >${this.hass!.localize(
                     "ui.panel.lovelace.editor.save_config.empty_config"
-                  )}</ha-switch
+                  )}
                 >
+                  <ha-switch
+                    .checked=${this._emptyConfig}
+                    @change=${this._emptyConfigChanged}
+                  ></ha-switch
+                ></ha-formfield>
               `
             : html`
                 <p>

src/panels/lovelace/editor/view-editor/hui-view-editor.ts

@@ -11,6 +11,7 @@ import {
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { slugify } from "../../../../common/string/slugify";
 import "../../../../components/ha-switch";
+import "../../../../components/ha-formfield";
 import "../../../../components/ha-icon-input";
 import { LovelaceViewConfig } from "../../../../data/lovelace";
 import { HomeAssistant } from "../../../../types";
@@ -121,14 +122,17 @@ export class HuiViewEditor extends LitElement {
           .configValue=${"theme"}
           @value-changed=${this._valueChanged}
         ></hui-theme-select-editor>
-        <ha-switch
+        <ha-formfield
-          .checked=${this._panel !== false}
+          .label=${this.hass.localize(
-          .configValue=${"panel"}
-          @change=${this._valueChanged}
-          >${this.hass.localize(
             "ui.panel.lovelace.editor.view.panel_mode.title"
-          )}</ha-switch
+          )}
         >
+          <ha-switch
+            .checked=${this._panel !== false}
+            .configValue=${"panel"}
+            @change=${this._valueChanged}
+          ></ha-switch
+        ></ha-formfield>
         <span class="panel"
           >${this.hass.localize(
             "ui.panel.lovelace.editor.view.panel_mode.description"