FormEngine is a React library that renders forms from JSON schemas. The @react-form-builder/components-material-ui package provides a free, MIT-licensed component set built on Material UI — if your app already uses MUI, this integration lets you render FormEngine forms with native MUI components and design tokens.
FormEngine ships three independent component sets — Material UI, Mantine, and React Suite — each with its own components and capabilities. See the Components Library overview for a side-by-side comparison. Installation
npm install @react-form-builder/components-material-ui
npm install @mui/material @emotion/react @emotion/styled
@mui/x-date-pickers is also required if you plan to use MuiDatePicker.
Available components
The package registers the following components with FormEngine. Each row links to the FormEngine component reference and to the corresponding MUI documentation.
| Component | Description | Material UI docs |
|---|
| MuiTextField | Text input for single or multi-line text | TextField |
| MuiSelect | Dropdown selection component | Select |
| MuiCheckbox | Checkbox for binary choices | Checkbox |
| MuiRadioGroup | Radio button group for single selection | RadioGroup |
| MuiRadioItem | Single radio button option with label | Built-in FormEngine wrapper |
| MuiSwitch | Toggle switch for on/off states | Switch |
| MuiDatePicker | Date picker from MUI X | DatePicker |
| MuiUploader | File upload with Material UI styling | Preset combining MUI primitives |
| Component | Description | Material UI docs |
|---|
| MuiFormControlLabel | Wrapper pairing a form control with its label | FormControlLabel |
| MuiFormLabel | Label component for form controls | FormLabel |
Layout components
| Component | Description | Material UI docs |
|---|
| MuiBox | Generic box component for layout | Box |
| MuiContainer | Container for centering and constraining content | Container |
| MuiStack | Layout component for stacking items | Stack |
Navigation components
| Component | Description | Material UI docs |
|---|
| MuiBreadcrumbs | Breadcrumb navigation component | Breadcrumbs |
| MuiLink | Hyperlink component | Link |
Data display
| Component | Description | Material UI docs |
|---|
| MuiCard | Card component for content containers | Card |
| MuiList | List component for displaying items | List |
| MuiListItem | Item component for lists | ListItem |
| MuiTypography | Typography component for text styling | Typography |
| MuiTooltip | Tooltip for additional information | Tooltip |
Feedback
| Component | Description | Material UI docs |
|---|
| MuiCircularProgress | Circular progress indicator | CircularProgress |
| MuiLinearProgress | Linear progress indicator | LinearProgress |
| MuiErrorWrapper | Error display wrapper | Custom FormEngine component |
Dialogs
| Component | Description | Material UI docs |
|---|
| MuiDialog | Main dialog container | Dialog |
| MuiDialogTitle | Dialog title component | DialogTitle |
| MuiDialogContent | Dialog content container | DialogContent |
| MuiDialogContentText | Dialog text content | DialogContentText |
| MuiDialogActions | Dialog actions container | DialogActions |
| MuiDialogLayout | Complete dialog layout preset | Preset combining MUI dialog primitives |
| Component | Description | Material UI docs |
|---|
| MuiButton | Button component for user actions | Button |
| MuiButtonGroup | Group of buttons | ButtonGroup |
Registering the MUI component set
Pass the MUI component set to the FormViewer when you initialize FormEngine:
import {FormViewer, IFormViewer} from '@react-form-builder/core'
import {MuiComponents} from '@react-form-builder/components-material-ui'
const builder = FormViewer.view(MuiComponents).build()
export const App = () => <FormViewer view={builder} formJson={formJson} />
MuiTextField, MuiSelect, etc.) — not RSuite or Mantine types. A single form uses one component set at a time.
Additional resources
Support
For issues with the MUI integration, contact support@optimajet.com or open a ticket on the FormEngine GitHub issues page.
Next steps
Last modified on April 16, 2026
