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


From 49c73740c3d0465bed806620e952a7efc5493435 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 24 Jan 2026 07:01:46 +0000
Subject: [PATCH 2/6] feat: Add FormRenderer component with basic field support

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
---
 packages/react/package.json                   |   6 +-
 .../src/components/form/FieldFactory.tsx      | 242 ++++++++++++++++++
 .../src/components/form/FormRenderer.tsx      | 205 +++++++++++++++
 packages/react/src/components/form/index.ts   |  12 +
 packages/react/src/index.ts                   |   1 +
 pnpm-lock.yaml                                |  21 ++
 6 files changed, 486 insertions(+), 1 deletion(-)
 create mode 100644 packages/react/src/components/form/FieldFactory.tsx
 create mode 100644 packages/react/src/components/form/FormRenderer.tsx
 create mode 100644 packages/react/src/components/form/index.ts

diff --git a/packages/react/package.json b/packages/react/package.json
index 029d4c3ac..ac502019c 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -21,7 +21,11 @@
     "lint": "eslint ."
   },
   "dependencies": {
-    "@object-ui/core": "workspace:*"
+    "@object-ui/core": "workspace:*",
+    "@objectstack/spec": "^0.3.2",
+    "react-hook-form": "^7.71.1",
+    "zod": "^3.22.4",
+    "@hookform/resolvers": "^3.9.1"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
diff --git a/packages/react/src/components/form/FieldFactory.tsx b/packages/react/src/components/form/FieldFactory.tsx
new file mode 100644
index 000000000..b39dcec38
--- /dev/null
+++ b/packages/react/src/components/form/FieldFactory.tsx
@@ -0,0 +1,242 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import { UseFormReturn } from 'react-hook-form';
+import type { FormField } from '@objectstack/spec/ui';
+
+export interface FieldFactoryProps {
+  /**
+   * Field configuration from FormFieldSchema
+   */
+  field: FormField;
+  /**
+   * React Hook Form methods
+   */
+  methods: UseFormReturn<any>;
+  /**
+   * Whether the field is disabled
+   */
+  disabled?: boolean;
+}
+
+/**
+ * FieldFactory component that renders different input types based on
+ * the widget property or field type
+ */
+export const FieldFactory: React.FC<FieldFactoryProps> = ({
+  field,
+  methods,
+  disabled = false,
+}) => {
+  const { register, formState: { errors }, watch } = methods;
+  
+  // Determine the widget type
+  const widgetType = field.widget || 'text';
+  const fieldName = field.field;
+  const error = errors[fieldName];
+
+  // Handle conditional visibility
+  const shouldShow = React.useMemo(() => {
+    if (field.visibleOn) {
+      // Evaluate visibility expression
+      // For now, simple implementation - can be enhanced
+      try {
+        const formData = watch();
+        // Simple expression evaluation: "fieldName == 'value'"
+        // This is a placeholder - real implementation would use a proper expression evaluator
+        return true;
+      } catch (e) {
+        return true;
+      }
+    }
+    return true;
+  }, [field.visibleOn, watch]);
+
+  if (!shouldShow) {
+    return null;
+  }
+
+  // Common field wrapper
+  const renderField = (input: React.ReactNode) => (
+    <div className="space-y-2">
+      {field.label && (
+        <label htmlFor={fieldName} className="block text-sm font-medium text-gray-700">
+          {field.label}
+          {field.required && <span className="text-red-500 ml-1">*</span>}
+        </label>
+      )}
+      {input}
+      {field.helpText && (
+        <p className="text-sm text-gray-500">{field.helpText}</p>
+      )}
+      {error && (
+        <p className="text-sm text-red-600">{error.message as string}</p>
+      )}
+    </div>
+  );
+
+  // Render based on widget type
+  switch (widgetType.toLowerCase()) {
+    case 'text':
+    case 'string':
+    case 'email':
+    case 'password':
+    case 'url':
+    case 'tel':
+      return renderField(
+        <input
+          id={fieldName}
+          type={widgetType === 'string' ? 'text' : widgetType}
+          placeholder={field.placeholder}
+          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 'number':
+    case 'integer':
+    case 'float':
+      return renderField(
+        <input
+          id={fieldName}
+          type="number"
+          placeholder={field.placeholder}
+          disabled={disabled}
+          step={widgetType === 'integer' ? '1' : '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, {
+            required: field.required ? `${field.label || fieldName} is required` : false,
+            valueAsNumber: true,
+          })}
+        />
+      );
+
+    case 'checkbox':
+    case 'boolean':
+      return (
+        <div className="flex items-start space-x-2">
+          <input
+            id={fieldName}
+            type="checkbox"
+            disabled={disabled}
+            className="mt-1 h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-2 focus:ring-blue-500 disabled:opacity-50"
+            {...register(fieldName)}
+          />
+          <div className="flex-1">
+            {field.label && (
+              <label htmlFor={fieldName} className="text-sm font-medium text-gray-700">
+                {field.label}
+                {field.required && <span className="text-red-500 ml-1">*</span>}
+              </label>
+            )}
+            {field.helpText && (
+              <p className="text-sm text-gray-500 mt-1">{field.helpText}</p>
+            )}
+            {error && (
+              <p className="text-sm text-red-600 mt-1">{error.message as string}</p>
+            )}
+          </div>
+        </div>
+      );
+
+    case 'textarea':
+      return renderField(
+        <textarea
+          id={fieldName}
+          placeholder={field.placeholder}
+          disabled={disabled}
+          rows={4}
+          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 'select':
+    case 'dropdown':
+      // For select, we'd need options - this is a basic implementation
+      return renderField(
+        <select
+          id={fieldName}
+          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,
+          })}
+        >
+          <option value="">{field.placeholder || 'Select an option'}</option>
+          {/* Options would be populated from field configuration */}
+        </select>
+      );
+
+    case 'date':
+      return renderField(
+        <input
+          id={fieldName}
+          type="date"
+          placeholder={field.placeholder}
+          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 'datetime':
+    case 'datetime-local':
+      return renderField(
+        <input
+          id={fieldName}
+          type="datetime-local"
+          placeholder={field.placeholder}
+          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 'time':
+      return renderField(
+        <input
+          id={fieldName}
+          type="time"
+          placeholder={field.placeholder}
+          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,
+          })}
+        />
+      );
+
+    default:
+      // Default to text input
+      return renderField(
+        <input
+          id={fieldName}
+          type="text"
+          placeholder={field.placeholder}
+          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,
+          })}
+        />
+      );
+  }
+};
+
+FieldFactory.displayName = 'FieldFactory';
diff --git a/packages/react/src/components/form/FormRenderer.tsx b/packages/react/src/components/form/FormRenderer.tsx
new file mode 100644
index 000000000..315d001e4
--- /dev/null
+++ b/packages/react/src/components/form/FormRenderer.tsx
@@ -0,0 +1,205 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import { useForm, FormProvider, UseFormReturn } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import type { FormView, FormSection } from '@objectstack/spec/ui';
+import { z } from 'zod';
+import { FieldFactory } from './FieldFactory';
+
+export interface FormRendererProps {
+  /**
+   * The FormView schema from @objectstack/spec
+   */
+  schema: FormView;
+  /**
+   * Initial form data
+   */
+  data?: Record<string, any>;
+  /**
+   * Form submission handler
+   */
+  onSubmit?: (data: Record<string, any>) => void | Promise<void>;
+  /**
+   * Form change handler
+   */
+  onChange?: (data: Record<string, any>) => void;
+  /**
+   * Custom class name for the form
+   */
+  className?: string;
+  /**
+   * Whether the form is disabled
+   */
+  disabled?: boolean;
+}
+
+/**
+ * FormRenderer component that renders forms based on FormViewSchema
+ * from @objectstack/spec
+ */
+export const FormRenderer: React.FC<FormRendererProps> = ({
+  schema,
+  data = {},
+  onSubmit,
+  onChange,
+  className = '',
+  disabled = false,
+}) => {
+  // Create form methods with react-hook-form
+  const methods = useForm({
+    defaultValues: data,
+    mode: 'onChange',
+  });
+
+  const { handleSubmit, watch } = methods;
+
+  // Watch for form changes
+  React.useEffect(() => {
+    if (onChange) {
+      const subscription = watch((value) => {
+        onChange(value as Record<string, any>);
+      });
+      return () => subscription.unsubscribe();
+    }
+  }, [watch, onChange]);
+
+  // Handle form submission
+  const onSubmitForm = handleSubmit(async (formData) => {
+    if (onSubmit) {
+      await onSubmit(formData);
+    }
+  });
+
+  // Render sections or fields
+  const renderContent = () => {
+    if (!schema.sections || schema.sections.length === 0) {
+      return null;
+    }
+
+    return (
+      <div className="space-y-6">
+        {schema.sections.map((section, index) => (
+          <FormSectionRenderer
+            key={index}
+            section={section}
+            methods={methods}
+            disabled={disabled}
+          />
+        ))}
+      </div>
+    );
+  };
+
+  return (
+    <FormProvider {...methods}>
+      <form onSubmit={onSubmitForm} className={`space-y-6 ${className}`}>
+        {renderContent()}
+        
+        {/* Submit button - optional, can be customized */}
+        <div className="flex justify-end gap-2">
+          <button
+            type="submit"
+            disabled={disabled}
+            className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            Submit
+          </button>
+        </div>
+      </form>
+    </FormProvider>
+  );
+};
+
+interface FormSectionRendererProps {
+  section: FormSection;
+  methods: UseFormReturn<any>;
+  disabled?: boolean;
+}
+
+/**
+ * Renders a form section with grid layout
+ */
+const FormSectionRenderer: React.FC<FormSectionRendererProps> = ({
+  section,
+  methods,
+  disabled = false,
+}) => {
+  const [isCollapsed, setIsCollapsed] = React.useState(section.collapsed || false);
+
+  // Determine grid columns based on section.columns
+  const gridCols = {
+    1: 'grid-cols-1',
+    2: 'grid-cols-1 md:grid-cols-2',
+    3: 'grid-cols-1 md:grid-cols-3',
+    4: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4',
+  }[section.columns || 1];
+
+  const handleToggleCollapse = () => {
+    if (section.collapsible) {
+      setIsCollapsed(!isCollapsed);
+    }
+  };
+
+  return (
+    <div className="border rounded-lg p-4">
+      {section.label && (
+        <div
+          className={`flex items-center justify-between mb-4 ${
+            section.collapsible ? 'cursor-pointer' : ''
+          }`}
+          onClick={handleToggleCollapse}
+        >
+          <h3 className="text-lg font-semibold">{section.label}</h3>
+          {section.collapsible && (
+            <span className="text-sm text-gray-500">
+              {isCollapsed ? '▶' : '▼'}
+            </span>
+          )}
+        </div>
+      )}
+
+      {!isCollapsed && (
+        <div className={`grid ${gridCols} gap-4`}>
+          {section.fields.map((field, index) => {
+            // Handle both string fields (legacy) and FormFieldSchema objects
+            const fieldName = typeof field === 'string' ? field : field.field;
+            const fieldConfig = typeof field === 'string' ? { field: fieldName } : field;
+
+            // Skip hidden fields
+            if (fieldConfig.hidden) {
+              return null;
+            }
+
+            // Calculate colSpan for grid
+            const colSpan = fieldConfig.colSpan || 1;
+            const colSpanClass = {
+              1: 'col-span-1',
+              2: 'col-span-2',
+              3: 'col-span-3',
+              4: 'col-span-4',
+            }[Math.min(colSpan, section.columns || 1)];
+
+            return (
+              <div key={`${fieldName}-${index}`} className={colSpanClass}>
+                <FieldFactory
+                  field={fieldConfig}
+                  methods={methods}
+                  disabled={disabled || fieldConfig.readonly}
+                />
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+};
+
+FormRenderer.displayName = 'FormRenderer';
diff --git a/packages/react/src/components/form/index.ts b/packages/react/src/components/form/index.ts
new file mode 100644
index 000000000..3855a32d2
--- /dev/null
+++ b/packages/react/src/components/form/index.ts
@@ -0,0 +1,12 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export { FormRenderer } from './FormRenderer';
+export type { FormRendererProps } from './FormRenderer';
+export { FieldFactory } from './FieldFactory';
+export type { FieldFactoryProps } from './FieldFactory';
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 950556206..87ca7ae0b 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -9,4 +9,5 @@
 export * from './SchemaRenderer';
 export * from './hooks'; // will be empty for now
 export * from './context'; // will be empty for now
+export * from './components/form';
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ef1387b9d..08361b34e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -727,15 +727,27 @@ importers:
 
   packages/react:
     dependencies:
+      '@hookform/resolvers':
+        specifier: ^3.9.1
+        version: 3.10.0(react-hook-form@7.71.1(react@19.2.3))
       '@object-ui/core':
         specifier: workspace:*
         version: link:../core
+      '@objectstack/spec':
+        specifier: ^0.3.2
+        version: 0.3.2
       react:
         specifier: 19.2.3
         version: 19.2.3
       react-dom:
         specifier: 19.2.3
         version: 19.2.3(react@19.2.3)
+      react-hook-form:
+        specifier: ^7.71.1
+        version: 7.71.1(react@19.2.3)
+      zod:
+        specifier: ^3.22.4
+        version: 3.25.76
     devDependencies:
       '@types/react':
         specifier: 19.0.6
@@ -1558,6 +1570,11 @@ packages:
       tailwindcss:
         optional: true
 
+  '@hookform/resolvers@3.10.0':
+    resolution: {integrity: sha512-79Dv+3mDF7i+2ajj7SkypSKHhl1cbln1OGavqrsF7p6mbUv11xpqpacPsGDCTRvCSjEEIez2ef1NveSVL3b0Ag==}
+    peerDependencies:
+      react-hook-form: ^7.0.0
+
   '@humanfs/core@0.19.1':
     resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
     engines: {node: '>=18.18.0'}
@@ -7040,6 +7057,10 @@ snapshots:
       next: 16.1.4(@babel/core@7.28.6)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       tailwindcss: 4.1.18
 
+  '@hookform/resolvers@3.10.0(react-hook-form@7.71.1(react@19.2.3))':
+    dependencies:
+      react-hook-form: 7.71.1(react@19.2.3)
+
   '@humanfs/core@0.19.1': {}
 
   '@humanfs/node@0.16.7':

From 697839016ba9ad084ab0d0d65542fd2f27716b7e Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 24 Jan 2026 07:03:32 +0000
Subject: [PATCH 3/6] test: Add comprehensive tests and documentation for
 FormRenderer

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
---
 .../src/components/form/FormRenderer.test.tsx | 276 ++++++++++++++++++
 packages/react/src/components/form/README.md  | 268 +++++++++++++++++
 .../types/examples/form-renderer-example.ts   | 189 ++++++++++++
 3 files changed, 733 insertions(+)
 create mode 100644 packages/react/src/components/form/FormRenderer.test.tsx
 create mode 100644 packages/react/src/components/form/README.md
 create mode 100644 packages/types/examples/form-renderer-example.ts

diff --git a/packages/react/src/components/form/FormRenderer.test.tsx b/packages/react/src/components/form/FormRenderer.test.tsx
new file mode 100644
index 000000000..d4a9435ed
--- /dev/null
+++ b/packages/react/src/components/form/FormRenderer.test.tsx
@@ -0,0 +1,276 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { FormRenderer } from './FormRenderer';
+import type { FormView } from '@objectstack/spec/ui';
+
+describe('FormRenderer', () => {
+  it('should render a simple form with text fields', () => {
+    const schema: FormView = {
+      type: 'simple',
+      sections: [
+        {
+          label: 'Personal Information',
+          collapsible: false,
+          collapsed: false,
+          columns: 2,
+          fields: [
+            {
+              field: 'firstName',
+              label: 'First Name',
+              required: true,
+              widget: 'text',
+            },
+            {
+              field: 'lastName',
+              label: 'Last Name',
+              required: true,
+              widget: 'text',
+            },
+          ],
+        },
+      ],
+    };
+
+    const { container } = render(<FormRenderer schema={schema} />);
+    
+    expect(screen.getByText('Personal Information')).toBeInTheDocument();
+    expect(screen.getByLabelText(/First Name/)).toBeInTheDocument();
+    expect(screen.getByLabelText(/Last Name/)).toBeInTheDocument();
+  });
+
+  it('should render form with initial data', () => {
+    const schema: FormView = {
+      type: 'simple',
+      sections: [
+        {
+          label: 'User Details',
+          collapsible: false,
+          collapsed: false,
+          columns: 1,
+          fields: [
+            {
+              field: 'username',
+              label: 'Username',
+              widget: 'text',
+            },
+          ],
+        },
+      ],
+    };
+
+    const data = { username: 'john_doe' };
+
+    render(<FormRenderer schema={schema} data={data} />);
+    
+    const input = screen.getByLabelText('Username') as HTMLInputElement;
+    expect(input.value).toBe('john_doe');
+  });
+
+  it('should handle multi-column layout', () => {
+    const schema: FormView = {
+      type: 'simple',
+      sections: [
+        {
+          label: 'Contact',
+          collapsible: false,
+          collapsed: false,
+          columns: 3,
+          fields: [
+            {
+              field: 'email',
+              label: 'Email',
+              widget: 'email',
+            },
+            {
+              field: 'phone',
+              label: 'Phone',
+              widget: 'tel',
+            },
+            {
+              field: 'address',
+              label: 'Address',
+              widget: 'textarea',
+              colSpan: 3,
+            },
+          ],
+        },
+      ],
+    };
+
+    render(<FormRenderer schema={schema} />);
+    
+    expect(screen.getByLabelText('Email')).toBeInTheDocument();
+    expect(screen.getByLabelText('Phone')).toBeInTheDocument();
+    expect(screen.getByLabelText('Address')).toBeInTheDocument();
+  });
+
+  it('should hide fields marked as hidden', () => {
+    const schema: FormView = {
+      type: 'simple',
+      sections: [
+        {
+          label: 'Form',
+          collapsible: false,
+          collapsed: false,
+          columns: 1,
+          fields: [
+            {
+              field: 'visible',
+              label: 'Visible Field',
+              widget: 'text',
+            },
+            {
+              field: 'hidden',
+              label: 'Hidden Field',
+              widget: 'text',
+              hidden: true,
+            },
+          ],
+        },
+      ],
+    };
+
+    render(<FormRenderer schema={schema} />);
+    
+    expect(screen.getByLabelText('Visible Field')).toBeInTheDocument();
+    expect(screen.queryByLabelText('Hidden Field')).not.toBeInTheDocument();
+  });
+
+  it('should support legacy string field format', () => {
+    const schema: FormView = {
+      type: 'simple',
+      sections: [
+        {
+          label: 'Legacy Form',
+          collapsible: false,
+          collapsed: false,
+          columns: 1,
+          fields: ['username', 'email'],
+        },
+      ],
+    };
+
+    const { container } = render(<FormRenderer schema={schema} />);
+    
+    // String fields should still render as inputs
+    const inputs = container.querySelectorAll('input[type="text"]');
+    expect(inputs.length).toBeGreaterThan(0);
+  });
+
+  it('should handle number fields', () => {
+    const schema: FormView = {
+      type: 'simple',
+      sections: [
+        {
+          label: 'Numbers',
+          collapsible: false,
+          collapsed: false,
+          columns: 1,
+          fields: [
+            {
+              field: 'age',
+              label: 'Age',
+              widget: 'number',
+              required: true,
+            },
+          ],
+        },
+      ],
+    };
+
+    render(<FormRenderer schema={schema} />);
+    
+    const input = screen.getByLabelText(/Age/) as HTMLInputElement;
+    expect(input.type).toBe('number');
+  });
+
+  it('should handle checkbox fields', () => {
+    const schema: FormView = {
+      type: 'simple',
+      sections: [
+        {
+          label: 'Preferences',
+          collapsible: false,
+          collapsed: false,
+          columns: 1,
+          fields: [
+            {
+              field: 'subscribe',
+              label: 'Subscribe to newsletter',
+              widget: 'checkbox',
+            },
+          ],
+        },
+      ],
+    };
+
+    render(<FormRenderer schema={schema} />);
+    
+    const checkbox = screen.getByLabelText('Subscribe to newsletter') as HTMLInputElement;
+    expect(checkbox.type).toBe('checkbox');
+  });
+
+  it('should render help text when provided', () => {
+    const schema: FormView = {
+      type: 'simple',
+      sections: [
+        {
+          label: 'Help Text',
+          collapsible: false,
+          collapsed: false,
+          columns: 1,
+          fields: [
+            {
+              field: 'password',
+              label: 'Password',
+              widget: 'password',
+              helpText: 'Must be at least 8 characters',
+            },
+          ],
+        },
+      ],
+    };
+
+    render(<FormRenderer schema={schema} />);
+    
+    expect(screen.getByText('Must be at least 8 characters')).toBeInTheDocument();
+  });
+
+  it('should mark required fields with asterisk', () => {
+    const schema: FormView = {
+      type: 'simple',
+      sections: [
+        {
+          label: 'Required',
+          collapsible: false,
+          collapsed: false,
+          columns: 1,
+          fields: [
+            {
+              field: 'name',
+              label: 'Name',
+              widget: 'text',
+              required: true,
+            },
+          ],
+        },
+      ],
+    };
+
+    const { container } = render(<FormRenderer schema={schema} />);
+    
+    // Check for asterisk
+    const asterisk = container.querySelector('.text-red-500');
+    expect(asterisk).toBeInTheDocument();
+    expect(asterisk?.textContent).toContain('*');
+  });
+});
diff --git a/packages/react/src/components/form/README.md b/packages/react/src/components/form/README.md
new file mode 100644
index 000000000..890595200
--- /dev/null
+++ b/packages/react/src/components/form/README.md
@@ -0,0 +1,268 @@
+# FormRenderer Component
+
+The `FormRenderer` component is a React component that renders forms based on the `FormView` schema from `@objectstack/spec`. It provides a flexible and powerful way to create forms with minimal code.
+
+## Features
+
+- ✅ **Schema-driven**: Define forms using JSON schema from `@objectstack/spec`
+- ✅ **Multi-column layouts**: Support for 1-4 column grid layouts
+- ✅ **Collapsible sections**: Organize forms with collapsible sections
+- ✅ **Field validation**: Built-in validation using `react-hook-form` and `zod`
+- ✅ **Multiple field types**: Text, Number, Checkbox, Textarea, Select, Date, DateTime, Time
+- ✅ **Conditional fields**: Show/hide fields based on conditions
+- ✅ **Column spanning**: Fields can span multiple columns
+- ✅ **Help text**: Display helpful descriptions for fields
+- ✅ **Required fields**: Mark fields as required with validation
+
+## Installation
+
+The FormRenderer component is part of the `@object-ui/react` package:
+
+```bash
+npm install @object-ui/react @objectstack/spec react-hook-form zod
+```
+
+Or with pnpm:
+
+```bash
+pnpm add @object-ui/react @objectstack/spec react-hook-form zod
+```
+
+## Basic Usage
+
+```tsx
+import { FormRenderer } from '@object-ui/react';
+import type { FormView } from '@objectstack/spec/ui';
+
+const schema: FormView = {
+  type: 'simple',
+  sections: [
+    {
+      label: 'Contact Information',
+      collapsible: false,
+      collapsed: false,
+      columns: 2,
+      fields: [
+        {
+          field: 'firstName',
+          label: 'First Name',
+          required: true,
+          widget: 'text',
+        },
+        {
+          field: 'lastName',
+          label: 'Last Name',
+          required: true,
+          widget: 'text',
+        },
+        {
+          field: 'email',
+          label: 'Email',
+          required: true,
+          widget: 'email',
+          helpText: 'We will never share your email',
+        },
+      ],
+    },
+  ],
+};
+
+function MyForm() {
+  const handleSubmit = (data: Record<string, any>) => {
+    console.log('Form submitted:', data);
+  };
+
+  return (
+    <FormRenderer
+      schema={schema}
+      onSubmit={handleSubmit}
+    />
+  );
+}
+```
+
+## Props
+
+### FormRendererProps
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `schema` | `FormView` | Yes | The FormView schema from @objectstack/spec |
+| `data` | `Record<string, any>` | No | Initial form data |
+| `onSubmit` | `(data: Record<string, any>) => void \| Promise<void>` | No | Form submission handler |
+| `onChange` | `(data: Record<string, any>) => void` | No | Form change handler |
+| `className` | `string` | No | Custom CSS class for the form |
+| `disabled` | `boolean` | No | Whether the form is disabled |
+
+## Schema Structure
+
+### FormView
+
+The main schema that defines the entire form.
+
+```typescript
+interface FormView {
+  type: 'simple' | 'tabbed' | 'wizard';
+  sections?: FormSection[];
+  data?: DataSource; // Optional data source configuration
+}
+```
+
+### FormSection
+
+Defines a section of the form with its own layout.
+
+```typescript
+interface FormSection {
+  label?: string;
+  collapsible?: boolean;
+  collapsed?: boolean;
+  columns: 1 | 2 | 3 | 4;
+  fields: (string | FormField)[];
+}
+```
+
+### FormField
+
+Defines individual form fields.
+
+```typescript
+interface FormField {
+  field: string; // Field name
+  label?: string;
+  placeholder?: string;
+  helpText?: string;
+  readonly?: boolean;
+  required?: boolean;
+  hidden?: boolean;
+  colSpan?: number; // Number of columns to span (1-4)
+  widget?: string; // Widget type (text, number, checkbox, etc.)
+  dependsOn?: string; // Field dependency
+  visibleOn?: string; // Visibility condition
+}
+```
+
+## Supported Widget Types
+
+The `FieldFactory` component supports the following widget types:
+
+- `text`, `string` - Text input
+- `email` - Email input
+- `password` - Password input
+- `url` - URL input
+- `tel` - Telephone input
+- `number`, `integer`, `float` - Number input
+- `checkbox`, `boolean` - Checkbox
+- `textarea` - Textarea
+- `select`, `dropdown` - Select dropdown
+- `date` - Date picker
+- `datetime`, `datetime-local` - DateTime picker
+- `time` - Time picker
+
+## Examples
+
+### Multi-Section Form
+
+```tsx
+const schema: FormView = {
+  type: 'simple',
+  sections: [
+    {
+      label: 'Personal Information',
+      collapsible: true,
+      collapsed: false,
+      columns: 2,
+      fields: [
+        { field: 'firstName', label: 'First Name', required: true, widget: 'text' },
+        { field: 'lastName', label: 'Last Name', required: true, widget: 'text' },
+        { field: 'email', label: 'Email', required: true, widget: 'email' },
+        { field: 'phone', label: 'Phone', widget: 'tel' },
+      ],
+    },
+    {
+      label: 'Preferences',
+      collapsible: true,
+      collapsed: true,
+      columns: 1,
+      fields: [
+        {
+          field: 'newsletter',
+          label: 'Subscribe to newsletter',
+          widget: 'checkbox',
+          helpText: 'Receive updates about our products',
+        },
+      ],
+    },
+  ],
+};
+```
+
+### Form with Initial Data
+
+```tsx
+const initialData = {
+  firstName: 'John',
+  lastName: 'Doe',
+  email: 'john@example.com',
+  newsletter: true,
+};
+
+<FormRenderer
+  schema={schema}
+  data={initialData}
+  onSubmit={handleSubmit}
+/>
+```
+
+### Form with Column Spanning
+
+```tsx
+const schema: FormView = {
+  type: 'simple',
+  sections: [
+    {
+      label: 'Contact',
+      columns: 2,
+      fields: [
+        { field: 'name', label: 'Name', widget: 'text' },
+        { field: 'email', label: 'Email', widget: 'email' },
+        {
+          field: 'message',
+          label: 'Message',
+          widget: 'textarea',
+          colSpan: 2, // Spans both columns
+        },
+      ],
+    },
+  ],
+};
+```
+
+## Architecture
+
+The FormRenderer is built on top of:
+
+- **react-hook-form**: For form state management and validation
+- **zod**: For schema validation
+- **@objectstack/spec**: For schema definitions
+
+## Customization
+
+You can customize the appearance of the form by:
+
+1. Using the `className` prop on the FormRenderer
+2. Using Tailwind CSS classes in your application
+3. Extending the FieldFactory component for custom widgets
+
+## Related Components
+
+- `FieldFactory`: Renders individual form fields based on widget type
+- `SchemaRenderer`: General-purpose schema renderer for ObjectUI
+
+## License
+
+MIT
+
+## Contributing
+
+Contributions are welcome! Please read the [CONTRIBUTING.md](../../CONTRIBUTING.md) for details.
diff --git a/packages/types/examples/form-renderer-example.ts b/packages/types/examples/form-renderer-example.ts
new file mode 100644
index 000000000..acb7530b6
--- /dev/null
+++ b/packages/types/examples/form-renderer-example.ts
@@ -0,0 +1,189 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * Example: FormRenderer Usage
+ * 
+ * This example demonstrates how to use the FormRenderer component
+ * with @objectstack/spec FormView schema.
+ */
+
+import type { FormView } from '@objectstack/spec/ui';
+
+/**
+ * Simple contact form example
+ */
+export const contactFormSchema: FormView = {
+  type: 'simple',
+  sections: [
+    {
+      label: 'Contact Information',
+      collapsible: false,
+      collapsed: false,
+      columns: 2,
+      fields: [
+        {
+          field: 'firstName',
+          label: 'First Name',
+          placeholder: 'John',
+          required: true,
+          widget: 'text',
+        },
+        {
+          field: 'lastName',
+          label: 'Last Name',
+          placeholder: 'Doe',
+          required: true,
+          widget: 'text',
+        },
+        {
+          field: 'email',
+          label: 'Email Address',
+          placeholder: 'john.doe@example.com',
+          required: true,
+          widget: 'email',
+          helpText: 'We will never share your email',
+        },
+        {
+          field: 'phone',
+          label: 'Phone Number',
+          placeholder: '+1 (555) 123-4567',
+          widget: 'tel',
+        },
+        {
+          field: 'message',
+          label: 'Message',
+          placeholder: 'Your message here...',
+          required: true,
+          widget: 'textarea',
+          colSpan: 2, // Span across both columns
+        },
+        {
+          field: 'newsletter',
+          label: 'Subscribe to newsletter',
+          widget: 'checkbox',
+          helpText: 'Get updates about our products',
+        },
+      ],
+    },
+  ],
+};
+
+/**
+ * User profile form with multiple sections
+ */
+export const userProfileSchema: FormView = {
+  type: 'simple',
+  sections: [
+    {
+      label: 'Personal Details',
+      collapsible: true,
+      collapsed: false,
+      columns: 2,
+      fields: [
+        {
+          field: 'username',
+          label: 'Username',
+          placeholder: 'johndoe',
+          required: true,
+          widget: 'text',
+        },
+        {
+          field: 'age',
+          label: 'Age',
+          placeholder: '25',
+          widget: 'number',
+        },
+        {
+          field: 'birthdate',
+          label: 'Date of Birth',
+          widget: 'date',
+        },
+        {
+          field: 'bio',
+          label: 'Biography',
+          placeholder: 'Tell us about yourself...',
+          widget: 'textarea',
+          colSpan: 2,
+        },
+      ],
+    },
+    {
+      label: 'Account Settings',
+      collapsible: true,
+      collapsed: true,
+      columns: 1,
+      fields: [
+        {
+          field: 'emailNotifications',
+          label: 'Email Notifications',
+          widget: 'checkbox',
+          helpText: 'Receive notifications via email',
+        },
+        {
+          field: 'twoFactorAuth',
+          label: 'Enable Two-Factor Authentication',
+          widget: 'checkbox',
+          helpText: 'Add an extra layer of security',
+        },
+      ],
+    },
+  ],
+};
+
+/**
+ * Example usage in a React component:
+ * 
+ * ```tsx
+ * import { FormRenderer } from '@object-ui/react';
+ * import { contactFormSchema } from './examples/form-renderer-example';
+ * 
+ * function ContactPage() {
+ *   const handleSubmit = (data: Record<string, any>) => {
+ *     console.log('Form submitted:', data);
+ *     // Handle form submission
+ *   };
+ * 
+ *   const handleChange = (data: Record<string, any>) => {
+ *     console.log('Form changed:', data);
+ *     // Handle form changes
+ *   };
+ * 
+ *   return (
+ *     <div className="container mx-auto p-4">
+ *       <h1>Contact Us</h1>
+ *       <FormRenderer
+ *         schema={contactFormSchema}
+ *         onSubmit={handleSubmit}
+ *         onChange={handleChange}
+ *       />
+ *     </div>
+ *   );
+ * }
+ * ```
+ * 
+ * With initial data:
+ * ```tsx
+ * function EditProfilePage() {
+ *   const initialData = {
+ *     username: 'johndoe',
+ *     age: 25,
+ *     bio: 'Software developer',
+ *     emailNotifications: true,
+ *   };
+ * 
+ *   return (
+ *     <FormRenderer
+ *       schema={userProfileSchema}
+ *       data={initialData}
+ *       onSubmit={(data) => console.log('Updated:', data)}
+ *     />
+ *   );
+ * }
+ * ```
+ */

From d71affb8232a6a5ddd2775d5835f1e191e573417 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 24 Jan 2026 07:05:31 +0000
Subject: [PATCH 4/6] refactor: Address code review feedback - remove unused
 imports and document limitations

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

diff --git a/packages/react/src/components/form/FieldFactory.tsx b/packages/react/src/components/form/FieldFactory.tsx
index b39dcec38..ae5f5cd10 100644
--- a/packages/react/src/components/form/FieldFactory.tsx
+++ b/packages/react/src/components/form/FieldFactory.tsx
@@ -42,21 +42,18 @@ export const FieldFactory: React.FC<FieldFactoryProps> = ({
   const error = errors[fieldName];
 
   // Handle conditional visibility
+  // Note: visibleOn expression evaluation is not yet implemented
+  // Fields are always visible unless explicitly hidden
   const shouldShow = React.useMemo(() => {
-    if (field.visibleOn) {
-      // Evaluate visibility expression
-      // For now, simple implementation - can be enhanced
-      try {
-        const formData = watch();
-        // Simple expression evaluation: "fieldName == 'value'"
-        // This is a placeholder - real implementation would use a proper expression evaluator
-        return true;
-      } catch (e) {
-        return true;
-      }
+    // Skip if explicitly hidden
+    if (field.hidden) {
+      return false;
     }
+    
+    // TODO: Implement expression evaluation for visibleOn
+    // For now, all non-hidden fields are visible
     return true;
-  }, [field.visibleOn, watch]);
+  }, [field.hidden]);
 
   if (!shouldShow) {
     return null;
@@ -164,7 +161,9 @@ export const FieldFactory: React.FC<FieldFactoryProps> = ({
 
     case 'select':
     case 'dropdown':
-      // For select, we'd need options - this is a basic implementation
+      // 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}
@@ -175,7 +174,7 @@ export const FieldFactory: React.FC<FieldFactoryProps> = ({
           })}
         >
           <option value="">{field.placeholder || 'Select an option'}</option>
-          {/* Options would be populated from field configuration */}
+          {/* TODO: Add options support - requires extending FormField schema or external options provider */}
         </select>
       );
 
diff --git a/packages/react/src/components/form/FormRenderer.tsx b/packages/react/src/components/form/FormRenderer.tsx
index 315d001e4..a70cf8e6b 100644
--- a/packages/react/src/components/form/FormRenderer.tsx
+++ b/packages/react/src/components/form/FormRenderer.tsx
@@ -8,9 +8,7 @@
 
 import React from 'react';
 import { useForm, FormProvider, UseFormReturn } from 'react-hook-form';
-import { zodResolver } from '@hookform/resolvers/zod';
 import type { FormView, FormSection } from '@objectstack/spec/ui';
-import { z } from 'zod';
 import { FieldFactory } from './FieldFactory';
 
 export interface FormRendererProps {
diff --git a/packages/react/src/components/form/README.md b/packages/react/src/components/form/README.md
index 890595200..490f89014 100644
--- a/packages/react/src/components/form/README.md
+++ b/packages/react/src/components/form/README.md
@@ -154,11 +154,21 @@ The `FieldFactory` component supports the following widget types:
 - `number`, `integer`, `float` - Number input
 - `checkbox`, `boolean` - Checkbox
 - `textarea` - Textarea
-- `select`, `dropdown` - Select dropdown
+- `select`, `dropdown` - Select dropdown (basic implementation, options support planned)
 - `date` - Date picker
 - `datetime`, `datetime-local` - DateTime picker
 - `time` - Time picker
 
+## Known Limitations
+
+### Version 0.1.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.
+- **Validation**: While react-hook-form is integrated, advanced Zod schema validation is not yet implemented. Only basic required field validation is supported.
+
+These features are planned for future releases.
+
 ## Examples
 
 ### Multi-Section Form

From 90a9a56802768f6f47f31b3f3f0d1ecfb72c4fc1 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 24 Jan 2026 07:09:18 +0000
Subject: [PATCH 5/6] perf: Optimize component performance - move constants
 outside render and remove unused code

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
---
 .../src/components/form/FieldFactory.tsx      | 16 ++--------
 .../src/components/form/FormRenderer.tsx      | 30 +++++++++++--------
 packages/react/src/components/form/README.md  |  2 +-
 3 files changed, 22 insertions(+), 26 deletions(-)

diff --git a/packages/react/src/components/form/FieldFactory.tsx b/packages/react/src/components/form/FieldFactory.tsx
index ae5f5cd10..10003262f 100644
--- a/packages/react/src/components/form/FieldFactory.tsx
+++ b/packages/react/src/components/form/FieldFactory.tsx
@@ -34,7 +34,7 @@ export const FieldFactory: React.FC<FieldFactoryProps> = ({
   methods,
   disabled = false,
 }) => {
-  const { register, formState: { errors }, watch } = methods;
+  const { register, formState: { errors } } = methods;
   
   // Determine the widget type
   const widgetType = field.widget || 'text';
@@ -44,18 +44,8 @@ export const FieldFactory: React.FC<FieldFactoryProps> = ({
   // Handle conditional visibility
   // Note: visibleOn expression evaluation is not yet implemented
   // Fields are always visible unless explicitly hidden
-  const shouldShow = React.useMemo(() => {
-    // Skip if explicitly hidden
-    if (field.hidden) {
-      return false;
-    }
-    
-    // TODO: Implement expression evaluation for visibleOn
-    // For now, all non-hidden fields are visible
-    return true;
-  }, [field.hidden]);
-
-  if (!shouldShow) {
+  // Skip if explicitly hidden
+  if (field.hidden) {
     return null;
   }
 
diff --git a/packages/react/src/components/form/FormRenderer.tsx b/packages/react/src/components/form/FormRenderer.tsx
index a70cf8e6b..d84a0cbf2 100644
--- a/packages/react/src/components/form/FormRenderer.tsx
+++ b/packages/react/src/components/form/FormRenderer.tsx
@@ -121,6 +121,22 @@ interface FormSectionRendererProps {
   disabled?: boolean;
 }
 
+// Grid column classes for different column counts
+const GRID_COLS = {
+  1: 'grid-cols-1',
+  2: 'grid-cols-1 md:grid-cols-2',
+  3: 'grid-cols-1 md:grid-cols-3',
+  4: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4',
+} as const;
+
+// Column span classes
+const COL_SPAN = {
+  1: 'col-span-1',
+  2: 'col-span-2',
+  3: 'col-span-3',
+  4: 'col-span-4',
+} as const;
+
 /**
  * Renders a form section with grid layout
  */
@@ -132,12 +148,7 @@ const FormSectionRenderer: React.FC<FormSectionRendererProps> = ({
   const [isCollapsed, setIsCollapsed] = React.useState(section.collapsed || false);
 
   // Determine grid columns based on section.columns
-  const gridCols = {
-    1: 'grid-cols-1',
-    2: 'grid-cols-1 md:grid-cols-2',
-    3: 'grid-cols-1 md:grid-cols-3',
-    4: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4',
-  }[section.columns || 1];
+  const gridCols = GRID_COLS[section.columns || 1];
 
   const handleToggleCollapse = () => {
     if (section.collapsible) {
@@ -177,12 +188,7 @@ const FormSectionRenderer: React.FC<FormSectionRendererProps> = ({
 
             // Calculate colSpan for grid
             const colSpan = fieldConfig.colSpan || 1;
-            const colSpanClass = {
-              1: 'col-span-1',
-              2: 'col-span-2',
-              3: 'col-span-3',
-              4: 'col-span-4',
-            }[Math.min(colSpan, section.columns || 1)];
+            const colSpanClass = COL_SPAN[Math.min(colSpan, section.columns || 1) as keyof typeof COL_SPAN];
 
             return (
               <div key={`${fieldName}-${index}`} className={colSpanClass}>
diff --git a/packages/react/src/components/form/README.md b/packages/react/src/components/form/README.md
index 490f89014..61855773c 100644
--- a/packages/react/src/components/form/README.md
+++ b/packages/react/src/components/form/README.md
@@ -9,7 +9,7 @@ The `FormRenderer` component is a React component that renders forms based on th
 - ✅ **Collapsible sections**: Organize forms with collapsible sections
 - ✅ **Field validation**: Built-in validation using `react-hook-form` and `zod`
 - ✅ **Multiple field types**: Text, Number, Checkbox, Textarea, Select, Date, DateTime, Time
-- ✅ **Conditional fields**: Show/hide fields based on conditions
+- ⏳ **Conditional fields**: Show/hide fields based on conditions (planned)
 - ✅ **Column spanning**: Fields can span multiple columns
 - ✅ **Help text**: Display helpful descriptions for fields
 - ✅ **Required fields**: Mark fields as required with validation

From 4a0e82dc4c7042aa9e97058e3e2d0c6b7393d937 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 24 Jan 2026 07:11:20 +0000
Subject: [PATCH 6/6] chore: Remove unused dependencies and update
 documentation

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
---
 packages/react/package.json                  |  4 +---
 packages/react/src/components/form/README.md | 10 +++++-----
 pnpm-lock.yaml                               | 15 ---------------
 3 files changed, 6 insertions(+), 23 deletions(-)

diff --git a/packages/react/package.json b/packages/react/package.json
index ac502019c..75e314488 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -23,9 +23,7 @@
   "dependencies": {
     "@object-ui/core": "workspace:*",
     "@objectstack/spec": "^0.3.2",
-    "react-hook-form": "^7.71.1",
-    "zod": "^3.22.4",
-    "@hookform/resolvers": "^3.9.1"
+    "react-hook-form": "^7.71.1"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
diff --git a/packages/react/src/components/form/README.md b/packages/react/src/components/form/README.md
index 61855773c..c4fbe158c 100644
--- a/packages/react/src/components/form/README.md
+++ b/packages/react/src/components/form/README.md
@@ -7,9 +7,10 @@ The `FormRenderer` component is a React component that renders forms based on th
 - ✅ **Schema-driven**: Define forms using JSON schema from `@objectstack/spec`
 - ✅ **Multi-column layouts**: Support for 1-4 column grid layouts
 - ✅ **Collapsible sections**: Organize forms with collapsible sections
-- ✅ **Field validation**: Built-in validation using `react-hook-form` and `zod`
+- ✅ **Form state management**: Built-in state management using `react-hook-form`
 - ✅ **Multiple field types**: Text, Number, Checkbox, Textarea, Select, Date, DateTime, Time
 - ⏳ **Conditional fields**: Show/hide fields based on conditions (planned)
+- ⏳ **Schema validation**: Zod validation support (planned)
 - ✅ **Column spanning**: Fields can span multiple columns
 - ✅ **Help text**: Display helpful descriptions for fields
 - ✅ **Required fields**: Mark fields as required with validation
@@ -19,13 +20,13 @@ The `FormRenderer` component is a React component that renders forms based on th
 The FormRenderer component is part of the `@object-ui/react` package:
 
 ```bash
-npm install @object-ui/react @objectstack/spec react-hook-form zod
+npm install @object-ui/react @objectstack/spec react-hook-form
 ```
 
 Or with pnpm:
 
 ```bash
-pnpm add @object-ui/react @objectstack/spec react-hook-form zod
+pnpm add @object-ui/react @objectstack/spec react-hook-form
 ```
 
 ## Basic Usage
@@ -165,7 +166,7 @@ The `FieldFactory` component supports the following widget types:
 
 - **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.
-- **Validation**: While react-hook-form is integrated, advanced Zod schema validation is not yet implemented. Only basic required field validation is supported.
+- **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.
 
@@ -253,7 +254,6 @@ const schema: FormView = {
 The FormRenderer is built on top of:
 
 - **react-hook-form**: For form state management and validation
-- **zod**: For schema validation
 - **@objectstack/spec**: For schema definitions
 
 ## Customization
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 08361b34e..ce6f14760 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -727,9 +727,6 @@ importers:
 
   packages/react:
     dependencies:
-      '@hookform/resolvers':
-        specifier: ^3.9.1
-        version: 3.10.0(react-hook-form@7.71.1(react@19.2.3))
       '@object-ui/core':
         specifier: workspace:*
         version: link:../core
@@ -745,9 +742,6 @@ importers:
       react-hook-form:
         specifier: ^7.71.1
         version: 7.71.1(react@19.2.3)
-      zod:
-        specifier: ^3.22.4
-        version: 3.25.76
     devDependencies:
       '@types/react':
         specifier: 19.0.6
@@ -1570,11 +1564,6 @@ packages:
       tailwindcss:
         optional: true
 
-  '@hookform/resolvers@3.10.0':
-    resolution: {integrity: sha512-79Dv+3mDF7i+2ajj7SkypSKHhl1cbln1OGavqrsF7p6mbUv11xpqpacPsGDCTRvCSjEEIez2ef1NveSVL3b0Ag==}
-    peerDependencies:
-      react-hook-form: ^7.0.0
-
   '@humanfs/core@0.19.1':
     resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
     engines: {node: '>=18.18.0'}
@@ -7057,10 +7046,6 @@ snapshots:
       next: 16.1.4(@babel/core@7.28.6)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       tailwindcss: 4.1.18
 
-  '@hookform/resolvers@3.10.0(react-hook-form@7.71.1(react@19.2.3))':
-    dependencies:
-      react-hook-form: 7.71.1(react@19.2.3)
-
   '@humanfs/core@0.19.1': {}
 
   '@humanfs/node@0.16.7':