diff --git a/app/src/interfaces/display-template/display-template.vue b/app/src/interfaces/display-template/display-template.vue
new file mode 100644
index 0000000000..371532b42a
--- /dev/null
+++ b/app/src/interfaces/display-template/display-template.vue
@@ -0,0 +1,25 @@
+
+
+
+
+
diff --git a/app/src/interfaces/display-template/index.ts b/app/src/interfaces/display-template/index.ts
new file mode 100644
index 0000000000..da5bb0326f
--- /dev/null
+++ b/app/src/interfaces/display-template/index.ts
@@ -0,0 +1,42 @@
+import { defineInterface } from '@/interfaces/define';
+import VFieldTemplate from '@/components/v-field-template';
+
+export default defineInterface(({ i18n }) => ({
+ id: 'display-template',
+ name: i18n.t('display-template'),
+ icon: 'arrow_drop_down_circle',
+ component: VFieldTemplate,
+ types: ['string'],
+ options: [
+ {
+ field: 'value',
+ name: i18n.t('value'),
+ type: 'string',
+ meta: {
+ width: 'full',
+ interface: 'text-input',
+ default_value: '',
+ },
+ },
+ {
+ field: 'disabled',
+ type: 'boolean',
+ name: i18n.t('disabled'),
+ meta: {
+ width: 'half',
+ interface: 'toggle',
+ default_value: false,
+ },
+ },
+ {
+ field: 'collection',
+ name: i18n.t('collection'),
+ type: 'string',
+ meta: {
+ width: 'half',
+ interface: 'text-input',
+ default_value: '',
+ },
+ },
+ ],
+}));
diff --git a/app/src/interfaces/display-template/readme.md b/app/src/interfaces/display-template/readme.md
new file mode 100644
index 0000000000..342ea0e4f2
--- /dev/null
+++ b/app/src/interfaces/display-template/readme.md
@@ -0,0 +1,12 @@
+# Display template
+
+This is the interface version of the v-field-template component.
+
+## Options
+
+| Option | Description | Default |
+|---------------|----------------------------------------|---------|
+| `placeholder` | Text to show when no input is entered | `null` |
+| `allow-none` | Allow the user to deselect the value | `false` |
+| `allow-other` | Allow the user to enter a custom value | `false` |
+| `choices` | What choices to present to the user | `null` |