diff --git a/src/panels/lovelace/cards/hui-todo-list-card.ts b/src/panels/lovelace/cards/hui-todo-list-card.ts
index fc4e81b70a..91320b6c91 100644
--- a/src/panels/lovelace/cards/hui-todo-list-card.ts
+++ b/src/panels/lovelace/cards/hui-todo-list-card.ts
@@ -275,7 +275,7 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {
"ui.panel.lovelace.cards.todo-list.no_unchecked_items"
)}
`}
- ${checkedItems.length
+ ${!this._config.hide_completed && checkedItems.length
? html`
diff --git a/src/panels/lovelace/cards/types.ts b/src/panels/lovelace/cards/types.ts
index 3c21617dfe..c14f07cf79 100644
--- a/src/panels/lovelace/cards/types.ts
+++ b/src/panels/lovelace/cards/types.ts
@@ -453,6 +453,7 @@ export interface TodoListCardConfig extends LovelaceCardConfig {
title?: string;
theme?: string;
entity?: string;
+ hide_completed?: boolean;
}
export interface StackCardConfig extends LovelaceCardConfig {
diff --git a/src/panels/lovelace/editor/config-elements/hui-todo-list-editor.ts b/src/panels/lovelace/editor/config-elements/hui-todo-list-editor.ts
index 3eb9061740..49c1a8a153 100644
--- a/src/panels/lovelace/editor/config-elements/hui-todo-list-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-todo-list-editor.ts
@@ -1,6 +1,6 @@
import { CSSResultGroup, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
-import { assert, assign, object, optional, string } from "superstruct";
+import { assert, assign, boolean, object, optional, string } from "superstruct";
import { isComponentLoaded } from "../../../../common/config/is_component_loaded";
import { fireEvent } from "../../../../common/dom/fire_event";
import "../../../../components/ha-alert";
@@ -18,6 +18,7 @@ const cardConfigStruct = assign(
title: optional(string()),
theme: optional(string()),
entity: optional(string()),
+ hide_completed: optional(boolean()),
})
);
@@ -30,6 +31,7 @@ const SCHEMA = [
},
},
{ name: "theme", selector: { theme: {} } },
+ { name: "hide_completed", selector: { boolean: {} } },
] as const;
@customElement("hui-todo-list-card-editor")
@@ -87,6 +89,10 @@ export class HuiTodoListEditor
)} (${this.hass!.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})`;
+ case "hide_completed":
+ return this.hass!.localize(
+ "ui.panel.lovelace.editor.card.todo-list.hide_completed"
+ );
default:
return this.hass!.localize(
`ui.panel.lovelace.editor.card.generic.${schema.name}`
diff --git a/src/translations/en.json b/src/translations/en.json
index 51a9d69aed..cb94cc44a3 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -6132,7 +6132,8 @@
"todo-list": {
"name": "To-do list",
"description": "The to-do list card allows you to add, edit, check-off, and clear items from your to-do list.",
- "integration_not_loaded": "This card requires the `todo` integration to be set up."
+ "integration_not_loaded": "This card requires the `todo` integration to be set up.",
+ "hide_completed": "Hide completed items"
},
"thermostat": {
"name": "Thermostat",