diff --git a/src/dialogs/more-info/const.ts b/src/dialogs/more-info/const.ts
index fbcb330aec..d091e1b395 100644
--- a/src/dialogs/more-info/const.ts
+++ b/src/dialogs/more-info/const.ts
@@ -16,7 +16,12 @@ export const EDITABLE_DOMAINS_WITH_ID = ["scene", "automation"];
* */
export const EDITABLE_DOMAINS_WITH_UNIQUE_ID = ["script"];
/** Domains with with new more info design. */
-export const DOMAINS_WITH_NEW_MORE_INFO = ["light", "siren", "switch"];
+export const DOMAINS_WITH_NEW_MORE_INFO = [
+ "input_boolean",
+ "light",
+ "siren",
+ "switch",
+];
/** Domains with separate more info dialog. */
export const DOMAINS_WITH_MORE_INFO = [
"alarm_control_panel",
@@ -29,6 +34,7 @@ export const DOMAINS_WITH_MORE_INFO = [
"fan",
"group",
"humidifier",
+ "input_boolean",
"input_datetime",
"light",
"lock",
diff --git a/src/dialogs/more-info/controls/more-info-input_boolean.ts b/src/dialogs/more-info/controls/more-info-input_boolean.ts
new file mode 100644
index 0000000000..c2b37dac07
--- /dev/null
+++ b/src/dialogs/more-info/controls/more-info-input_boolean.ts
@@ -0,0 +1,51 @@
+import { mdiPower, mdiPowerOff } from "@mdi/js";
+import { HassEntity } from "home-assistant-js-websocket";
+import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
+import "../../../components/ha-attributes";
+import type { HomeAssistant } from "../../../types";
+import { moreInfoControlStyle } from "../components/ha-more-info-control-style";
+import "../components/ha-more-info-state-header";
+import "../components/ha-more-info-toggle";
+
+@customElement("more-info-input_boolean")
+class MoreInfoInputBoolean extends LitElement {
+ @property({ attribute: false }) public hass!: HomeAssistant;
+
+ @property({ attribute: false }) public stateObj?: HassEntity;
+
+ protected render(): TemplateResult | null {
+ if (!this.hass || !this.stateObj) {
+ return null;
+ }
+
+ return html`
+
+
+
+
+
+ `;
+ }
+
+ static get styles(): CSSResultGroup {
+ return moreInfoControlStyle;
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "more-info-input_boolean": MoreInfoInputBoolean;
+ }
+}
diff --git a/src/dialogs/more-info/controls/more-info-siren.ts b/src/dialogs/more-info/controls/more-info-siren.ts
index 9689dcf0da..31df155443 100644
--- a/src/dialogs/more-info/controls/more-info-siren.ts
+++ b/src/dialogs/more-info/controls/more-info-siren.ts
@@ -1,8 +1,8 @@
import { mdiVolumeHigh, mdiVolumeOff } from "@mdi/js";
+import { HassEntity } from "home-assistant-js-websocket";
import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators";
import "../../../components/ha-attributes";
-import { LightEntity } from "../../../data/light";
import type { HomeAssistant } from "../../../types";
import { moreInfoControlStyle } from "../components/ha-more-info-control-style";
import "../components/ha-more-info-state-header";
@@ -12,7 +12,7 @@ import "../components/ha-more-info-toggle";
class MoreInfoSiren extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
- @property({ attribute: false }) public stateObj?: LightEntity;
+ @property({ attribute: false }) public stateObj?: HassEntity;
protected render(): TemplateResult | null {
if (!this.hass || !this.stateObj) {
diff --git a/src/dialogs/more-info/controls/more-info-switch.ts b/src/dialogs/more-info/controls/more-info-switch.ts
index c51c6007b7..cf9aa58f35 100644
--- a/src/dialogs/more-info/controls/more-info-switch.ts
+++ b/src/dialogs/more-info/controls/more-info-switch.ts
@@ -1,8 +1,8 @@
import { mdiPower, mdiPowerOff } from "@mdi/js";
+import { HassEntity } from "home-assistant-js-websocket";
import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators";
import "../../../components/ha-attributes";
-import { LightEntity } from "../../../data/light";
import type { HomeAssistant } from "../../../types";
import { moreInfoControlStyle } from "../components/ha-more-info-control-style";
import "../components/ha-more-info-state-header";
@@ -12,7 +12,7 @@ import "../components/ha-more-info-toggle";
class MoreInfoSwitch extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
- @property({ attribute: false }) public stateObj?: LightEntity;
+ @property({ attribute: false }) public stateObj?: HassEntity;
protected render(): TemplateResult | null {
if (!this.hass || !this.stateObj) {
diff --git a/src/dialogs/more-info/state_more_info_control.ts b/src/dialogs/more-info/state_more_info_control.ts
index b0e0172adb..39a7d9f456 100644
--- a/src/dialogs/more-info/state_more_info_control.ts
+++ b/src/dialogs/more-info/state_more_info_control.ts
@@ -16,6 +16,7 @@ const LAZY_LOADED_MORE_INFO_CONTROL = {
fan: () => import("./controls/more-info-fan"),
group: () => import("./controls/more-info-group"),
humidifier: () => import("./controls/more-info-humidifier"),
+ input_boolean: () => import("./controls/more-info-input_boolean"),
input_datetime: () => import("./controls/more-info-input_datetime"),
light: () => import("./controls/more-info-light"),
lock: () => import("./controls/more-info-lock"),