Implementation:Infiniflow Ragflow DynamicForm Component

Knowledge Sources	Infiniflow_Ragflow
Domains	Frontend, UI_Components, Form_System
Last Updated	2026-02-12 06:00 GMT

Overview

Concrete form builder component with Zod validation, field dependencies, and dynamic rendering provided by the RAGFlow frontend.

Description

The DynamicForm compound component provides a complete dynamic form system. It includes DynamicForm.Root (form container with validation), DynamicForm.SavingButton (submit with loading state), and DynamicForm.CancelButton. The system supports 12 field types via FormFieldType enum, automatic Zod schema generation via generateSchema, field dependencies, and a ref-based imperative API (submit, getValues, reset, trigger, watch).

Usage

Import this component when building configuration forms, settings panels, or any form that needs to be generated from a field configuration array rather than hand-coded JSX.

Code Reference

Source Location

• Repository: Infiniflow_Ragflow
• File: web/src/components/dynamic-form.tsx
• Lines: 1-1021

Signature

export enum FormFieldType {
  Text, Email, Password, Number, Textarea, Select,
  MultiSelect, Checkbox, Switch, Tag, Segmented, Custom
}

export interface FormFieldConfig {
  name: string;
  type: FormFieldType;
  label: string;
  required?: boolean;
  options?: { value: string; label: string }[];
  dependencies?: { field: string; value: any }[];
  // ... additional config
}

export function generateSchema(fields: FormFieldConfig[]): ZodSchema<any>;

export const DynamicForm = {
  Root: forwardRef<DynamicFormRef, DynamicFormRootProps>(...),
  SavingButton: (props) => JSX.Element,
  CancelButton: (props) => JSX.Element,
};

Import

import { DynamicForm, generateSchema, FormFieldType } from '@/components/dynamic-form';

I/O Contract

Inputs

Name	Type	Required	Description
fields	FormFieldConfig[]	Yes	Array of field configurations
onSubmit	function	Yes	Callback with validated form values
defaultValues	Record	No	Initial form values

Outputs

Name	Type	Description
DynamicFormRef.submit()	Promise	Programmatically trigger form submission
DynamicFormRef.getValues()	Record	Get current form values
DynamicFormRef.reset()	void	Reset form to defaults

Usage Examples

import { DynamicForm, FormFieldType, generateSchema } from '@/components/dynamic-form';

const fields = [
  { name: 'name', type: FormFieldType.Text, label: 'Name', required: true },
  { name: 'model', type: FormFieldType.Select, label: 'Model', options: [...] },
];

function SettingsForm() {
  return (
    <DynamicForm.Root fields={fields} onSubmit={handleSubmit}>
      <DynamicForm.SavingButton />
    </DynamicForm.Root>
  );
}

Related Pages

• Environment:Infiniflow_Ragflow_Frontend_Node_Environment