diff --git a/packages/utils/typescript/lib/__tests__/generators/schemas/attributes.test.js b/packages/utils/typescript/lib/__tests__/generators/schemas/attributes.test.js
index 16debc9829..7a1c6e25b7 100644
--- a/packages/utils/typescript/lib/__tests__/generators/schemas/attributes.test.js
+++ b/packages/utils/typescript/lib/__tests__/generators/schemas/attributes.test.js
@@ -438,7 +438,60 @@ describe('Attributes', () => {
         });
       });
 
-      // TODO custom field
+      describe('Custom field', () => {
+        test('No custom field', () => {
+          const attribute = {};
+          const modifiers = getAttributeModifiers(attribute);
+
+          expect(modifiers).toHaveLength(0);
+        });
+
+        test('Basic custom field', () => {
+          const attribute = {
+            type: 'customField',
+            customField: 'plugin::color-picker.color',
+          };
+          const modifiers = getAttributeModifiers(attribute);
+
+          expect(modifiers).toHaveLength(1);
+          expect(modifiers[0].kind).toBe(ts.SyntaxKind.TypeReference);
+          expect(modifiers[0].typeName.escapedText).toBe('CustomField');
+          expect(modifiers[0].typeArguments).toHaveLength(1);
+          expect(modifiers[0].typeArguments[0].kind).toBe(ts.SyntaxKind.StringLiteral);
+          expect(modifiers[0].typeArguments[0].text).toBe('plugin::color-picker.color');
+        });
+
+        test('Advanced custom field', () => {
+          const attribute = {
+            type: 'customField',
+            customField: 'plugin::color-picker.color',
+            options: {
+              format: 'hex',
+            },
+          };
+          const modifiers = getAttributeModifiers(attribute);
+
+          expect(modifiers).toHaveLength(1);
+          expect(modifiers[0].kind).toBe(ts.SyntaxKind.TypeReference);
+          expect(modifiers[0].typeName.escapedText).toBe('CustomField');
+          expect(modifiers[0].typeArguments).toHaveLength(2);
+          expect(modifiers[0].typeArguments[0].kind).toBe(ts.SyntaxKind.StringLiteral);
+          expect(modifiers[0].typeArguments[0].text).toBe('plugin::color-picker.color');
+          expect(modifiers[0].typeArguments[1].kind).toBe(ts.SyntaxKind.TypeLiteral);
+          expect(modifiers[0].typeArguments[1].members).toHaveLength(1);
+          expect(modifiers[0].typeArguments[1].members[0].kind).toBe(
+            ts.SyntaxKind.PropertyDeclaration
+          );
+          expect(modifiers[0].typeArguments[1].members[0].name.escapedText).toBe('format');
+          expect(modifiers[0].typeArguments[1].members[0].kind).toBe(
+            ts.SyntaxKind.PropertyDeclaration
+          );
+          expect(modifiers[0].typeArguments[1].members[0].type.kind).toBe(
+            ts.SyntaxKind.StringLiteral
+          );
+          expect(modifiers[0].typeArguments[1].members[0].type.text).toBe('hex');
+        });
+      });
 
       describe('Plugin Options', () => {
         test('No plugin options', () => {
diff --git a/packages/utils/typescript/lib/generators/schemas/attributes.js b/packages/utils/typescript/lib/generators/schemas/attributes.js
index 0900fa7db6..30c5c756b3 100644
--- a/packages/utils/typescript/lib/generators/schemas/attributes.js
+++ b/packages/utils/typescript/lib/generators/schemas/attributes.js
@@ -75,14 +75,14 @@ const getAttributeModifiers = (attribute) => {
     addImport('CustomField');
 
     const customFieldUid = factory.createStringLiteral(attribute.customField);
-    const typeParams = [customFieldUid];
+    const typeArguments = [customFieldUid];
 
     if (attribute.options) {
-      typeParams.push(toTypeLiteral(attribute.options));
+      typeArguments.push(toTypeLiteral(attribute.options));
     }
 
     modifiers.push(
-      factory.createTypeReferenceNode(factory.createIdentifier('CustomField'), typeParams)
+      factory.createTypeReferenceNode(factory.createIdentifier('CustomField'), typeArguments)
     );
   }