diff --git a/src/components/ha-formfield.ts b/src/components/ha-formfield.ts
index c993ec4387..0f49c75514 100644
--- a/src/components/ha-formfield.ts
+++ b/src/components/ha-formfield.ts
@@ -18,9 +18,9 @@ export class HaFormfield extends FormfieldBase {
return html`
-
+
`;
}
@@ -57,13 +57,13 @@ export class HaFormfield extends FormfieldBase {
}
.mdc-form-field {
align-items: var(--ha-formfield-align-items, center);
+ gap: 4px;
}
.mdc-form-field > label {
direction: var(--direction);
margin-inline-start: 0;
margin-inline-end: auto;
- padding-inline-start: 4px;
- padding-inline-end: 0;
+ padding: 0;
}
:host([disabled]) label {
color: var(--disabled-text-color);
diff --git a/src/components/ha-selector/ha-selector-boolean.ts b/src/components/ha-selector/ha-selector-boolean.ts
index 18ce85b912..5bed88c726 100644
--- a/src/components/ha-selector/ha-selector-boolean.ts
+++ b/src/components/ha-selector/ha-selector-boolean.ts
@@ -1,4 +1,4 @@
-import { css, CSSResultGroup, html, LitElement } from "lit";
+import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
import { customElement, property } from "lit/decorators";
import { fireEvent } from "../../common/dom/fire_event";
import { HomeAssistant } from "../../types";
@@ -28,10 +28,13 @@ export class HaBooleanSelector extends LitElement {
@change=${this._handleChange}
.disabled=${this.disabled}
>
+
+ ${this.label}
+ ${this.helper
+ ? html`${this.helper}
`
+ : nothing}
+
- ${this.helper
- ? html`${this.helper}`
- : ""}
`;
}
@@ -47,10 +50,21 @@ export class HaBooleanSelector extends LitElement {
return css`
ha-formfield {
display: flex;
- height: 56px;
+ 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);
+ }
`;
}
}