diff --git a/packages/builder/src/templates/commonComponents.js b/packages/builder/src/templates/commonComponents.js
index 1a953224a7..884419ae6c 100644
--- a/packages/builder/src/templates/commonComponents.js
+++ b/packages/builder/src/templates/commonComponents.js
@@ -1,21 +1,7 @@
+import { FieldTypeToComponentMap } from "components/design/settings/controls/FieldConfiguration/utils"
 import { Component } from "./Component"
 import { getSchemaForDatasource } from "dataBinding"
 
-const fieldTypeToComponentMap = {
-  string: "stringfield",
-  number: "numberfield",
-  bigint: "bigintfield",
-  options: "optionsfield",
-  array: "multifieldselect",
-  boolean: "booleanfield",
-  longform: "longformfield",
-  datetime: "datetimefield",
-  attachment: "attachmentfield",
-  link: "relationshipfield",
-  json: "jsonfield",
-  barcodeqr: "codescanner",
-}
-
 export function makeDatasourceFormComponents(datasource) {
   const { schema } = getSchemaForDatasource(null, datasource, {
     formSchema: true,
@@ -30,7 +16,7 @@ export function makeDatasourceFormComponents(datasource) {
     }
     const fieldType =
       typeof fieldSchema === "object" ? fieldSchema.type : fieldSchema
-    const componentType = fieldTypeToComponentMap[fieldType]
+    const componentType = FieldTypeToComponentMap[fieldType]
     const fullComponentType = `@budibase/standard-components/${componentType}`
     if (componentType) {
       const component = new Component(fullComponentType)
diff --git a/packages/client/src/components/app/blocks/FormBlockComponent.svelte b/packages/client/src/components/app/blocks/FormBlockComponent.svelte
index ea1c3b0a37..34168355c4 100644
--- a/packages/client/src/components/app/blocks/FormBlockComponent.svelte
+++ b/packages/client/src/components/app/blocks/FormBlockComponent.svelte
@@ -7,19 +7,19 @@
   export let order
 
   const FieldTypeToComponentMap = {
-    string: "stringfield",
-    number: "numberfield",
-    bigint: "bigintfield",
-    options: "optionsfield",
-    array: "multifieldselect",
-    boolean: "booleanfield",
-    longform: "longformfield",
-    datetime: "datetimefield",
-    attachment: "attachmentfield",
-    link: "relationshipfield",
-    json: "jsonfield",
-    barcodeqr: "codescanner",
-    bb_reference: "bbreferencefield",
+    [FieldType.STRING]: "stringfield",
+    [FieldType.NUMBER]: "numberfield",
+    [FieldType.BIGINT]: "bigintfield",
+    [FieldType.OPTIONS]: "optionsfield",
+    [FieldType.ARRAY]: "multifieldselect",
+    [FieldType.BOOLEAN]: "booleanfield",
+    [FieldType.LONGFORM]: "longformfield",
+    [FieldType.DATETIME]: "datetimefield",
+    [FieldType.ATTACHMENT]: "attachmentfield",
+    [FieldType.LINK]: "relationshipfield",
+    [FieldType.JSON]: "jsonfield",
+    [FieldType.BARCODEQR]: "codescanner",
+    [FieldType.BB_REFERENCE]: "bbreferencefield",
   }
 
   const getFieldSchema = field => {