syncfusion-react-form-builder

Syncfusion React Form Builder

Use this skill when a user needs to create, troubleshoot, or extend an editable React form with the Syncfusion Form Builder. The Form Builder is a visual designer that produces a schema-driven form definition: users can drag fields onto a canvas, configure them in the property panel, preview the result, and export the schema for use with Form Renderer.

When to use this skill

Use this skill when the user needs to:

• create a Vite React app and install the Syncfusion Form Builder package
• render a visual form designer with a toolbox, canvas, property panel, code view, and preview
• load an initial form through the schema property
• define fields in properties, arrange them in layout, and set form-wide settings
• configure Form Builder properties such as export, preview, persistence, RTL, mode, templates, and toolbox items
• choose fields from Basic, Advanced, and Layout toolbox categories
• customize field properties, add or hide property-panel entries, and refresh the designer
• define custom toolbox templates and synchronize template values with setFieldValue
• handle field drag-start, drag-over, drop, and property-changed events
• review, copy, import, or export a generated JSON schema
• prepare schemas containing validation, conditions, expressions, dependent dropdowns, dynamic ranges, remote data, or Data Grid fields

This skill is for designing and editing forms. Use the React Form Renderer skill when the primary task is rendering a finished schema for end users, handling submitted values, or configuring renderer form actions.

Documentation and Navigation Guide

Component API and Events

📄 Read: references/getting-started.md

• All Form Builder properties, types, and defaults
• Simple and Developer modes
• schema, export, preview, persistence, RTL, templates, and toolbox configuration

Getting Started

📄 Read: references/getting-started.md

• Vite and React setup with CSS theme imports
• Basic Form Builder usage
• Binding the form schema to the component
• Minimal working example for authoring a form

Schema and Initial Form Setup

📄 Read first: references/form-schema.md

• The schema property and root schema structure
• Field definitions in properties and rendering order in layout
• Form settings, supported widgets, and layout containers
• Matching each requested field to its documented widget and type

When a customer asks for a React Form Builder with an initial form, create the Vite and React component setup from references/getting-started.md, then define the initial schema using references/form-schema.md. Read the following references when the requested schema needs the corresponding behavior:

• Validation rules: references/validations.md
• Conditional behavior: references/conditions.md
• Calculated values: references/expressions.md
• Dependent dropdowns: references/dependent-dropdown.md
• Dynamic numeric/date/time bounds: references/min-max-range.md
• Remote dropdown, multiselect, or checkbox-group data: references/remote-data-binding-in-components.md
• Data Grid fields and data sources: references/data-grid-features.md

Field Components Panel

📄 Read: references/field-components-panel.md

• Fields and Templates tabs
• Basic, Advanced, and Layout categories
• Search/filter behavior and toolbox customizations
• Custom template libraries and formTemplates

Property Panel

📄 Read: references/property-panel.md

• When the panel appears for selected fields
• Display, Validation, Conditions, Layout, and Data tabs
• setProperty and getProperty patterns
• Auto-save and property refresh behaviors

Preview and JSON

📄 Read: references/preview-tab.md

• Preview tab workflow
• Disabling preview with enablePreview
• JSON schema review and copy actions

Templates

📄 Read: references/templates.md

• Defining custom toolbox templates with toolboxItems
• Using templateId during export
• Mapping third-party components to the schema

Form Settings

📄 Read: references/form-settings.md

• Global form title and width
• Layout-level settings like Hide Label, Size, and Float Label Type
• Applying form-wide configuration without affecting individual fields

Export and Import

📄 Read: references/export-import.md

• Exporting the schema for Form Renderer reuse
• Importing an existing schema back into Form Builder
• Disabling export with allowExport

Quick Start

1. Install the package:

npm install @syncfusion/ej2-react-form-builder @syncfusion/ej2-material3-theme

1. Import the component and bind an initial schema:

import { FormBuilderComponent } from '@syncfusion/ej2-react-form-builder';
import '@syncfusion/ej2-material3-theme/styles/material3.css';

const formSchema = {
  version: '0.1.0',
  properties: {
    emailAddress: {
      id: 'textbox_1785491685456_167',
      name: 'emailAddress',
      type: 'string',
      label: 'Email Address',
      textboxType: 'email',
      required: true,
      placeholder: 'Enter your email',
      widget: 'textbox'
    }
  },
  layout: [{ type: 'field', propertyId: 'emailAddress' }],
  settings: { name: 'Untitled Form' }
};

export default function App() {
  return <FormBuilderComponent schema={formSchema} />;
}

1. Start the Vite application with npm run dev, then use the toolbox and property panel to edit the form. Read references/getting-started.md for project creation, theme setup, and the complete initial setup.

Common Patterns

Customizing the toolbox

Use toolboxCategories to control which field types appear in the toolbox and in which category they are grouped.

import { FormBuilderComponent } from '@syncfusion/ej2-react-form-builder';
import { ComponentCategory, FormWidgetType } from '@syncfusion/ej2-form-builder';

const toolboxCategories = [
  {
    category: ComponentCategory.Basic,
    items: [FormWidgetType.Textbox, FormWidgetType.Textarea]
  },
  {
    category: ComponentCategory.Advanced,
    items: [FormWidgetType.Date, FormWidgetType.DateRange]
  }
];

Adding a property dynamically

Use setProperty to add a custom property to a widget and refresh() to update the panel.

formBuilderRef.current?.setProperty(FormWidgetType.Textarea, {
  key: 'enableRtl',
  label: 'Enable RTL',
  type: 'boolean',
  default: false
});

Registering a custom template

Define a third-party custom control in toolboxItems and call setFieldValue when the value changes.

<FormBuilderComponent
  toolboxItems={[{ type: FormWidgetType.Textbox, template: inputTemplate }]}
/>;

Using preview and JSON output

Switch to the Preview tab to validate layout and interactions, then open the JSON tab to inspect the exported schema and copy it for use in Form Renderer.

Common patterns

• Keep every field in properties and reference it from layout using its propertyId.
• Give each field a stable unique name and id; use the documented id and name references for conditions, expressions, and dependent data.
• Match each requested field's widget and type to the supported schema inventory in references/form-schema.md.
• Use toolboxCategories or toolboxItems to control the fields available in the visual toolbox.
• Use formTemplates for reusable complete schemas and custom toolbox templates for third-party controls.
• Validate the form in Preview, inspect the JSON tab, and export only after the schema and layout are correct.
• Use the API event payloads for designer interaction state; use Form Renderer events for runtime values and submission behavior.

Implementation checklist

When building or fixing a Form Builder form, confirm:

• the React package and theme are installed and FormBuilderComponent is imported
• the schema value is an object, JSON string, or supported schema instance
• every field has a unique name, stable id, supported widget, and matching type
• every layout field node references a valid propertyId
• layout containers remain in layout, while their child fields remain in properties
• validation, conditions, expressions, ranges, and data sources use the documented reference shape
• custom templates update Form Builder state with setFieldValue
• preview and export are enabled or disabled according to the requested workflow
• custom component refs use the documented React useRef pattern

Typical workflows

• Start by creating the base schema and loading it into the builder.
• Use toolbox categories and predefined templates to structure the form design.
• Edit field properties in the right pane for validation, layout, and display behavior.
• Validate the final form in Preview before exporting the schema.
• Reimport the schema later to continue editing or adjust a generated form.