Implementation:Infiniflow Ragflow RAGFlowFormItem Component

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

Overview

Concrete reusable form item wrapper integrating react-hook-form Controller with label, tooltip, and layout control provided by the RAGFlow frontend.

Description

The RAGFlowFormItem component wraps react-hook-form's Controller with a label/tooltip header and horizontal/vertical layout support. It accepts children as either a ReactNode or a render function receiving the Controller field props.

Usage

Import this component as the standard form field wrapper throughout the RAGFlow frontend to ensure consistent form field rendering with labels and validation.

Code Reference

Source Location

• Repository: Infiniflow_Ragflow
• File: web/src/components/ragflow-form.tsx
• Lines: 1-82

Signature

export function RAGFlowFormItem({
  name, label, tooltip, children,
  horizontal, required, labelClassName, className, rules,
}: {
  name: string;
  label?: ReactNode;
  tooltip?: ReactNode;
  children: ReactNode | ((field: ControllerRenderProps) => ReactNode);
  horizontal?: boolean;
  required?: boolean;
  labelClassName?: string;
  className?: string;
  rules?: UseControllerProps['rules'];
}): JSX.Element;

Import

import { RAGFlowFormItem } from '@/components/ragflow-form';

I/O Contract

Inputs

Name	Type	Required	Description
name	string	Yes	Form field name for react-hook-form binding
label	ReactNode	No	Field label
children	ReactNode/function	Yes	Field content or render function
horizontal	boolean	No	Use horizontal layout

Outputs

Name	Type	Description
Rendered JSX	JSX.Element	Form field with label and Controller

Usage Examples

import { RAGFlowFormItem } from '@/components/ragflow-form';
import { Input } from '@/components/ui/input';

<RAGFlowFormItem name="title" label="Title" required>
  <Input placeholder="Enter title" />
</RAGFlowFormItem>

<RAGFlowFormItem name="model" label="Model" tooltip="Select the LLM">
  {(field) => <Select {...field} options={modelOptions} />}
</RAGFlowFormItem>

Related Pages

• Environment:Infiniflow_Ragflow_Frontend_Node_Environment