Add support for helper text in form boolean

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

@@ -510,6 +510,7 @@ class DemoHaForm extends LitElement {
                   .computeError=${(error) => translations[error] || error}
                   .computeLabel=${(schema) =>
                     translations[schema.name] || schema.name}
+                  .computeHelper=${() => "Helper text"}
                   @value-changed=${(e) => {
                     this.data[idx] = e.detail.value;
                     this.requestUpdate();

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

@@ -1,6 +1,6 @@
 import "@material/mwc-formfield";
-import type { TemplateResult } from "lit";
-import { html, LitElement } from "lit";
+import type { CSSResultGroup, TemplateResult } from "lit";
+import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import type {
@@ -19,6 +19,8 @@ export class HaFormBoolean extends LitElement implements HaFormElement {
 
   @property() public label!: string;
 
+  @property() public helper?: string;
+
   @property({ type: Boolean }) public disabled = false;
 
   @query("ha-checkbox", true) private _input?: HTMLElement;
@@ -37,6 +39,12 @@ export class HaFormBoolean extends LitElement implements HaFormElement {
           .disabled=${this.disabled}
           @change=${this._valueChanged}
         ></ha-checkbox>
+        <span slot="label">
+          <p class="primary">${this.label}</p>
+          ${this.helper
+            ? html`<p class="secondary">${this.helper}</p>`
+            : nothing}
+        </span>
       </mwc-formfield>
     `;
   }
@@ -46,6 +54,28 @@ export class HaFormBoolean extends LitElement implements HaFormElement {
       value: (ev.target as HaCheckbox).checked,
     });
   }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      ha-formfield {
+        display: flex;
+        min-height: 56px;
+        align-items: center;
+        --mdc-typography-body2-font-size: 1em;
+      }
+      p {
+        margin: 0;
+      }
+      .secondary {
+        direction: var(--direction);
+        padding-top: 4px;
+        box-sizing: border-box;
+        color: var(--secondary-text-color);
+        font-size: 0.875rem;
+        font-weight: var(--mdc-typography-body2-font-weight, 400);
+      }
+    `;
+  }
 }
 
 declare global {