Mantine Form Builder

A powerful, drag-and-drop form builder component built with Mantine UI and React. Create dynamic forms with ease using an intuitive visual interface.

📦 Package: mantine-form-builder on npm
🏠 Homepage: https://pradip-v2.github.io/mantine-form-builder/
📂 Repository: https://github.com/pradip-v2/mantine-form-builder

Features

• 🎨 Built with Mantine UI - Consistent design system and components
• 🖱️ Drag & Drop Interface - Intuitive form field reordering
• 📝 Multiple Field Types - Text, Select, Multi-select, Radio, Checkbox, Textarea, Date, DateTime, and Heading
• ⚡ Real-time Preview - See your form as you build it
• 🔧 Field Configuration - Customize labels, validation, and layout
• 📱 Responsive Design - Works on all screen sizes
• 🎯 TypeScript Support - Full type safety and IntelliSense
• 🔄 Form Validation - Built-in validation with Yup schema
• 📊 Form Response Viewer - Display submitted form responses

Installation

npm install mantine-form-builder
# or
yarn add mantine-form-builder
# or
pnpm add mantine-form-builder

Peer Dependencies

This library requires the following peer dependencies:

npm install @mantine/core @mantine/dates @mantine/hooks @mantine/notifications @hello-pangea/dnd formik yup dayjs

Quick Start

import { MantineProvider } from '@mantine/core';
import { Notifications } from '@mantine/notifications';
import { FormBuilder } from 'mantine-form-builder';

function App() {
  return (
    <MantineProvider>
      <Notifications />
      <FormBuilder
        onSave={async (formData) => {
          console.log('Form saved:', formData);
          // Handle form save logic
        }}
        onCancel={() => {
          console.log('Form creation cancelled');
          // Handle cancel logic
        }}
      />
    </MantineProvider>
  );
}

Basic Usage

Creating a Form Builder

import { FormBuilder } from 'mantine-form-builder';
import type { CustomFormRequest } from 'mantine-form-builder';

function MyFormBuilder() {
  const handleSave = async (formData: CustomFormRequest) => {
    try {
      // Save form to your backend
      const response = await fetch('/api/forms', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(formData),
      });
      
      if (response.ok) {
        console.log('Form saved successfully!');
      }
    } catch (error) {
      console.error('Error saving form:', error);
    }
  };

  const handleCancel = () => {
    // Handle cancel action
    console.log('Form creation cancelled');
  };

  return (
    <FormBuilder
      onSave={handleSave}
      onCancel={handleCancel}
      initialData={{
        title: "My Custom Form",
        description: "A sample form",
        fields: []
      }}
    />
  );
}

Viewing Form Responses

import { ViewFormResponse } from 'mantine-form-builder';
import type { FormResponse } from 'mantine-form-builder';

function FormResponseViewer({ formResponse }: { formResponse: FormResponse }) {
  return <ViewFormResponse formResponse={formResponse} />;
}

Field Types

The Form Builder supports the following field types:

| Field Type | Description | Configuration Options | |------------|-------------|----------------------| | text | Single line text input | Label, Required, Span, Default Value | | textarea | Multi-line text input | Label, Required, Span, Default Value | | select | Dropdown selection | Label, Required, Span, Options | | multiselect | Multiple selection dropdown | Label, Required, Span, Options | | radio | Radio button group | Label, Required, Span, Options | | checkbox | Checkbox input | Label, Required, Span | | date | Date picker | Label, Required, Span | | datetime | Date and time picker | Label, Required, Span | | heading | Section heading | Label, Heading Size, Span |

API Reference

FormBuilder Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | onSave | (formData: CustomFormRequest) => Promise<any> | Yes | Callback function called when form is saved | | onCancel | () => void | Yes | Callback function called when form creation is cancelled | | initialData | CustomFormRequest | No | Initial form data to populate the builder |

CustomFormRequest Type

interface CustomFormRequest {
  title: string;                    // Form title (required)
  description?: string;             // Form description
  fields: InputFieldRequest[];      // Array of form fields
  is_shared?: boolean;              // Whether form is shared
  form_type?: FormTypeEnum;         // Form type (clinical/admin)
  created_by?: number | null;       // Creator ID
  updated_by?: number | null;       // Last updater ID
}

InputField Type

interface InputField {
  id: number;                       // Unique field ID
  index: number;                    // Field position
  type: TypeD59Enum;                // Field type
  config: InputFieldConfig;         // Field configuration
}

InputFieldConfig Type

interface InputFieldConfig {
  label: string;                    // Field label
  required: boolean;                // Whether field is required
  span: number;                     // Grid span (1-12)
  default_value?: string;           // Default value
  options?: Option[];               // Options for select/multiselect/radio
  label_size?: number;              // Heading size (1-6) for heading type
}

Advanced Usage

Pre-populating Form Data

const initialFormData: CustomFormRequest = {
  title: "Employee Registration",
  description: "Register new employees",
  fields: [
    {
      id: 1,
      index: 0,
      type: "text",
      config: {
        label: "Full Name",
        required: true,
        span: 6,
        default_value: ""
      }
    },
    {
      id: 2,
      index: 1,
      type: "select",
      config: {
        label: "Department",
        required: true,
        span: 6,
        options: [
          { id: 1, index: 1, label: "Engineering", value: "engineering" },
          { id: 2, index: 2, label: "Marketing", value: "marketing" },
          { id: 3, index: 3, label: "Sales", value: "sales" }
        ]
      }
    }
  ]
};

<FormBuilder
  initialData={initialFormData}
  onSave={handleSave}
  onCancel={handleCancel}
/>

Custom Validation

The Form Builder uses Yup for validation. You can extend the validation schema:

import * as Yup from 'yup';

const customValidationSchema = Yup.object({
  title: Yup.string()
    .required("Title is required")
    .min(3, "Title must be at least 3 characters"),
  description: Yup.string()
    .max(500, "Description must be less than 500 characters"),
  fields: Yup.array().min(1, "At least one field is required")
});

Examples

Check out the basic example for a complete working implementation.

To run the example:

cd examples/basic-mantine-form-builder
npm install
npm run dev

Styling

The Form Builder uses Mantine's theming system. You can customize the appearance by configuring your MantineProvider:

import { MantineProvider } from '@mantine/core';

<MantineProvider
  theme={{
    colorScheme: 'light',
    primaryColor: 'blue',
    // Add your custom theme configuration
  }}
>
  <FormBuilder {...props} />
</MantineProvider>

Browser Support

• Chrome >= 90
• Firefox >= 88
• Safari >= 14
• Edge >= 90

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License.

Author

Pradip Bankar

• Email: [email protected]
• GitHub: @pradip-v2

Support

If you encounter any issues or have questions, please open an issue on GitHub.