# EJ2 React Form Renderer

The `@syncfusion/ej2-react-form-renderer` package is a powerful React component for rendering dynamic, JSON-driven forms using Syncfusion's Essential® Studio React components.

## Key Features

- **JSON-Driven Forms**: Render forms from JSON schemas (FormSchema, DataSchema, or UISchema)
- **20+ Field Types**: Support for textbox, textarea, number, dropdown, datepicker, checkbox, radio, switch, and more
- **Advanced Layouts**: Panels, tables, tabs for complex form structures
- **Validation**: Built-in validation with Syncfusion FormValidator
- **Theming**: Support for all Syncfusion themes (Material, Bootstrap, Fluent, Tailwind, etc.)
- **Accessibility**: WCAG 2.1 AA compliant
- **TypeScript Support**: Full type definitions included

## Installation

To install `@syncfusion/ej2-react-form-renderer` and its dependencies, run:

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

## Usage

### Basic Example

```tsx
import React from 'react';
import { FormRenderer } from '@syncfusion/ej2-react-form-renderer';
import '@syncfusion/ej2-react-form-renderer/styles/tailwind3.css'; // Choose your theme

const schema = {
  "version": "1.0.0-beta",
  "properties": {
    "firstName": {
      "id": "textbox_1773902761966_849",
      "type": "string",
      "label": "First Name",
      "required": true
    },
    "lastName": {
      "id": "textbox_1773902782931_266",
      "type": "string",
      "label": "Last Name",
      "required": true
    },
    "age": {
      "id": "number_1773902793792_571",
      "type": "number",
      "label": "Age",
      "required": true
    },
    "dateOfBirth": {
      "id": "datepicker_1773902807416_662",
      "type": "string",
      "format": "date",
      "label": "Date of Birth",
      "required": true
    },
    "submit": {
      "id": "submit_button_initial",
      "type": "button",
      "label": "Submit",
      "buttonType": "submit"
    }
  }
};

function App() {
  const handleSubmit = (args) => {
    console.log('Form submitted:', args.data);
    console.log('Is valid:', args.isValid);
  };

  const handleChange = (args) => {
    console.log('Field changed:', args.field, args.value);
  };

  return (
    <FormRenderer
      schema={schema}
      onSubmit={handleSubmit}
      onChange={handleChange}
    />
  );
}

export default App;
```

## Supported Field Types

- Basic inputs: `textbox`, `textarea`, `number`, `inputmask`
- Selection controls: `dropdown`, `multiselect`, `radio`, `checkbox`, `checkboxgroup`
- Date/time: `datepicker`, `datetimepicker`, `timepicker`, `daterange`
- Rich inputs: `switch` (toggle), `colorpicker`, `rating`, `signature`, `imageeditor`, `richtexteditor`, `fileupload`, `rangeslider`
- Layout & containers: `panel` (section), `table` (cells), `tabs`, `card`, `message` (alert), `statichtml`
- Data display / complex controls: `datagrid` (embedded grid)
- Buttons: `button`, `splitbutton` and grouped button configurations (`buttonsGroups`)


## API Reference

### FormRenderer Props

| Prop | Type | Description |
|------|------|-------------|
| `schema` | `Schema \| FormSchema \| string` | Form schema (JSON or object) |
| `layout` | `'single' \| 'twocolumn' \| 'threecolumn' \| 'fourcolumn'` | Form layout (when no UI schema) |
| `onSubmit` | `(args: SubmitEventArgs) => void` | Submit handler |
| `onChange` | `(args: ChangeEventArgs) => void` | Field change handler |
| `onButtonClick` | `(args: ButtonClickEventArgs) => void` | Button click handler |
| `created` | `() => void` | Called when form is ready |
| `className` | `string` | Additional CSS classes |

### FormLayout

```tsx
export const FormLayout = {
  SingleColumn: 'single',
  TwoColumn: 'twocolumn',
  ThreeColumn: 'threecolumn',
  FourColumn: 'fourcolumn'
} as const;
```


## Support

Product support is available through the following channels:

- [Support Ticket](https://support.syncfusion.com/support/tickets/create) - Guaranteed response in 24 hours
- [Community Forum](https://www.syncfusion.com/forums)

## License and Copyright

> This is a commercial product and requires a paid license for possession or use. Syncfusion's licensed software, including this component, is subject to the terms and conditions of Syncfusion's [EULA](https://www.syncfusion.com/eula/es/). To acquire a license for React UI components, you can [purchase](https://www.syncfusion.com/sales/products) or [start a free 30-day trial](https://www.syncfusion.com/account/manage-trials/start-trials).

> A [free community license](https://www.syncfusion.com/products/communitylicense) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.

© Copyright 2026 Syncfusion®, Inc. All Rights Reserved. The Syncfusion® Essential® Studio license and copyright applies to this distribution.