react-smart-fields

🧹 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.