diff --git a/src/components/ha-generic-picker.ts b/src/components/ha-generic-picker.ts
index 92631333cf..98496a4b40 100644
--- a/src/components/ha-generic-picker.ts
+++ b/src/components/ha-generic-picker.ts
@@ -72,7 +72,9 @@ export class HaGenericPicker extends LitElement {
protected render() {
return html`
- ${this.label ? html`` : nothing}
+ ${this.label
+ ? html``
+ : nothing}
${!this._opened
? html`
@@ -116,7 +118,9 @@ export class HaGenericPicker extends LitElement {
private _renderHelper() {
return this.helper
- ? html`${this.helper}`
+ ? html`${this.helper}`
: nothing;
}
@@ -165,6 +169,9 @@ export class HaGenericPicker extends LitElement {
position: relative;
display: block;
}
+ label[disabled] {
+ color: var(--mdc-text-field-disabled-ink-color, rgba(0, 0, 0, 0.6));
+ }
label {
display: block;
margin: 0 0 8px;
diff --git a/src/components/ha-input-helper-text.ts b/src/components/ha-input-helper-text.ts
index 4af842ee74..6d817d1bf6 100644
--- a/src/components/ha-input-helper-text.ts
+++ b/src/components/ha-input-helper-text.ts
@@ -1,9 +1,11 @@
import type { TemplateResult } from "lit";
import { css, html, LitElement } from "lit";
-import { customElement } from "lit/decorators";
+import { customElement, property } from "lit/decorators";
@customElement("ha-input-helper-text")
class InputHelperText extends LitElement {
+ @property({ type: Boolean, reflect: true }) disabled = false;
+
protected render(): TemplateResult {
return html``;
}
@@ -18,6 +20,9 @@ class InputHelperText extends LitElement {
padding-inline-start: 16px;
padding-inline-end: 16px;
}
+ :host([disabled]) {
+ color: var(--mdc-text-field-disabled-ink-color, rgba(0, 0, 0, 0.6));
+ }
`;
}
diff --git a/src/components/ha-multi-textfield.ts b/src/components/ha-multi-textfield.ts
index dd1d46b8b2..c40b6033b6 100644
--- a/src/components/ha-multi-textfield.ts
+++ b/src/components/ha-multi-textfield.ts
@@ -85,7 +85,9 @@ class HaMultiTextField extends LitElement {
${this.helper
- ? html`${this.helper}`
+ ? html`${this.helper}`
: nothing}
`;
}
diff --git a/src/components/ha-picker-field.ts b/src/components/ha-picker-field.ts
index 0d62e084bc..ba8513794f 100644
--- a/src/components/ha-picker-field.ts
+++ b/src/components/ha-picker-field.ts
@@ -88,6 +88,12 @@ export class HaPickerField extends LitElement {
static get styles(): CSSResultGroup {
return [
css`
+ ha-combo-box-item[disabled] {
+ background-color: var(
+ --mdc-text-field-disabled-fill-color,
+ whitesmoke
+ );
+ }
ha-combo-box-item {
background-color: var(--mdc-text-field-fill-color, whitesmoke);
border-radius: 4px;
@@ -106,6 +112,12 @@ export class HaPickerField extends LitElement {
}
/* Add Similar focus style as the text field */
+ ha-combo-box-item[disabled]:after {
+ background-color: var(
+ --mdc-text-field-disabled-line-color,
+ rgba(0, 0, 0, 0.42)
+ );
+ }
ha-combo-box-item:after {
display: block;
content: "";