diff --git a/src/components/ha-form.js b/src/components/ha-form.js
index e954e4b336..565b33e7c6 100644
--- a/src/components/ha-form.js
+++ b/src/components/ha-form.js
@@ -36,8 +36,9 @@ class HaForm extends EventsMixin(PolymerElement) {
             schema="[[item]]"
             error="[[_getValue(error, item)]]"
             on-data-changed="_valueChanged"
-            compute-label="[[computeLabel]]"
             compute-error="[[computeError]]"
+            compute-label="[[computeLabel]]"
+            compute-suffix="[[computeSuffix]]"
           ></ha-form>
         </template>
       </template>
@@ -126,7 +127,9 @@ class HaForm extends EventsMixin(PolymerElement) {
             required="[[schema.required]]"
             auto-validate="[[schema.required]]"
             error-message="Required"
-          ></paper-input>
+          >
+            <span suffix="" slot="suffix">[[computeSuffix(schema)]]</span>
+          </paper-input>
         </template>
 
         <template
@@ -173,14 +176,21 @@ class HaForm extends EventsMixin(PolymerElement) {
       schema: Object,
       error: Object,
 
-      // A function that will computes the label to be displayed for a given
+      // A function that computes the label to be displayed for a given
       // schema object.
       computeLabel: {
         type: Function,
         value: () => (schema) => schema && schema.name,
       },
 
-      // A function that will computes an error message to be displayed for a
+      // A function that computes the suffix to be displayed for a given
+      // schema object.
+      computeSuffix: {
+        type: Function,
+        value: () => () => "abc",
+      },
+
+      // A function that computes an error message to be displayed for a
       // given error ID, and relevant schema object
       computeError: {
         type: Function,
diff --git a/src/data/device_automation.ts b/src/data/device_automation.ts
index 6939190f07..093de90b2f 100644
--- a/src/data/device_automation.ts
+++ b/src/data/device_automation.ts
@@ -39,6 +39,17 @@ export const fetchDeviceTriggers = (hass: HomeAssistant, deviceId: string) =>
     device_id: deviceId,
   });
 
+export const fetchDeviceTriggerCapabilities = (
+  hass: HomeAssistant,
+  trigger: DeviceTrigger
+) =>
+  hass.callWS<DeviceTrigger[]>({
+    type: "device_automation/trigger/capabilities",
+    trigger,
+  });
+
+const whitelist = ["above", "below", "for"];
+
 export const deviceAutomationsEqual = (
   a: DeviceAutomation,
   b: DeviceAutomation
@@ -48,11 +59,17 @@ export const deviceAutomationsEqual = (
   }
 
   for (const property in a) {
+    if (whitelist.includes(property)) {
+      continue;
+    }
     if (!Object.is(a[property], b[property])) {
       return false;
     }
   }
   for (const property in b) {
+    if (whitelist.includes(property)) {
+      continue;
+    }
     if (!Object.is(a[property], b[property])) {
       return false;
     }
diff --git a/src/panels/config/js/preact-types.ts b/src/panels/config/js/preact-types.ts
index 9873fa3dd1..374fbebb04 100644
--- a/src/panels/config/js/preact-types.ts
+++ b/src/panels/config/js/preact-types.ts
@@ -24,6 +24,7 @@ declare global {
       "mwc-button": any;
       "ha-device-trigger-picker": any;
       "ha-device-action-picker": any;
+      "ha-form": any;
     }
   }
 }
diff --git a/src/panels/config/js/trigger/device.tsx b/src/panels/config/js/trigger/device.tsx
index 3a97b21e7c..d6f958241d 100644
--- a/src/panels/config/js/trigger/device.tsx
+++ b/src/panels/config/js/trigger/device.tsx
@@ -2,21 +2,29 @@ import { h, Component } from "preact";
 
 import "../../../../components/device/ha-device-picker";
 import "../../../../components/device/ha-device-trigger-picker";
+import "../../../../components/ha-form";
+
+import { fetchDeviceTriggerCapabilities } from "../../../../data/device_automation";
 
 export default class DeviceTrigger extends Component<any, any> {
   constructor() {
     super();
     this.devicePicked = this.devicePicked.bind(this);
     this.deviceTriggerPicked = this.deviceTriggerPicked.bind(this);
-    this.state = { device_id: undefined };
+    this._extraFieldsChanged = this._extraFieldsChanged.bind(this);
+    this.state = { device_id: undefined, capabilities: undefined };
   }
 
   public devicePicked(ev) {
-    this.setState({ device_id: ev.target.value });
+    this.setState({ ...this.state, device_id: ev.target.value });
   }
 
-  public deviceTriggerPicked(ev) {
+  public async deviceTriggerPicked(ev) {
     const deviceTrigger = ev.target.value;
+    const capabilities = deviceTrigger.domain
+      ? await fetchDeviceTriggerCapabilities(this.props.hass, deviceTrigger)
+      : null;
+    this.setState({ ...this.state, capabilities });
     this.props.onChange(this.props.index, deviceTrigger);
   }
 
@@ -25,6 +33,16 @@ export default class DeviceTrigger extends Component<any, any> {
     if (device_id === undefined) {
       device_id = trigger.device_id;
     }
+    let extraFieldsData = {};
+    if (this.state.capabilities && this.state.capabilities.extra_fields) {
+      this.state.capabilities.extra_fields.forEach(
+        (item) =>
+          (extraFieldsData = {
+            ...extraFieldsData,
+            [item.name]: this.props.trigger[item.name],
+          })
+      );
+    }
 
     return (
       <div>
@@ -41,9 +59,65 @@ export default class DeviceTrigger extends Component<any, any> {
           hass={hass}
           label="Trigger"
         />
+        {this.state.capabilities && this.state.capabilities.extra_fields && (
+          <ha-form
+            data={extraFieldsData}
+            onData-changed={this._extraFieldsChanged}
+            schema={this.state.capabilities.extra_fields}
+            // error={step.errors} // TODO
+            computeLabel={this._extraFieldsComputeLabelCallback(hass.localize)}
+            computeSuffix={this._extraFieldsComputeSuffixCallback()}
+            // computeError={this._extraFieldsComputeErrorCallback} // TODO
+          />
+        )}
       </div>
     );
   }
+
+  public componentDidMount() {
+    const hass = this.props.hass;
+    const trigger = this.props.trigger;
+
+    if (!this.state.capabilities && trigger.domain) {
+      fetchDeviceTriggerCapabilities(hass, trigger).then((capabilities) => {
+        this.setState({ ...this.state, capabilities });
+      });
+    }
+  }
+
+  private _extraFieldsChanged(ev) {
+    if (!ev.detail.path) {
+      return;
+    }
+    const item = ev.detail.path.replace("data.", "");
+    const value = ev.detail.value || undefined;
+
+    this.props.onChange(this.props.index, {
+      ...this.props.trigger,
+      [item]: value,
+    });
+  }
+
+  private _extraFieldsComputeLabelCallback(localize) {
+    // Returns a callback for ha-form to calculate labels per schema object
+    return (schema) =>
+      localize(
+        `ui.panel.config.automation.editor.triggers.type.device.extra_fields.${
+          schema.name
+        }`
+      ) || schema.name;
+  }
+
+  private _extraFieldsComputeSuffixCallback() {
+    // Returns a callback for ha-form to calculate suffixes per schema object
+    return (schema) => {
+      let description = "";
+      if (schema.description) {
+        description = schema.description.unit_of_measurement || "";
+      }
+      return description;
+    };
+  }
 }
 
 (DeviceTrigger as any).defaultConfig = {
diff --git a/src/translations/en.json b/src/translations/en.json
index 5e082f51f2..4129c53f58 100755
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -737,7 +737,12 @@
               "type_select": "Trigger type",
               "type": {
                 "device": {
-                  "label": "Device"
+                  "label": "Device",
+                  "extra_fields": {
+                    "above": "Above",
+                    "below": "Below",
+                    "for": "Duration"
+                  }
                 },
                 "event": {
                   "label": "Event",