⚡️ Form Builder

🚀 Build Powerful Forms Effortlessly

Form Builder is a dynamic, reusable form engine that handles everything you need for form creation out of the box.

• ✅ Build your form dynamically – Simply pass a JSON schema that defines the fields you want.
• ✅ Automatic validations – Required fields, custom rules, and error handling included.
• ✅ State management – Captures, updates, and exposes form state seamlessly.
• ✅ Flexible input types – Supports text inputs, checkboxes, dropdowns, multi-selects, date pickers, and more.
• ✅ Submit actions – Built-in support for form submission and integration with APIs.
• ✅ UI rendering – Clean and customizable UI generated automatically from your schema.

📖 View Documentation

✨ Form Builder

📝 Build Forms with JSON

🎯 Why use Form Builder?
Stop writing repetitive form code. Simply pass a JSON schema and let Form Builder render, manage state, and handle changes for you.

⚡ Features

✅ Build forms by just passing JSON
✅ Handles state and change events automatically
✅ Minimal setup with maximum flexibility
✅ Customizable UI and component overrides (coming soon)

💻 Installation

npm install pd-form-builder

## 📌 Example Usage: FormBuilderReference

The following example shows how to use the `FormBuilder` component with different field types, validation, and actions:

```tsx
import React, { useEffect, useState } from "react";
import FormBuilder from "./FormBuilder";

const FormBuilderReference: React.FC = () => {
  const [formData, setFormData] = useState({}); //Set your Form Data Type here.
  const [customErrors, setCustomErrors] = useState<string[]>([]);

  useEffect(() => {
    console.log(formData);
  }, [formData]);

  const fields = [
    {
      label: "Full Name",
      name: "full_name",
      type: "input-box",
      props: {
        label: "Full Name",
        placeholder: "Enter your full name",
        mandatory: true,
      },
    },
    {
      label: "Email",
      name: "email",
      type: "input-box",
      props: {
        label: "Email",
        placeholder: "Enter your email",
        keyboardType: "email-address",
        mandatory: true,
      },
    },
    {
      label: "Date of Birth",
      name: "dob",
      type: "datepicker",
      props: {
        label: "Date of Birth",
        placeholder: "Select date of birth",
        mandatory: true,
      },
    },
    {
      label: "Gender",
      name: "gender",
      type: "radio-input",
      props: {
        label: "Select Gender",
        options: [
          { label: "Male", value: "male" },
          { label: "Female", value: "female" },
        ],
        mandatory: true,
      },
    },
    {
      name: "volume",
      label: "Volume",
      type: "slider",
      sectionBreak: true,
      props: {
        label: "Volume",
        min: 0,
        max: 10,
        step: 1,
      },
    },
    {
      label: "Hobbies",
      name: "hobbies",
      type: "dropdown",
      sectionBreak: true,
      props: {
        label: "Select Hobbies",
        items: [
          { label: "Reading", value: "reading" },
          { label: "Music", value: "music" },
          { label: "Sports", value: "sports" },
        ],
      },
    },
    {
      name: "mobile-notifications",
      label: "Enable Mobile Notifications",
      type: "switch",
      sectionBreak: true,
      props: {
        label: "Enable Mobile Notifications",
      },
    },
    {
      name: "push-notifications",
      label: "Enable Push Notifications",
      type: "switch",
      props: {
        label: "Enable Push Notifications",
      },
    },
    {
      name: "web-notifications",
      label: "Enable Web Notifications",
      type: "switch",
      props: {
        label: "Enable Web Notifications",
      },
    },
    {
      name: "auto-update",
      label: "Enable Auto Update",
      type: "switch",
      props: {
        label: "Enable Auto Update",
      },
    },
    {
      label: "Skills",
      name: "skills",
      type: "multi-select-box",
      sectionBreak: true,
      props: {
        label: "Select Skills",
        items: [
          { label: "React", value: "react" },
          { label: "Node.js", value: "node" },
          { label: "Python", value: "python" },
        ],
      },
    },
  ];

  const handleSubmit = () => {
    console.log("Form submitted with data:", formData);
    alert("Form submitted successfully!");
  };

  const handleCancel = () => {
    console.log("Form cancelled");
  };

  return (
    <div style={{ padding: 20, marginBottom: 20 }}>
      <FormBuilder
        fields={fields}
        formData={formData}
        setFormData={setFormData}
        customErrors={customErrors}
        setCustomErrors={setCustomErrors}
        functions={{
          submit: { label: "Submit", function: handleSubmit },
          cancel: { label: "Cancel", function: handleCancel },
        }}
        inputColumns={2}
      />
    </div>
  );
};

export default FormBuilderReference;