From a4ba21c23f2aaf345526d2b78eff3799bae3c321 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 24 Jan 2026 07:17:53 +0000
Subject: [PATCH 1/5] Initial plan


From 6a8d8e56ba8458981a68e79e3d320863ec0fc416 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 24 Jan 2026 07:22:02 +0000
Subject: [PATCH 2/5] Add support for all field types in FieldFactory

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
---
 .../src/components/form/FieldFactory.tsx      | 242 ++++++++++++++
 .../src/components/form/FormRenderer.test.tsx | 311 ++++++++++++++++++
 2 files changed, 553 insertions(+)

diff --git a/packages/react/src/components/form/FieldFactory.tsx b/packages/react/src/components/form/FieldFactory.tsx
index 10003262f..17d49f280 100644
--- a/packages/react/src/components/form/FieldFactory.tsx
+++ b/packages/react/src/components/form/FieldFactory.tsx
@@ -211,6 +211,248 @@ export const FieldFactory: React.FC<FieldFactoryProps> = ({
         />
       );
 
+    case 'currency':
+      return renderField(
+        <div className="relative">
+          <span className="absolute left-3 top-2 text-gray-500">$</span>
+          <input
+            id={fieldName}
+            type="number"
+            placeholder={field.placeholder}
+            disabled={disabled}
+            step="0.01"
+            className="w-full pl-8 pr-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed"
+            {...register(fieldName, {
+              required: field.required ? `${field.label || fieldName} is required` : false,
+              valueAsNumber: true,
+            })}
+          />
+        </div>
+      );
+
+    case 'percent':
+      return renderField(
+        <div className="relative">
+          <input
+            id={fieldName}
+            type="number"
+            placeholder={field.placeholder}
+            disabled={disabled}
+            step="0.01"
+            min="0"
+            max="100"
+            className="w-full pr-8 pl-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed"
+            {...register(fieldName, {
+              required: field.required ? `${field.label || fieldName} is required` : false,
+              valueAsNumber: true,
+            })}
+          />
+          <span className="absolute right-3 top-2 text-gray-500">%</span>
+        </div>
+      );
+
+    case 'phone':
+      return renderField(
+        <input
+          id={fieldName}
+          type="tel"
+          placeholder={field.placeholder || '+1 (555) 000-0000'}
+          disabled={disabled}
+          className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed"
+          {...register(fieldName, {
+            required: field.required ? `${field.label || fieldName} is required` : false,
+          })}
+        />
+      );
+
+    case 'markdown':
+      return renderField(
+        <textarea
+          id={fieldName}
+          placeholder={field.placeholder || 'Enter markdown text...'}
+          disabled={disabled}
+          rows={8}
+          className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed font-mono"
+          {...register(fieldName, {
+            required: field.required ? `${field.label || fieldName} is required` : false,
+          })}
+        />
+      );
+
+    case 'html':
+      return renderField(
+        <textarea
+          id={fieldName}
+          placeholder={field.placeholder || 'Enter HTML...'}
+          disabled={disabled}
+          rows={8}
+          className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed font-mono"
+          {...register(fieldName, {
+            required: field.required ? `${field.label || fieldName} is required` : false,
+          })}
+        />
+      );
+
+    case 'file':
+      return renderField(
+        <input
+          id={fieldName}
+          type="file"
+          disabled={disabled}
+          multiple={field.multiple}
+          accept={field.accept?.join(',')}
+          className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100"
+          {...register(fieldName, {
+            required: field.required ? `${field.label || fieldName} is required` : false,
+          })}
+        />
+      );
+
+    case 'image':
+      return renderField(
+        <input
+          id={fieldName}
+          type="file"
+          disabled={disabled}
+          multiple={field.multiple}
+          accept={field.accept?.join(',') || 'image/*'}
+          className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100"
+          {...register(fieldName, {
+            required: field.required ? `${field.label || fieldName} is required` : false,
+          })}
+        />
+      );
+
+    case 'location':
+      return renderField(
+        <div className="space-y-2">
+          <input
+            id={`${fieldName}-lat`}
+            type="number"
+            placeholder="Latitude"
+            disabled={disabled}
+            step="any"
+            className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed"
+            {...register(`${fieldName}.lat`, {
+              required: field.required ? 'Latitude is required' : false,
+              valueAsNumber: true,
+            })}
+          />
+          <input
+            id={`${fieldName}-lng`}
+            type="number"
+            placeholder="Longitude"
+            disabled={disabled}
+            step="any"
+            className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed"
+            {...register(`${fieldName}.lng`, {
+              required: field.required ? 'Longitude is required' : false,
+              valueAsNumber: true,
+            })}
+          />
+        </div>
+      );
+
+    case 'lookup':
+    case 'master_detail':
+      return renderField(
+        <select
+          id={fieldName}
+          disabled={disabled}
+          multiple={field.multiple}
+          className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed"
+          {...register(fieldName, {
+            required: field.required ? `${field.label || fieldName} is required` : false,
+          })}
+        >
+          <option value="">{field.placeholder || 'Select an option'}</option>
+          {field.options?.map((option) => (
+            <option key={option.value} value={option.value} disabled={option.disabled}>
+              {option.label}
+            </option>
+          ))}
+        </select>
+      );
+
+    case 'user':
+    case 'owner':
+      return renderField(
+        <select
+          id={fieldName}
+          disabled={disabled}
+          multiple={field.multiple}
+          className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed"
+          {...register(fieldName, {
+            required: field.required ? `${field.label || fieldName} is required` : false,
+          })}
+        >
+          <option value="">{field.placeholder || 'Select user'}</option>
+          {field.options?.map((option) => (
+            <option key={option.value} value={option.value} disabled={option.disabled}>
+              {option.label}
+            </option>
+          ))}
+        </select>
+      );
+
+    case 'formula':
+    case 'summary':
+    case 'auto_number':
+      // Read-only computed fields - display as disabled text input
+      return renderField(
+        <input
+          id={fieldName}
+          type="text"
+          disabled={true}
+          className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm bg-gray-50 cursor-not-allowed text-gray-600"
+          {...register(fieldName)}
+        />
+      );
+
+    case 'object':
+      return renderField(
+        <textarea
+          id={fieldName}
+          placeholder={field.placeholder || 'Enter JSON object...'}
+          disabled={disabled}
+          rows={6}
+          className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed font-mono text-sm"
+          {...register(fieldName, {
+            required: field.required ? `${field.label || fieldName} is required` : false,
+            validate: (value) => {
+              if (!value) return true;
+              try {
+                JSON.parse(value);
+                return true;
+              } catch (e) {
+                return 'Invalid JSON format';
+              }
+            },
+          })}
+        />
+      );
+
+    case 'vector':
+      // Vector fields are typically read-only or require specialized input
+      return renderField(
+        <input
+          id={fieldName}
+          type="text"
+          placeholder={field.placeholder || 'Vector data (read-only)'}
+          disabled={true}
+          className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm bg-gray-50 cursor-not-allowed text-gray-600"
+          {...register(fieldName)}
+        />
+      );
+
+    case 'grid':
+      // Grid fields require complex table/grid editor - placeholder for now
+      return renderField(
+        <div className="w-full px-3 py-2 border border-gray-300 rounded-md bg-gray-50 text-gray-600">
+          <p className="text-sm">Grid editor not yet implemented</p>
+        </div>
+      );
+
     default:
       // Default to text input
       return renderField(
diff --git a/packages/react/src/components/form/FormRenderer.test.tsx b/packages/react/src/components/form/FormRenderer.test.tsx
index d4a9435ed..cd63c8860 100644
--- a/packages/react/src/components/form/FormRenderer.test.tsx
+++ b/packages/react/src/components/form/FormRenderer.test.tsx
@@ -273,4 +273,315 @@ describe('FormRenderer', () => {
     expect(asterisk).toBeInTheDocument();
     expect(asterisk?.textContent).toContain('*');
   });
+
+  // Test new field types
+  describe('Extended field types', () => {
+    it('should render currency field with dollar sign', () => {
+      const schema: FormView = {
+        type: 'simple',
+        sections: [
+          {
+            label: 'Pricing',
+            collapsible: false,
+            collapsed: false,
+            columns: 1,
+            fields: [
+              {
+                field: 'price',
+                label: 'Price',
+                widget: 'currency',
+              },
+            ],
+          },
+        ],
+      };
+
+      const { container } = render(<FormRenderer schema={schema} />);
+      expect(screen.getByLabelText('Price')).toBeInTheDocument();
+      expect(container.querySelector('.absolute')?.textContent).toBe('$');
+    });
+
+    it('should render percent field with percent sign', () => {
+      const schema: FormView = {
+        type: 'simple',
+        sections: [
+          {
+            label: 'Metrics',
+            collapsible: false,
+            collapsed: false,
+            columns: 1,
+            fields: [
+              {
+                field: 'discount',
+                label: 'Discount',
+                widget: 'percent',
+              },
+            ],
+          },
+        ],
+      };
+
+      const { container } = render(<FormRenderer schema={schema} />);
+      expect(screen.getByLabelText('Discount')).toBeInTheDocument();
+      expect(container.querySelector('.absolute')?.textContent).toBe('%');
+    });
+
+    it('should render phone field', () => {
+      const schema: FormView = {
+        type: 'simple',
+        sections: [
+          {
+            label: 'Contact',
+            collapsible: false,
+            collapsed: false,
+            columns: 1,
+            fields: [
+              {
+                field: 'phoneNumber',
+                label: 'Phone Number',
+                widget: 'phone',
+              },
+            ],
+          },
+        ],
+      };
+
+      render(<FormRenderer schema={schema} />);
+      const input = screen.getByLabelText('Phone Number') as HTMLInputElement;
+      expect(input.type).toBe('tel');
+    });
+
+    it('should render markdown field as textarea', () => {
+      const schema: FormView = {
+        type: 'simple',
+        sections: [
+          {
+            label: 'Content',
+            collapsible: false,
+            collapsed: false,
+            columns: 1,
+            fields: [
+              {
+                field: 'content',
+                label: 'Content',
+                widget: 'markdown',
+              },
+            ],
+          },
+        ],
+      };
+
+      render(<FormRenderer schema={schema} />);
+      const textarea = screen.getByLabelText('Content') as HTMLTextAreaElement;
+      expect(textarea.tagName).toBe('TEXTAREA');
+    });
+
+    it('should render html field as textarea', () => {
+      const schema: FormView = {
+        type: 'simple',
+        sections: [
+          {
+            label: 'Content',
+            collapsible: false,
+            collapsed: false,
+            columns: 1,
+            fields: [
+              {
+                field: 'htmlContent',
+                label: 'HTML Content',
+                widget: 'html',
+              },
+            ],
+          },
+        ],
+      };
+
+      render(<FormRenderer schema={schema} />);
+      const textarea = screen.getByLabelText('HTML Content') as HTMLTextAreaElement;
+      expect(textarea.tagName).toBe('TEXTAREA');
+    });
+
+    it('should render file field', () => {
+      const schema: FormView = {
+        type: 'simple',
+        sections: [
+          {
+            label: 'Upload',
+            collapsible: false,
+            collapsed: false,
+            columns: 1,
+            fields: [
+              {
+                field: 'document',
+                label: 'Document',
+                widget: 'file',
+              },
+            ],
+          },
+        ],
+      };
+
+      render(<FormRenderer schema={schema} />);
+      const input = screen.getByLabelText('Document') as HTMLInputElement;
+      expect(input.type).toBe('file');
+    });
+
+    it('should render image field', () => {
+      const schema: FormView = {
+        type: 'simple',
+        sections: [
+          {
+            label: 'Upload',
+            collapsible: false,
+            collapsed: false,
+            columns: 1,
+            fields: [
+              {
+                field: 'avatar',
+                label: 'Avatar',
+                widget: 'image',
+              },
+            ],
+          },
+        ],
+      };
+
+      render(<FormRenderer schema={schema} />);
+      const input = screen.getByLabelText('Avatar') as HTMLInputElement;
+      expect(input.type).toBe('file');
+    });
+
+    it('should render location field with lat/lng inputs', () => {
+      const schema: FormView = {
+        type: 'simple',
+        sections: [
+          {
+            label: 'Location',
+            collapsible: false,
+            collapsed: false,
+            columns: 1,
+            fields: [
+              {
+                field: 'coordinates',
+                label: 'Coordinates',
+                widget: 'location',
+              },
+            ],
+          },
+        ],
+      };
+
+      const { container } = render(<FormRenderer schema={schema} />);
+      const inputs = container.querySelectorAll('input[type="number"]');
+      expect(inputs.length).toBe(2);
+    });
+
+    it('should render lookup field as select', () => {
+      const schema: FormView = {
+        type: 'simple',
+        sections: [
+          {
+            label: 'Relations',
+            collapsible: false,
+            collapsed: false,
+            columns: 1,
+            fields: [
+              {
+                field: 'account',
+                label: 'Account',
+                widget: 'lookup',
+                options: [
+                  { label: 'Account 1', value: '1' },
+                  { label: 'Account 2', value: '2' },
+                ],
+              },
+            ],
+          },
+        ],
+      };
+
+      render(<FormRenderer schema={schema} />);
+      const select = screen.getByLabelText('Account') as HTMLSelectElement;
+      expect(select.tagName).toBe('SELECT');
+    });
+
+    it('should render user field as select', () => {
+      const schema: FormView = {
+        type: 'simple',
+        sections: [
+          {
+            label: 'Assignment',
+            collapsible: false,
+            collapsed: false,
+            columns: 1,
+            fields: [
+              {
+                field: 'assignedTo',
+                label: 'Assigned To',
+                widget: 'user',
+                options: [
+                  { label: 'User 1', value: 'user1' },
+                  { label: 'User 2', value: 'user2' },
+                ],
+              },
+            ],
+          },
+        ],
+      };
+
+      render(<FormRenderer schema={schema} />);
+      const select = screen.getByLabelText('Assigned To') as HTMLSelectElement;
+      expect(select.tagName).toBe('SELECT');
+    });
+
+    it('should render formula field as disabled input', () => {
+      const schema: FormView = {
+        type: 'simple',
+        sections: [
+          {
+            label: 'Computed',
+            collapsible: false,
+            collapsed: false,
+            columns: 1,
+            fields: [
+              {
+                field: 'total',
+                label: 'Total',
+                widget: 'formula',
+              },
+            ],
+          },
+        ],
+      };
+
+      render(<FormRenderer schema={schema} />);
+      const input = screen.getByLabelText('Total') as HTMLInputElement;
+      expect(input.disabled).toBe(true);
+    });
+
+    it('should render object field as JSON textarea', () => {
+      const schema: FormView = {
+        type: 'simple',
+        sections: [
+          {
+            label: 'Data',
+            collapsible: false,
+            collapsed: false,
+            columns: 1,
+            fields: [
+              {
+                field: 'metadata',
+                label: 'Metadata',
+                widget: 'object',
+              },
+            ],
+          },
+        ],
+      };
+
+      render(<FormRenderer schema={schema} />);
+      const textarea = screen.getByLabelText('Metadata') as HTMLTextAreaElement;
+      expect(textarea.tagName).toBe('TEXTAREA');
+    });
+  });
 });

