FormEngine Component Library - 30+ Ready UI Components

FormEngine supports multiple UI component libraries. The primary libraries available are:

Available Component Libraries

Material UI Components

• Complete documentation: Material UI components.
• Fields components: TextField, Select, Checkbox, RadioGroup, Switch, Uploader.
• Form components: FormControlLabel, FormLabel.
• Layout components: Box, Container, Stack.
• Navigation components: Breadcrumbs, Link.
• Data display components: Card, List, ListItem, Typography, Tooltip.
• Feedback components: CircularProgress, LinearProgress, ErrorWrapper.
• Button components: Button, ButtonGroup.
• Utility components: ViewerWrapper.

Mantine Components

• Complete documentation: Mantine components.
• Input components: TextInput, Textarea, NumberInput, PasswordInput, Checkbox, CheckboxGroup, Radio, RadioGroup, Switch, SwitchGroup, Slider, RangeSlider, Rating, SegmentedControl, ColorInput, ColorPicker, JsonInput, FileInput, Dropzone.
• Combobox components: Select, MultiSelect, Autocomplete, TagsInput, NativeSelect.
• Date/time components: DatePicker, DatePickerInput, DateTimePicker, MonthPicker, MonthPickerInput, YearPicker, YearPickerInput, TimeInput, TimePicker.
• Form components: Label.
• Layout components: Container, Divider.
• Typography: Text, Title, Typography.
• Feedback: ErrorWrapper.
• Overlays: Dialog, Tooltip.
• Button: Button.
• Chip components: Chip, ChipCheckboxGroup, ChipRadioGroup.
• Rich editor: Tiptap (optional package).

React Suite Components

• Complete documentation: React Suite components.
• Fields components: Calendar, Checkbox, DatePicker, TimePicker, TagPicker, AutoComplete, Dropdown, Input, Number format, Pattern format, Radio group, Search, Text area, Uploader.
• Static components: Button, Divider, Error message, Header, Image, Label, Menu, Message, Placeholder components, Progress components, Static content, Tooltip.
• Structure components: Breadcrumb, Card, Container, Modal, Modal layout, Tab.

Custom Components

All libraries support custom component integration. You can create your own components or integrate third-party components into the form builder. See the custom components documentation for more information.

Component Categories

The components are divided into the following categories:

• Fields - components that store form data.
• Static - components for displaying information, do not contain form data.
• Structure - components that structure other components.
• Templates - template-related components, such as the Slot component.

Choosing a Component Library

When to use Material UI

• You want Google Material Design compliance.
• You need excellent accessibility (WCAG compliant).
• You require deep theming customization.
• Your project already uses Material UI or follows Material Design guidelines.
• You need comprehensive form controls with built-in validation states.

When to use Mantine

• You want a modern React component library with strong TypeScript support and theming.
• You need accessible, responsive components with a clean API.
• Your project uses or plans to use Mantine for consistency across the app.
• You need date/time pickers, rich text (Tiptap), or file dropzone from the Mantine ecosystem.

When to use React Suite

• You need a comprehensive set of components including advanced data grids, calendars, and date pickers.
• You prefer a custom design system that's not tied to Material Design.
• You want moderate bundle size.
• You need good internationalization support.

Getting Started

1. Choose your component library based on your design requirements.
2. Install the appropriate package (Mantine, Material UI, or React Suite).
3. Configure the form builder to use your chosen components.
4. Start building forms with the available components.

For detailed documentation on individual components, refer to:

• Material UI components documentation.
• Mantine components documentation.
• React Suite components documentation.
• Fields components.
• Static components.
• Structure components.
• Template components.

Material UI Components

Components based on the Material UI package are available in the package @react-form-builder/components-material-ui.

To install the Material UI components, run the following command:

npm install @react-form-builder/components-material-ui

tip

Material UI components require the following peer dependencies. If they're not installed automatically:

npm install @mui/material@^7.3.2 @emotion/react@^11.11.0 @emotion/styled@^11.11.0 --save-exact

An example of connecting components to FormBuilder:

Show example

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

const emptyForm = {
  form: {
    key: 'Screen',
    type: 'Screen',
    children: [
      {
        key: 'submitButton',
        type: 'MuiButton',
        props: {
          children: {
            value: 'Submit'
          }
        }
      }
    ]
  }
}

