Dynamic Form Builder

A powerful and flexible form builder component for React applications that generates forms dynamically from JSON configurations.

Features

• 🎯 Dynamic form generation from JSON configuration
• 🎨 Beautiful, modern UI with smooth animations
• 📱 Fully responsive design
• ♿ Accessible (WCAG 2.1 compliant)
• 🔍 Built-in validation
• 🎭 Conditional logic support
• 🎯 Multiple input types
• 🎨 Customizable styling
• 📦 Easy to integrate
• 🚀 TypeScript support

Installation

npm install @your-org/dynamic-form-builder

Quick Start

import { FormBuilder } from '@your-org/dynamic-form-builder';
import '@your-org/dynamic-form-builder/dist/style.css';

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

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

Form Configuration

The form is configured using a JSON structure that defines sections, questions, and their properties. Here's a basic example:

{
  "form": {
    "style": "subheadings",
    "showHeader": true,
    "submitText": "Sumbit Form",
    "headerTitle": "Dynamic Form",
    "headerSubTitle": "Please fill out the information below"
  },
  "sections": [
    {
      "section_id": "personal_info",
      "section_name": "Personal Information",
      "order": 1,
      "description": "Basic details about the user"
    }
  ],
  "questions": [
    {
      "question_id": "name",
      "question_text": "What is your name?",
      "question_style": "text",
      "mandatory": "yes",
      "section_id": "personal_info",
      "order": 1
    }
  ]
}

Input Types

The form builder supports various input types:

1. text - Single line text input
2. textarea - Multi-line text input
3. dropdown - Single select dropdown
4. multi-select dropdown - Multiple select dropdown
5. checkbox - Single checkbox
6. radio buttons - Radio button group
7. date picker - Date selection
8. file upload - File upload with preview
9. signature pad - Signature capture
10. slider - Range slider
11. color picker - Color selection

Dynamic Options Management

The form builder supports dynamic option management for multi-select dropdowns and dropdowns, allowing you to add new options on the fly.

Enabling Dynamic Options

To enable the "Add Option" feature for a multi-select dropdown, add the allowNew property to the question configuration:

{
  "question_id": "skills",
  "question_text": "Select your skills",
  "question_style": "multi-select dropdown",
  "allowNew": true,
  "options": [
    {"label": "JavaScript", "value": "js"},
    {"label": "Python", "value": "py"}
  ]
}

Handling Option Addition

The form builder provides callbacks to handle the addition of new options:

<FormBuilder
  config={formConfig}
  onSubmit={handleSubmit}
  onAddOption={(questionId) => {
    // Handle the add option request
    console.log('Add option requested for question:', questionId);
    // Show your custom dialog/modal to get the new option details
  }}
/>

Updating Options

When new options are added, you can update the question's options without reloading the entire form:

<FormBuilder
  config={formConfig}
  onSubmit={handleSubmit}
  onAddOption={handleAddOption}
  onQuestionUpdate={(updatedQuestion) => {
    // Update the form config with the new question data
    const newConfig = {
      ...formConfig,
      questions: formConfig.questions.map(q =>
        q.question_id === updatedQuestion.question_id ? updatedQuestion : q
      )
    };
    setFormConfig(newConfig);
  }}
/>

Example workflow:

1. User clicks "Add Option" in a multi-select dropdown
2. onAddOption is called with the question ID
3. Parent app shows a dialog to collect new option details
4. Parent app updates the question's options
5. Form builder updates the dropdown without losing other form data

Styling

The form builder uses Tailwind CSS for styling and supports customization through the form configuration:

{
  "form": {
    "buttons": {
      "primary": {
        "backgroundColor": "#2563eb",
        "hoverBackgroundColor": "#1d4ed8",
        "textColor": "#ffffff",
        "focusRingColor": "#3b82f6"
      },
      "secondary": {
        "backgroundColor": "#f9fafb",
        "hoverBackgroundColor": "#f3f4f6",
        "textColor": "#374151",
        "focusRingColor": "#6b7280"
      }
    }
  }
}

Badge Colors

For multi-select dropdowns, you can customize the badge colors:

{
  "question_style": "multi-select dropdown",
  "badgeColor": "#2563eb"  // Use any hex color
}

License

MIT