syncfusion-react-form-renderer

Syncfusion React Form Renderer

Use this skill when a user needs to generate, troubleshoot, or extend a schema-driven React form with the Syncfusion Form Renderer component. The Form Renderer is built around a single JSON schema that declares field definitions, layout, validation, dynamic behavior, and submission actions.

When to use this skill

Use this skill when the user needs to:

• create a new React app and install the Syncfusion Form Renderer package
• define a form with properties, layout, and settings
• add required, pattern, minLength, maxLength, or custom validation rules
• show or hide fields based on previous answers
• build dependent dropdowns or cascaded option lists
• constrain numeric/date values from another field with minMaxRange
• calculate values with expressionValue and external references
• handle submit, reset, and custom button actions
• define grouped button actions with allowMultiple and buttonsGroups
• replace built-in widgets with custom React templates

Quick start

1. Install the React package:

npm install @syncfusion/ej2-react-form-renderer

2. Import the React component and schema type:

import { FormRendererComponent, type Schema } from '@syncfusion/ej2-react-form-renderer';

3. Define a schema and render it with the React component:

import { FormRendererComponent, type Schema } from '@syncfusion/ej2-react-form-renderer';

export default function App() {
  const schema: Schema = {
    version: '0.1.0',
    properties: {
      emailAddress: {
        id: 'textbox_1',
        name: 'emailAddress',
        type: 'string',
        label: 'Email Address',
        textboxType: 'email',
        required: true,
        widget: 'textbox'
      },
      submit: {
        id: 'submit_1',
        name: 'defaultSubmit',
        type: 'button',
        label: 'Submit',
        buttonType: 'submit',
        widget: 'button'
      }
    },
    layout: [
      { type: 'field', propertyId: 'emailAddress' },
      { type: 'field', propertyId: 'submit' }
    ],
    settings: { name: 'Registration Form' }
  };

  const onSubmit = (args: any) => {
    console.log(args.data, args.isValid);
  };

  return <FormRendererComponent schema={schema} submit={onSubmit} />;
}

Documentation and navigation guide

Getting started

Read references/getting-started.md

• Vite + React project setup and package installation
• CSS theme setup
• basic schema + submit example
• run the app locally with npm run dev

Form schema and field model

Read references/form-schema.md

• root object structure: version, properties, layout, settings
• all supported field widgets, their data types, and the UI interactions they provide
• per-field presentation options and choosing widgets to match customer preferences
• layout examples for panels, tables, tabs, and cards, including how container children reference fields
• field IDs, names, labels, types, and common metadata

Validation

Read references/validations.md

• built-in rules like required, minLength, maxLength, and pattern
• custom validation with customValidation and valid = ...
• when validation runs on submit versus change

Conditional behavior

Read references/conditions.md

• visibleWhen, hideWhen, requiredWhen, readOnlyWhen, disabledWhen
• rule schema, nested and / or groups, complete operator list, and each rule's effects
• component-by-component support matrix showing which condition types are supported or ignored
• setValueWhen and choiceBasedField configuration concepts

Dynamic expressions

Read references/expressions.md

• expressionValue for derived values from other fields
• field references, array indexes, grouping, ternary syntax, and arithmetic/comparison/logical operators
• constants including PI, TRUE, FALSE, NULL, and Math
• aggregate, math, string, and date functions, including DATEFORMAT, with syntax and return types

Dependent dropdowns

Read references/dependent-dropdown.md

• cascading options with choiceBasedField
• primaryFieldId and choiceMapping
• showAllWhenNotMapped behavior for missing values

Range logic based on other fields

Read references/min-max-range.md

• minMaxRange with field reference objects
• numeric and date range constraints driven by another field
• apply fixed min / max rules vs cross-field range rules

Remote data binding

Read references/remote-data-binding-in-components.md

• remote option sources for dropdown, multiselect, and checkbox group fields
• URL adaptors, response dataPath, request headers, and dynamic search/filter values
• search, sort, filter, skip, and take query configuration

Data grid features

Read references/data-grid-features.md

• static and remote grid data sources
• column editing, validation, custom validation, and expressions
• conditional data sources driven by other form fields
• grid search, sort, filter, and paging configuration

Form actions and templates

Read references/form-actions.md and references/templates.md

• buttonType: 'submit', 'reset', and 'button', plus grouped button actions
• submit / buttonClick behavior and custom logic
• submit, change, buttonClick, failure, and created events, including their arguments and lifecycle behavior
• allowMultiple and buttonsGroups item labels, actions, styles, icons, and disabled state
• custom widget templates using React customWidgetSettings by widget type, field name, or template ID
• all CustomWidgetSettingModel properties and HTML sanitizer behavior
• native or custom-component templates with a focusable control, bound value, and setFieldValue synchronization
• preserving the active input focus without forcing autofocus on render
• updating Form Renderer state from a custom field template

Common patterns

• Keep name values stable because they are used as payload keys and references in expressions.
• Use layout objects to organize fields in panels, tables, tabs, or cards.
• When a control depends on another field, prefer choiceBasedField for cascading dropdown lists and minMaxRange for dynamic min/max limits.
• Store validation and conditional logic next to the field they affect so the schema remains easy to reason about.
• Prefer buttonType: 'submit' for final validation and buttonType: 'button' when custom action logic is required.

Implementation checklist

When building or fixing a Form Renderer schema, confirm:

• every field has a unique name and id
• layout references valid propertyId values
• supported widgets match the field types
• conditional fields use valid field references and operators
• dynamic expressions reference existing field names with {name} syntax
• custom validation assigns valid = true or a string error message
• submit buttons are included when form submission is required

This skill is intended to help generate working React Form Renderer forms from the docs in this repository without inventing unsupported schema properties.