React Dynamic Form Builder

A powerful and flexible dynamic form builder for React applications. Build complex forms with multiple input types, validation, conditional logic, and more.

Features

• 🎨 Multiple input types (text, dropdown, checkbox, color picker, signature pad, etc.)
• ✨ Beautiful UI with Tailwind CSS
• 🔄 Conditional logic
• ✅ Built-in validation
• 📱 Fully responsive
• 🎯 TypeScript support
• 🎨 Customizable themes
• 📦 Zero dependencies (except React and minimal UI libraries)

Installation

npm install react-dynamic-form-builder

Quick Start

import { FormBuilder, FormConfig, FormData } from 'react-dynamic-form-builder';

function App() {
  const handleSubmit = (data: FormData) => {
    console.log('Form data:', data);
  };

  const config: FormConfig = {
    form: {
      style: "subheadings",
      showHeader: true,
      headerTitle: "My Form",
      headerSubTitle: "Please fill out the information",
      buttons: {
        primary: {
          backgroundColor: "#2563eb",
          hoverBackgroundColor: "#1d4ed8",
          textColor: "#ffffff",
          focusRingColor: "#3b82f6"
        },
        secondary: {
          backgroundColor: "#f9fafb",
          hoverBackgroundColor: "#f3f4f6",
          textColor: "#374151",
          focusRingColor: "#6b7280"
        }
      }
    },
    sections: [
      {
        section_id: "personal_info",
        section_name: "Personal Information",
        order: 1,
        description: "Basic details",
        showHeader: true
      }
    ],
    questions: [
      {
        question_id: "name",
        question_text: "What is your name?",
        question_style: "text",
        mandatory: "yes",
        validations: [],
        placeholder_text: "Enter your name",
        section_id: "personal_info",
        order: 1,
        field_width: "full"
      }
    ]
  };

  return <FormBuilder config={config} onSubmit={handleSubmit} />;
}

Available Question Types

• text - Single line text input
• textarea - Multi-line text input
• dropdown - Single select dropdown
• checkbox - Single checkbox
• radio buttons - Radio button group
• multi-select dropdown - Multiple select dropdown
• color picker - Color selection
• date picker - Date selection
• file upload - File upload with preview
• signature pad - Signature capture
• slider - Numeric slider

Configuration

Form Configuration

The form configuration object (FormConfig) has three main sections:

1. form - General form settings
2. sections - Form sections
3. questions - Form questions

Form Settings

interface FormStyle {
  style: "tabs" | "subheadings";
  showHeader: boolean;
  headerTitle: string;
  headerSubTitle: string;
  buttons: {
    primary: ButtonStyle;
    secondary: ButtonStyle;
  };
}

Section Configuration

interface Section {
  section_id: string;
  section_name: string;
  order: number;
  description: string;
  showHeader?: boolean;
}

Question Configuration

interface Question {
  question_id: string;
  question_text: string;
  question_style: string;
  mandatory: "yes" | "no";
  validations: ValidationRule[];
  dependency_question_id: string;
  dependency_answers: string[];
  placeholder_text: string;
  help_text: string;
  default_value: any;
  order: number;
  field_width: "full" | "half";
  section_id: string;
  visibility: "visible" | "hidden";
  options?: Option[];
}

Validation

Add validation rules to questions:

validations: [
  {
    pattern: "^[A-Za-z\\s]+$",
    error_message: "Only letters are allowed"
  },
  {
    pattern: "^.{3,}$",
    error_message: "Minimum 3 characters required"
  }
]

Conditional Logic

Make questions appear based on other answers:

{
  question_id: "has_pet",
  question_text: "Do you have a pet?",
  question_style: "checkbox",
  // ...
},
{
  question_id: "pet_name",
  question_text: "What's your pet's name?",
  question_style: "text",
  dependency_question_id: "has_pet",
  dependency_answers: [true],
  // ...
}

Styling

The form uses Tailwind CSS for styling. You can customize the appearance by:

1. Using your own Tailwind configuration
2. Customizing the button styles in the form config
3. Overriding CSS classes

TypeScript Support

The package includes full TypeScript definitions. Import types:

import type { 
  FormConfig,
  FormData,
  Question,
  Section,
  ValidationRule,
  Option
} from 'react-dynamic-form-builder';

Development

1. Clone the repository
2. Install dependencies: npm install
3. Start development server: npm run dev
4. Build: npm run build

License

MIT