logo
Back to blogs

Dynamic Form Component in React

Mar 10, 2025 - 5 min read

Dynamic Form Component in React

How to use :

dynamic-form.tsx
1import DynamicForm from "@/components/dynamic-form"; 2const exampleData3: FormField[] = [ 3 { 4 type: "email", 5 name: "email", 6 label: "Email", 7 placeholder: "Email", 8 error: "Email is required", 9 width: 1, 10 required: true, 11 }, 12 { 13 type: "password", 14 name: "password", 15 label: "Password", 16 placeholder: "Password", 17 error: "Password is required", 18 width: 1, 19 }, 20 { 21 type: "action", 22 name: "actions", 23 buttons: [ 24 { 25 label: "Submit", 26 type: "submit", 27 className: "w-full", 28 variant: "secondary", 29 }, 30 ], 31 width: 1, 32 }, 33]; 34<DynamicForm 35 description="description of the form goes here" 36 title="test form1" 37 dataFields={Data} 38/>;