diff --git a/src/panels/config/js/trigger/numeric_state.js b/src/panels/config/js/trigger/numeric_state.js
index 41cf07838d..cfa9ead60f 100644
--- a/src/panels/config/js/trigger/numeric_state.js
+++ b/src/panels/config/js/trigger/numeric_state.js
@@ -24,7 +24,18 @@ export default class NumericStateTrigger extends Component {
   /* eslint-disable camelcase */
   render({ trigger, hass, localize }) {
     const { value_template, entity_id, below, above } = trigger;
+    let trgFor = trigger.for;
 
+    if (trgFor && (trgFor.hours || trgFor.minutes || trgFor.seconds)) {
+      // If the trigger was defined using the yaml dict syntax, convert it to
+      // the equivalent string format
+      let { hours = 0, minutes = 0, seconds = 0 } = trgFor;
+      hours = hours.toString();
+      minutes = minutes.toString().padStart(2, "0");
+      seconds = seconds.toString().padStart(2, "0");
+
+      trgFor = `${hours}:${minutes}:${seconds}`;
+    }
     return (
       <div>
         <ha-entity-picker
@@ -57,6 +68,14 @@ export default class NumericStateTrigger extends Component {
           value={value_template}
           onvalue-changed={this.onChange}
         />
+        <paper-input
+          label={localize(
+            "ui.panel.config.automation.editor.triggers.type.state.for"
+          )}
+          name="for"
+          value={trgFor}
+          onvalue-changed={this.onChange}
+        />
       </div>
     );
   }