Overview

The @react-form-builder/components-material-ui package provides a comprehensive set of Material UI components for use with FormEngine. Build beautiful, accessible forms using MUI's comprehensive component library with full theming support.

Installation

Install the package along with FormEngine Core and MUI dependencies:

npm install @react-form-builder/core @mui/material @emotion/react @emotion/styled @react-form-builder/components-material-ui

Basic Usage

Here's an example of how to set up FormEngine with Material UI components:

import {buildForm} from '@react-form-builder/core'
import {FormBuilder} from '@react-form-builder/designer'
import {builderView} from '@react-form-builder/components-material-ui'

const simpleForm = buildForm({errorType: 'MuiErrorWrapper'})
  .component('firstName', 'MuiTextField')
  .prop('placeholder', 'Enter your first name')
  .prop('label', 'First Name')
  .validation('required')

  .component('lastName', 'MuiTextField')
  .prop('placeholder', 'Enter your last name')
  .prop('label', 'Last Name')
  .validation('required')

  .component('submit', 'MuiButton')
  .prop('children', 'Submit')
  .prop('color', 'primary')
  .prop('variant', 'contained')
  .event('onClick')
  .commonAction('validate').args({failOnError: true})
  .customAction('onSubmit')
  .json()

export const BuilderApp = () => {
  return <FormBuilder
    view={builderView}
    getForm={() => simpleForm}
    actions={{
      onSubmit: (e) => {
        // submit the form to the backend
        alert('Form data: ' + JSON.stringify(e.data))
      },
    }}
  />
}