React Form Library Drag and Drop.







- Full Documentation
- FAQ
- Guides
Install the core package and RSuite free form components:
``bash`
npm install @react-form-builder/core @react-form-builder/components-rsuite
Install drag-and-drop Form Builder, built on top of the free, MIT-licensed FormEngine Core.
`bash`
npm install @react-form-builder/designer





- Email Support β Best for: issues with Formengine libraries or environment.
- Community Forum β Best for:
help with building, discussion about React form best practices.
- GitHub Issues β Best for: bugs
and errors you encounter using Formengine.
- Community: Formengine Core source code and examples for FormEngine Community (MIT license).
- Premium: Examples for Premium On-Premise Drag-and-Drop React Form Builder (Commercial license). Premium On-Premise Drag-and-Drop React
Form Builder
- Formengine Core Source Code
- Works out of the box with - Next.js.
- Fully supports - Remix.
- Built-in Validation with Zod β Pre-configured validation powered by Zod
- Extensible Validation Support β Works with Yup, AJV, Zod, Superstruct, Joi, and other libraries
`bash`
npm install @react-form-builder/components-rsuite

Component description consists of defining meta-information about the component - component name, component type, component properties.
Meta-information on component properties in Formengine is called an annotation.
Well, let's describe some existing component from the popular MUI library. As an example, let's take a Button:
#### Example of a custom component definition
`tsx
import {Button} from '@mui/material'
import {define, disabled, event, oneOf, string} from '@react-form-builder/core'
// Let's call our component matButton, using the prefix 'mat' to make it easy to understand
// from the name that the component belongs to the MUI library.
//
// Here we call the define function and pass it two parameters - the Button component
// and the unique name of the component type.
export const matButton = define(Button, 'MatButton')
// component name displayed in the component panel in the designer
.name('Button')
// define the component properties that we want to edit in the designer
.props({
// button text
children: string.named('Caption').default('Button'),
// button color
color: oneOf('inherit', 'primary', 'secondary', 'success', 'error', 'info', 'warning'),
// button disable flag
disabled: disabled,
// callback fired when the button is clicked.
onClick: event,
})
``
#### Formengine β Youβre not alone. Forms shouldnβt be this hard!





