diff --git a/src/components/ha-base-time-input.ts b/src/components/ha-base-time-input.ts
index eae4ccc306..674d36ca49 100644
--- a/src/components/ha-base-time-input.ts
+++ b/src/components/ha-base-time-input.ts
@@ -271,7 +271,9 @@ export class HaBaseTimeInput extends LitElement {
`}
${this.helper
- ? html`${this.helper}`
+ ? html`${this.helper}`
: nothing}
`;
}
diff --git a/src/components/ha-combo-box.ts b/src/components/ha-combo-box.ts
index ab5ecfe4c3..bcdc9077e7 100644
--- a/src/components/ha-combo-box.ts
+++ b/src/components/ha-combo-box.ts
@@ -19,6 +19,7 @@ import type { HomeAssistant } from "../types";
import "./ha-combo-box-item";
import "./ha-combo-box-textfield";
import "./ha-icon-button";
+import "./ha-input-helper-text";
import "./ha-textfield";
import type { HaTextField } from "./ha-textfield";
@@ -195,8 +196,6 @@ export class HaComboBox extends LitElement {
>`}
.icon=${this.icon}
.invalid=${this.invalid}
- .helper=${this.helper}
- helperPersistent
.disableSetValue=${this._disableSetValue}
>
@@ -222,9 +221,18 @@ export class HaComboBox extends LitElement {
@click=${this._toggleOpen}
>
+ ${this._renderHelper()}
`;
}
+ private _renderHelper() {
+ return this.helper
+ ? html`${this.helper}`
+ : "";
+ }
+
private _defaultRowRenderer: ComboBoxLitRenderer<
string | Record
> = (item) => html`
@@ -398,6 +406,9 @@ export class HaComboBox extends LitElement {
inset-inline-end: 36px;
direction: var(--direction);
}
+ ha-input-helper-text {
+ margin-top: 4px;
+ }
`;
}
diff --git a/src/components/ha-form/ha-form-integer.ts b/src/components/ha-form/ha-form-integer.ts
index 777056c184..9bcd93d3be 100644
--- a/src/components/ha-form/ha-form-integer.ts
+++ b/src/components/ha-form/ha-form-integer.ts
@@ -71,7 +71,9 @@ export class HaFormInteger extends LitElement implements HaFormElement {
>
${this.helper
- ? html`${this.helper}`
+ ? html`${this.helper}`
: ""}
`;
diff --git a/src/components/ha-input-helper-text.ts b/src/components/ha-input-helper-text.ts
index 6d817d1bf6..86ba8cb280 100644
--- a/src/components/ha-input-helper-text.ts
+++ b/src/components/ha-input-helper-text.ts
@@ -19,6 +19,11 @@ class InputHelperText extends LitElement {
padding-right: 16px;
padding-inline-start: 16px;
padding-inline-end: 16px;
+ letter-spacing: var(
+ --mdc-typography-caption-letter-spacing,
+ 0.0333333333em
+ );
+ line-height: normal;
}
:host([disabled]) {
color: var(--mdc-text-field-disabled-ink-color, rgba(0, 0, 0, 0.6));
diff --git a/src/components/ha-labeled-slider.ts b/src/components/ha-labeled-slider.ts
index 483d5aefd6..7c473fc5c1 100644
--- a/src/components/ha-labeled-slider.ts
+++ b/src/components/ha-labeled-slider.ts
@@ -47,7 +47,9 @@ class HaLabeledSlider extends LitElement {
>
${this.helper
- ? html` ${this.helper} `
+ ? html`
+ ${this.helper}
+ `
: nothing}
`;
}
diff --git a/src/components/ha-selector/ha-selector-datetime.ts b/src/components/ha-selector/ha-selector-datetime.ts
index 1c5e2bf8db..3f0c4f544d 100644
--- a/src/components/ha-selector/ha-selector-datetime.ts
+++ b/src/components/ha-selector/ha-selector-datetime.ts
@@ -54,7 +54,9 @@ export class HaDateTimeSelector extends LitElement {
>
${this.helper
- ? html`${this.helper}`
+ ? html`${this.helper}`
: ""}
`;
}
diff --git a/src/components/ha-selector/ha-selector-number.ts b/src/components/ha-selector/ha-selector-number.ts
index 3249f96aad..66fed152d9 100644
--- a/src/components/ha-selector/ha-selector-number.ts
+++ b/src/components/ha-selector/ha-selector-number.ts
@@ -106,7 +106,9 @@ export class HaNumberSelector extends LitElement {
${!isBox && this.helper
- ? html`${this.helper}`
+ ? html`${this.helper}`
: nothing}
`;
}
diff --git a/src/components/ha-selector/ha-selector-object.ts b/src/components/ha-selector/ha-selector-object.ts
index e328112f35..f2b9040b20 100644
--- a/src/components/ha-selector/ha-selector-object.ts
+++ b/src/components/ha-selector/ha-selector-object.ts
@@ -38,7 +38,9 @@ export class HaObjectSelector extends LitElement {
@value-changed=${this._handleChange}
>
${this.helper
- ? html`${this.helper}`
+ ? html`${this.helper}`
: ""} `;
}
diff --git a/src/components/ha-selector/ha-selector-select.ts b/src/components/ha-selector/ha-selector-select.ts
index c136290114..f6b31bc33d 100644
--- a/src/components/ha-selector/ha-selector-select.ts
+++ b/src/components/ha-selector/ha-selector-select.ts
@@ -285,7 +285,9 @@ export class HaSelectSelector extends LitElement {
private _renderHelper() {
return this.helper
- ? html`${this.helper}`
+ ? html`${this.helper}`
: "";
}
diff --git a/src/components/ha-selector/ha-selector-template.ts b/src/components/ha-selector/ha-selector-template.ts
index 50f6e039ed..555f09bd17 100644
--- a/src/components/ha-selector/ha-selector-template.ts
+++ b/src/components/ha-selector/ha-selector-template.ts
@@ -63,7 +63,9 @@ export class HaTemplateSelector extends LitElement {
linewrap
>
${this.helper
- ? html`${this.helper}`
+ ? html`${this.helper}`
: nothing}
`;
}
diff --git a/src/components/ha-target-picker.ts b/src/components/ha-target-picker.ts
index 01624644ae..0f5a4ae05c 100644
--- a/src/components/ha-target-picker.ts
+++ b/src/components/ha-target-picker.ts
@@ -289,7 +289,9 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
${this._renderPicker()}
${this.helper
- ? html`${this.helper}`
+ ? html`${this.helper}`
: ""}
`;
}