🧹 DynamicFields React Component

A flexible, fully-styled dynamic form generator built with React and Tailwind CSS, supporting custom input types, validation, and class overrides. Ideal for building forms quickly with full control over design and behavior.

✨ Features

• 📦 Supports text, number, checkbox, radio, and select fields
• 💅 Fully customizable via Tailwind-compatible className props
• 🧠 Built-in required field validation
• 🧱 Extensible for advanced usage
• 🌃 Full dark mode support
• 🔄 Real-time onChange callback with live formData and errors

📦 Installation

Copy the DynamicFields.tsx file into your React project.

Make sure you have Tailwind CSS and React configured in your app.

🚀 Usage

Basic Example

import React from "react";
import DynamicFields from "./DynamicFields";

const fields = [
  {
    name: "username",
    label: "Username",
    type: "text",
    required: true,
  },
  {
    name: "email",
    label: "Email",
    type: "text",
    required: true,
  },
  {
    name: "gender",
    label: "Gender",
    type: "radio",
    required: true,
    options: [
      { label: "Male", value: "male" },
      { label: "Female", value: "female" },
    ],
  },
  {
    name: "country",
    label: "Country",
    type: "select",
    options: [
      { label: "USA", value: "us" },
      { label: "India", value: "in" },
    ],
  },
  {
    name: "subscribe",
    label: "Subscribe",
    type: "checkbox",
  }
];

function App() {
  const handleChange = (data) => {
    console.log("Form Data:", data);
  };

  return (
    <DynamicFields
      fields={fields}
      title="Sign Up"
      description="Please fill all fields"
      onChange={handleChange}
    />
  );
}

⚙️ Props

| Prop | Type | Required | Description | | -------------------- | ------------------------------------- | -------- | --------------------------------- | | fields | FieldConfig[] | ✅ Yes | List of field definitions | | onChange | (data: Record<string, any>) => void | ✅ Yes | Callback on value change | | title | string | ❌ No | Optional form title | | description | string | ❌ No | Optional description | | className | string | ❌ No | Wrapper div styling | | mainFieldClassName | string | ❌ No | Class for the fields wrapper | | inputClassName | string | ❌ No | Applies to text/number inputs | | labelClassName | string | ❌ No | Applies to all labels | | fieldClassName | string | ❌ No | Applied to each field wrapper div | | errorClassName | string | ❌ No | Error message styling | | selectClassName | string | ❌ No | select field styling | | checkboxClassName | string | ❌ No | Checkbox input styling | | radioClassName | string | ❌ No | Radio input styling | | optionClassName | string | ❌ No | Dropdown option styling |

🔧 FieldConfig (field definition)

Each field object can contain:

| Property | Type | Required | Notes | | ------------- | --------------------------------------------------------- | --------------------------------- | -------------------------------------- | | name | string | ✅ Yes | Unique key | | label | string | ❌ No | Display label | | type | "text", "number", "select", "radio", "checkbox" | ✅ Yes | Field type | | required | boolean | ❌ No | Show red asterisk and basic validation | | placeholder | string | ❌ No | Placeholder (for inputs/selects) | | description | string | ❌ No | Optional helper text | | options | { label: string; value: any; }[] | Required for select and radio | Dropdown/Radio values |

🎨 Class Mapping

Here's how classes are applied to each section:

| Section | Class Prop | Default Tailwind Example | | ------------------- | ------------------- | ---------------------------------- | | Wrapper div | className | bg-white dark:bg-gray-900 | | Label text | labelClassName | text-gray-800 dark:text-gray-200 | | Input fields | inputClassName | bg-white dark:bg-gray-800 | | Select dropdown | selectClassName | rounded-lg | | Radio buttons | radioClassName | rounded-full | | Checkbox | checkboxClassName | rounded | | Field container div | fieldClassName | w-full | | Dropdown options | optionClassName | hover:bg-gray-100 | | Error messages | errorClassName | text-red-500 |

You can override all styles with your own Tailwind classes!

🧪 Advanced Usage: Custom Styling Per Field

You can add inputClassName, labelClassName, or className inside each field:

{
  name: "email",
  label: "Email",
  type: "text",
  inputClassName: "border-purple-500",
  labelClassName: "text-purple-700 font-semibold",
  className: "mb-6",
}

🧑‍💻 Author

Name: Pratik Panchal GitHub: @Pratikpanchal25

📄 License

MIT — Free to use, modify and distribute.

🛠 Contributing

Pull requests are welcome! If you find bugs, feel free to open an issue.