diff --git a/gallery/src/pages/more-info/input-number.markdown b/gallery/src/pages/more-info/input-number.markdown
new file mode 100644
index 0000000000..20babab09b
--- /dev/null
+++ b/gallery/src/pages/more-info/input-number.markdown
@@ -0,0 +1,3 @@
+---
+title: Input Number
+---
diff --git a/gallery/src/pages/more-info/input-number.ts b/gallery/src/pages/more-info/input-number.ts
new file mode 100644
index 0000000000..e070b52e8b
--- /dev/null
+++ b/gallery/src/pages/more-info/input-number.ts
@@ -0,0 +1,60 @@
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { customElement, property, query } from "lit/decorators";
+import "../../../../src/components/ha-card";
+import "../../../../src/dialogs/more-info/more-info-content";
+import { getEntity } from "../../../../src/fake_data/entity";
+import {
+  MockHomeAssistant,
+  provideHass,
+} from "../../../../src/fake_data/provide_hass";
+import "../../components/demo-more-infos";
+
+const ENTITIES = [
+  getEntity("input_number", "box1", 0, {
+    friendly_name: "Box1",
+    min: 0,
+    max: 100,
+    step: 1,
+    initial: 0,
+    mode: "box",
+    unit_of_measurement: "items",
+  }),
+  getEntity("input_number", "slider1", 0, {
+    friendly_name: "Slider1",
+    min: 0,
+    max: 100,
+    step: 1,
+    initial: 0,
+    mode: "slider",
+    unit_of_measurement: "items",
+  }),
+];
+
+@customElement("demo-more-info-input-number")
+class DemoMoreInfoInputNumber extends LitElement {
+  @property() public hass!: MockHomeAssistant;
+
+  @query("demo-more-infos") private _demoRoot!: HTMLElement;
+
+  protected render(): TemplateResult {
+    return html`
+      <demo-more-infos
+        .hass=${this.hass}
+        .entities=${ENTITIES.map((ent) => ent.entityId)}
+      ></demo-more-infos>
+    `;
+  }
+
+  protected firstUpdated(changedProperties: PropertyValues) {
+    super.firstUpdated(changedProperties);
+    const hass = provideHass(this._demoRoot);
+    hass.updateTranslations(null, "en");
+    hass.addEntities(ENTITIES);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-more-info-input-number": DemoMoreInfoInputNumber;
+  }
+}
diff --git a/src/state-summary/state-card-input_number.js b/src/state-summary/state-card-input_number.js
index 2e0cd3f8b7..49efced50a 100644
--- a/src/state-summary/state-card-input_number.js
+++ b/src/state-summary/state-card-input_number.js
@@ -31,8 +31,7 @@ class StateCardInputNumber extends mixinBehaviors(
         .sliderstate {
           min-width: 45px;
         }
-        ha-slider[hidden],
-        ha-textfield[hidden] {
+        [hidden] {
           display: none !important;
         }
         ha-textfield {