From 21c89522cafac1311a38bc528d414b56de36bb08 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 24 Jan 2026 07:25:22 +0000
Subject: [PATCH 3/5] Fix TypeScript types for extended field properties

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
---
 .../src/components/form/FieldFactory.tsx      | 34 ++++++++++++++-----
 .../src/components/form/FormRenderer.test.tsx | 24 +++++++++----
 2 files changed, 44 insertions(+), 14 deletions(-)

diff --git a/packages/react/src/components/form/FieldFactory.tsx b/packages/react/src/components/form/FieldFactory.tsx
index 17d49f280..ac0bf8365 100644
--- a/packages/react/src/components/form/FieldFactory.tsx
+++ b/packages/react/src/components/form/FieldFactory.tsx
@@ -10,6 +10,21 @@ import React from 'react';
 import { UseFormReturn } from 'react-hook-form';
 import type { FormField } from '@objectstack/spec/ui';
 
+/**
+ * Extended form field with additional properties for complex widgets
+ * These properties are not part of the standard FormField schema but may be
+ * provided by specific implementations
+ */
+export interface ExtendedFormField extends FormField {
+  multiple?: boolean;
+  accept?: string[];
+  options?: Array<{
+    label: string;
+    value: string;
+    disabled?: boolean;
+  }>;
+}
+
 export interface FieldFactoryProps {
   /**
    * Field configuration from FormFieldSchema
@@ -36,6 +51,9 @@ export const FieldFactory: React.FC<FieldFactoryProps> = ({
 }) => {
   const { register, formState: { errors } } = methods;
   
+  // Cast to extended field for properties not in base schema
+  const extendedField = field as ExtendedFormField;
+  
   // Determine the widget type
   const widgetType = field.widget || 'text';
   const fieldName = field.field;
@@ -299,8 +317,8 @@ export const FieldFactory: React.FC<FieldFactoryProps> = ({
           id={fieldName}
           type="file"
           disabled={disabled}
-          multiple={field.multiple}
-          accept={field.accept?.join(',')}
+          multiple={extendedField.multiple}
+          accept={extendedField.accept?.join(',')}
           className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100"
           {...register(fieldName, {
             required: field.required ? `${field.label || fieldName} is required` : false,
@@ -314,8 +332,8 @@ export const FieldFactory: React.FC<FieldFactoryProps> = ({
           id={fieldName}
           type="file"
           disabled={disabled}
-          multiple={field.multiple}
-          accept={field.accept?.join(',') || 'image/*'}
+          multiple={extendedField.multiple}
+          accept={extendedField.accept?.join(',') || 'image/*'}
           className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100"
           {...register(fieldName, {
             required: field.required ? `${field.label || fieldName} is required` : false,
@@ -359,14 +377,14 @@ export const FieldFactory: React.FC<FieldFactoryProps> = ({
         <select
           id={fieldName}
           disabled={disabled}
-          multiple={field.multiple}
+          multiple={extendedField.multiple}
           className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed"
           {...register(fieldName, {
             required: field.required ? `${field.label || fieldName} is required` : false,
           })}
         >
           <option value="">{field.placeholder || 'Select an option'}</option>
-          {field.options?.map((option) => (
+          {extendedField.options?.map((option) => (
             <option key={option.value} value={option.value} disabled={option.disabled}>
               {option.label}
             </option>
@@ -380,14 +398,14 @@ export const FieldFactory: React.FC<FieldFactoryProps> = ({
         <select
           id={fieldName}
           disabled={disabled}
-          multiple={field.multiple}
+          multiple={extendedField.multiple}
           className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed"
           {...register(fieldName, {
             required: field.required ? `${field.label || fieldName} is required` : false,
           })}
         >
           <option value="">{field.placeholder || 'Select user'}</option>
-          {field.options?.map((option) => (
+          {extendedField.options?.map((option) => (
             <option key={option.value} value={option.value} disabled={option.disabled}>
               {option.label}
             </option>
diff --git a/packages/react/src/components/form/FormRenderer.test.tsx b/packages/react/src/components/form/FormRenderer.test.tsx
index cd63c8860..ccde28a10 100644
--- a/packages/react/src/components/form/FormRenderer.test.tsx
+++ b/packages/react/src/components/form/FormRenderer.test.tsx
@@ -11,6 +11,18 @@ import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { FormRenderer } from './FormRenderer';
 import type { FormView } from '@objectstack/spec/ui';
+import type { ExtendedFormField } from './FieldFactory';
+
+// Helper type for form views with extended fields
+type ExtendedFormView = Omit<FormView, 'sections'> & {
+  sections?: Array<{
+    label?: string;
+    collapsible?: boolean;
+    collapsed?: boolean;
+    columns?: '1' | '2' | '3' | '4';
+    fields: (string | ExtendedFormField)[];
+  }>;
+};
 
 describe('FormRenderer', () => {
   it('should render a simple form with text fields', () => {
@@ -477,14 +489,14 @@ describe('FormRenderer', () => {
     });
 
     it('should render lookup field as select', () => {
-      const schema: FormView = {
+      const schema: ExtendedFormView = {
         type: 'simple',
         sections: [
           {
             label: 'Relations',
             collapsible: false,
             collapsed: false,
-            columns: 1,
+            columns: '1',
             fields: [
               {
                 field: 'account',
@@ -500,20 +512,20 @@ describe('FormRenderer', () => {
         ],
       };
 
-      render(<FormRenderer schema={schema} />);
+      render(<FormRenderer schema={schema as FormView} />);
       const select = screen.getByLabelText('Account') as HTMLSelectElement;
       expect(select.tagName).toBe('SELECT');
     });
 
     it('should render user field as select', () => {
-      const schema: FormView = {
+      const schema: ExtendedFormView = {
         type: 'simple',
         sections: [
           {
             label: 'Assignment',
             collapsible: false,
             collapsed: false,
-            columns: 1,
+            columns: '1',
             fields: [
               {
                 field: 'assignedTo',
@@ -529,7 +541,7 @@ describe('FormRenderer', () => {
         ],
       };
 
-      render(<FormRenderer schema={schema} />);
+      render(<FormRenderer schema={schema as FormView} />);
       const select = screen.getByLabelText('Assigned To') as HTMLSelectElement;
       expect(select.tagName).toBe('SELECT');
     });

From ace48b343e4dda13bbb771e8dfc6bbfe68eff2f4 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 24 Jan 2026 07:27:46 +0000
Subject: [PATCH 4/5] Improve multiple select handling and update documentation

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
---
 .../src/components/form/FieldFactory.tsx      | 37 ++++++--
 packages/react/src/components/form/README.md  | 92 +++++++++++++++++--
 packages/react/src/components/form/index.ts   |  2 +-
 3 files changed, 114 insertions(+), 17 deletions(-)

diff --git a/packages/react/src/components/form/FieldFactory.tsx b/packages/react/src/components/form/FieldFactory.tsx
index ac0bf8365..68419e767 100644
--- a/packages/react/src/components/form/FieldFactory.tsx
+++ b/packages/react/src/components/form/FieldFactory.tsx
@@ -169,20 +169,29 @@ export const FieldFactory: React.FC<FieldFactoryProps> = ({
 
     case 'select':
     case 'dropdown':
-      // Note: This is a basic implementation without options support
-      // To properly support select fields, options would need to be passed
-      // via an extended FormField schema or external configuration
       return renderField(
         <select
           id={fieldName}
           disabled={disabled}
+          multiple={extendedField.multiple}
           className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed"
           {...register(fieldName, {
             required: field.required ? `${field.label || fieldName} is required` : false,
+            setValueAs: (value) => {
+              // Handle multiple select: convert HTMLCollection to array
+              if (extendedField.multiple && value instanceof HTMLCollection) {
+                return Array.from(value).map((opt: any) => opt.value);
+              }
+              return value;
+            },
           })}
         >
-          <option value="">{field.placeholder || 'Select an option'}</option>
-          {/* TODO: Add options support - requires extending FormField schema or external options provider */}
+          {!extendedField.multiple && <option value="">{field.placeholder || 'Select an option'}</option>}
+          {extendedField.options?.map((option) => (
+            <option key={option.value} value={option.value} disabled={option.disabled}>
+              {option.label}
+            </option>
+          ))}
         </select>
       );
 
