diff --git a/gallery/src/pages/components/ha-form.ts b/gallery/src/pages/components/ha-form.ts index 61495e4f78..fe877ad1d8 100644 --- a/gallery/src/pages/components/ha-form.ts +++ b/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(); diff --git a/src/components/ha-form/ha-form-boolean.ts b/src/components/ha-form/ha-form-boolean.ts index b56ccd2d24..11c7033e0a 100644 --- a/src/components/ha-form/ha-form-boolean.ts +++ b/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} > + +

${this.label}

+ ${this.helper + ? html`

${this.helper}

` + : nothing} +
`; } @@ -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 {