const getForm = () => JSON.stringify(emptyForm)

const MuiBuilder = () => {
  return (
    <FormBuilder
      view={builderView}
      getForm={getForm}
    />
  )
}

An example of connecting components to FormViewer:

Show example

import {view} from '@react-form-builder/components-material-ui'
import {FormViewer, namedObserver} from '@react-form-builder/core'

const emptyForm = {
  form: {
    key: 'Screen',
    type: 'Screen',
    children: [
      {
        key: 'submitButton',
        type: 'MuiButton',
        props: {
          children: {
            value: 'Submit'
          }
        }
      }
    ]
  }
}

const getForm = () => JSON.stringify(emptyForm)

const MuiViewer = () => {
  return (
    <FormViewer
      view={view}
      getForm={getForm}
    />
  )
}

Mantine Components

Components based on the Mantine package are available in the package @react-form-builder/components-mantine.

To install the Mantine components, run the following command:

npm install @react-form-builder/components-mantine

tip

Mantine components require peer dependencies. Install the Mantine packages you need:

npm install @mantine/core @mantine/dates
# Optional: @mantine/dropzone @mantine/tiptap

An example of connecting components to FormBuilder:

Show example

import {builderView} from '@react-form-builder/components-mantine'
import {FormBuilder} from '@react-form-builder/designer'

const emptyForm = {
  form: {
    key: 'Screen',
    type: 'Screen',
    children: [
      {
        key: 'submitButton',
        type: 'MtButton',
        props: {
          children: {
            value: 'Submit'
          }
        }
      }
    ]
  }
}

const getForm = () => JSON.stringify(emptyForm)

const MantineBuilder = () => {
  return (
    <FormBuilder
      view={builderView}
      getForm={getForm}
    />
  )
}

An example of connecting components to FormViewer:

Show example

import {view} from '@react-form-builder/components-mantine'
import {FormViewer} from '@react-form-builder/core'

const emptyForm = {
  form: {
    key: 'Screen',
    type: 'Screen',
    children: [
      {
        key: 'submitButton',
        type: 'MtButton',
        props: {
          children: {
            value: 'Submit'
          }
        }
      }
    ]
  }
}

const getForm = () => JSON.stringify(emptyForm)

const MantineViewer = () => {
  return (
    <FormViewer
      view={view}
      getForm={getForm}
    />
  )
}

React Suite Components

Components based on the React Suite package are available in the package @react-form-builder/components-rsuite.

To install the React Suite components, run the following command:

npm install @react-form-builder/components-rsuite

tip

If your package manager does not support automatic installation of peer dependencies, for example you use the --legacy-peer-deps flag in npm, then you need to install peer dependencies manually.

npm install @emotion/css@11.10.5 @emotion/react@11.10.5 @emotion/styled@11.10.5 @rsuite/icons@1.0.2 react-number-format@5.1.4 rsuite@5.59.1 --save-exact

An example of connecting components to FormBuilder:

Show example

import {builderViewWithCss} from '@react-form-builder/components-rsuite'
import {FormBuilder} from '@react-form-builder/designer'

const emptyForm = {
  form: {
    key: 'Screen',
    type: 'Screen',
    children: [
      {
        key: 'submitButton',
        type: 'RsButton',
        props: {
          children: {
            value: 'Submit'
          }
        }
      }
    ]
  }
}

const getForm = () => JSON.stringify(emptyForm)

const RSuiteBuilder = () => {
  return (
    <FormBuilder
      view={builderViewWithCss}
      getForm={getForm}
    />
  )
}

An example of connecting components to FormViewer:

Show example

import {view} from '@react-form-builder/components-rsuite'
import {FormViewer} from '@react-form-builder/core'

const emptyForm = {
  form: {
    key: 'Screen',
    type: 'Screen',
    children: [
      {
        key: 'submitButton',
        type: 'RsButton',
        props: {
          children: {
            value: 'Submit'
          }
        }
      }
    ]
  }
}

const getForm = () => JSON.stringify(emptyForm)

const RSuiteViewer = () => {
  return (
    <FormViewer
      view={view}
      getForm={getForm}
    />
  )
}

Support and Resources

• Material UI Documentation
• Mantine Documentation
• React Suite Documentation
• GitHub Repository
• Community Discussions