@@ -381,9 +390,16 @@ export const FieldFactory: React.FC<FieldFactoryProps> = ({
           className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed"
           {...register(fieldName, {
             required: field.required ? `${field.label || fieldName} is required` : false,
+            setValueAs: (value) => {
+              // Handle multiple select: convert HTMLCollection to array
+              if (extendedField.multiple && value instanceof HTMLCollection) {
+                return Array.from(value).map((opt: any) => opt.value);
+              }
+              return value;
+            },
           })}
         >
-          <option value="">{field.placeholder || 'Select an option'}</option>
+          {!extendedField.multiple && <option value="">{field.placeholder || 'Select an option'}</option>}
           {extendedField.options?.map((option) => (
             <option key={option.value} value={option.value} disabled={option.disabled}>
               {option.label}
@@ -402,9 +418,16 @@ export const FieldFactory: React.FC<FieldFactoryProps> = ({
           className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed"
           {...register(fieldName, {
             required: field.required ? `${field.label || fieldName} is required` : false,
+            setValueAs: (value) => {
+              // Handle multiple select: convert HTMLCollection to array
+              if (extendedField.multiple && value instanceof HTMLCollection) {
+                return Array.from(value).map((opt: any) => opt.value);
+              }
+              return value;
+            },
           })}
         >
-          <option value="">{field.placeholder || 'Select user'}</option>
+          {!extendedField.multiple && <option value="">{field.placeholder || 'Select user'}</option>}
           {extendedField.options?.map((option) => (
             <option key={option.value} value={option.value} disabled={option.disabled}>
               {option.label}
diff --git a/packages/react/src/components/form/README.md b/packages/react/src/components/form/README.md
index c4fbe158c..198bd271f 100644
--- a/packages/react/src/components/form/README.md
+++ b/packages/react/src/components/form/README.md
@@ -147,25 +147,99 @@ interface FormField {
 
 The `FieldFactory` component supports the following widget types:
 
-- `text`, `string` - Text input
-- `email` - Email input
-- `password` - Password input
+### Text Input Types
+- `text`, `string` - Basic text input
+- `email` - Email input with validation
+- `password` - Password input (masked)
 - `url` - URL input
-- `tel` - Telephone input
+- `tel`, `phone` - Telephone/phone number input
+- `textarea` - Multi-line text input
+- `markdown` - Markdown text editor (textarea with monospace font)
+- `html` - HTML/Rich text editor (textarea with monospace font)
+
+### Numeric Input Types
 - `number`, `integer`, `float` - Number input
-- `checkbox`, `boolean` - Checkbox
-- `textarea` - Textarea
-- `select`, `dropdown` - Select dropdown (basic implementation, options support planned)
+- `currency` - Currency input with $ prefix
+- `percent` - Percentage input with % suffix
+
+### Boolean & Selection Types
+- `checkbox`, `boolean` - Checkbox input
+- `select`, `dropdown` - Select dropdown
+
+### Date & Time Types
 - `date` - Date picker
 - `datetime`, `datetime-local` - DateTime picker
 - `time` - Time picker
 
+### File Upload Types
+- `file` - File upload input
+- `image` - Image upload input (defaults to image/* mime types)
+
+### Relationship Types
+- `lookup` - Lookup/reference field (select with options)
+- `master_detail` - Master-detail relationship (select with options)
+- `user`, `owner` - User selection field (select with options)
+
+### Complex & Special Types
+- `location` - Geographic location (latitude/longitude inputs)
+- `object` - JSON object editor (textarea with JSON validation)
+- `formula` - Read-only computed field
+- `summary` - Read-only aggregation/rollup field
+- `auto_number` - Read-only auto-generated number
+- `vector` - Vector/embedding display (read-only)
+- `grid` - Sub-table/grid editor (placeholder)
+
+## Extended Field Properties
+
+Some field types support additional properties beyond the base FormField schema:
+
+```typescript
+interface ExtendedFormField extends FormField {
+  // For file/image uploads
+  multiple?: boolean;
+  accept?: string[];
+  
+  // For select/lookup/user fields
+  options?: Array<{
+    label: string;
+    value: string;
+    disabled?: boolean;
+  }>;
+}
+```
+
+Example usage with extended properties:
+
+```tsx
+{
+  field: 'avatar',
+  label: 'Profile Picture',
+  widget: 'image',
+  accept: ['image/png', 'image/jpeg'],
+  multiple: false
+}
+
+{
+  field: 'account',
+  label: 'Account',
+  widget: 'lookup',
+  options: [
+    { label: 'Account 1', value: '1' },
+    { label: 'Account 2', value: '2' }
+  ]
+}
+```
+
 ## Known Limitations
 
-### Version 0.1.0
+### Version 0.3.0
 
 - **Conditional Visibility**: The `visibleOn` and `dependsOn` properties are not yet implemented. Fields are visible by default unless explicitly marked as `hidden`.
-- **Select Options**: The select widget is a basic implementation without options support. Options will need to be passed via an extended schema or external configuration in a future version.
+- **Advanced Select Options**: While select/lookup/user fields support options via the `ExtendedFormField` interface, they don't yet support advanced features like search, async loading, or custom rendering.
+- **Rich Text Editors**: The `markdown` and `html` widgets currently use plain textareas with monospace fonts. Full WYSIWYG editors are planned for future releases.
+- **File Upload Preview**: File and image widgets support uploads but don't yet show previews or provide upload progress indicators.
+- **Location Maps**: The location widget provides lat/lng inputs but doesn't include map visualization or geocoding.
+- **Grid Editor**: The grid widget is a placeholder and doesn't yet provide spreadsheet-like editing capabilities.
 - **Validation**: Currently only basic required field validation is supported via react-hook-form. Advanced Zod schema validation is planned for future releases.
 
 These features are planned for future releases.
diff --git a/packages/react/src/components/form/index.ts b/packages/react/src/components/form/index.ts
index 3855a32d2..75003a5d6 100644
--- a/packages/react/src/components/form/index.ts
+++ b/packages/react/src/components/form/index.ts
@@ -9,4 +9,4 @@
 export { FormRenderer } from './FormRenderer';
 export type { FormRendererProps } from './FormRenderer';
 export { FieldFactory } from './FieldFactory';
-export type { FieldFactoryProps } from './FieldFactory';
+export type { FieldFactoryProps, ExtendedFormField } from './FieldFactory';

From 8668ee2e65e09a8f9e3eb8359c8ed9dea43c62e7 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 24 Jan 2026 07:30:44 +0000
Subject: [PATCH 5/5] Refactor to use helper function and fix TypeScript types

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
---
 .../src/components/form/FieldFactory.tsx      | 32 +++++++------------
 1 file changed, 11 insertions(+), 21 deletions(-)

diff --git a/packages/react/src/components/form/FieldFactory.tsx b/packages/react/src/components/form/FieldFactory.tsx
index 68419e767..3444e6091 100644
--- a/packages/react/src/components/form/FieldFactory.tsx
+++ b/packages/react/src/components/form/FieldFactory.tsx
@@ -59,6 +59,14 @@ export const FieldFactory: React.FC<FieldFactoryProps> = ({
   const fieldName = field.field;
   const error = errors[fieldName];
 
+  // Helper function to handle multiple select value conversion
+  const handleMultipleSelectValue = (value: any) => {
+    if (extendedField.multiple && value instanceof HTMLCollection) {
+      return Array.from(value as HTMLCollectionOf<HTMLOptionElement>).map((opt) => opt.value);
+    }
+    return value;
+  };
+
   // Handle conditional visibility
   // Note: visibleOn expression evaluation is not yet implemented
   // Fields are always visible unless explicitly hidden
@@ -177,13 +185,7 @@ export const FieldFactory: React.FC<FieldFactoryProps> = ({
           className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed"
           {...register(fieldName, {
             required: field.required ? `${field.label || fieldName} is required` : false,
-            setValueAs: (value) => {
-              // Handle multiple select: convert HTMLCollection to array
-              if (extendedField.multiple && value instanceof HTMLCollection) {
-                return Array.from(value).map((opt: any) => opt.value);
-              }
-              return value;
-            },
+            setValueAs: handleMultipleSelectValue,
           })}
         >
           {!extendedField.multiple && <option value="">{field.placeholder || 'Select an option'}</option>}
@@ -390,13 +392,7 @@ export const FieldFactory: React.FC<FieldFactoryProps> = ({
           className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed"
           {...register(fieldName, {
             required: field.required ? `${field.label || fieldName} is required` : false,
-            setValueAs: (value) => {
-              // Handle multiple select: convert HTMLCollection to array
-              if (extendedField.multiple && value instanceof HTMLCollection) {
-                return Array.from(value).map((opt: any) => opt.value);
-              }
-              return value;
-            },
+            setValueAs: handleMultipleSelectValue,
           })}
         >
           {!extendedField.multiple && <option value="">{field.placeholder || 'Select an option'}</option>}
@@ -418,13 +414,7 @@ export const FieldFactory: React.FC<FieldFactoryProps> = ({
           className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed"
           {...register(fieldName, {
             required: field.required ? `${field.label || fieldName} is required` : false,
-            setValueAs: (value) => {
-              // Handle multiple select: convert HTMLCollection to array
-              if (extendedField.multiple && value instanceof HTMLCollection) {
-                return Array.from(value).map((opt: any) => opt.value);
-              }
-              return value;
-            },
+            setValueAs: handleMultipleSelectValue,
           })}
         >
           {!extendedField.multiple && <option value="">{field.placeholder || 'Select user'}</option>}