4b:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4c:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4d:T17dd,"use client"; import { toast } from "sonner"; import { defineSchema, type InferType } from "@buildnbuzz/form-react"; import { Form, FormContent, FormFields, FormSubmit, FormReset, FormActions, } from "@/registry/shadcn/form"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; // Schema with array field for managing team members const teamSchema = defineSchema({ fields: [ { type: "text", name: "projectName", label: "Project Name", placeholder: "My Awesome Project", required: true, }, { type: "textarea", name: "projectDescription", label: "Project Description", placeholder: "Describe your project...", ui: { rows: 3 }, }, { type: "array", name: "teamMembers", label: "Team Members", description: "Add team members who will work on this project", minItems: 1, maxItems: 10, ui: { isSortable: true, addLabel: "Add Team Member", }, fields: [ { type: "row", ui: { gap: 16, responsive: true }, fields: [ { type: "text", name: "name", label: "Name", placeholder: "John Doe", required: true, ui: { width: "50%" }, }, { type: "email", name: "email", label: "Email", placeholder: "john@example.com", required: true, ui: { width: "50%" }, }, ], }, { type: "row", ui: { gap: 16, responsive: true }, fields: [ { type: "select", name: "role", label: "Role", options: [ { label: "Developer", value: "developer" }, { label: "Designer", value: "designer" }, { label: "Product Manager", value: "pm" }, { label: "QA Engineer", value: "qa" }, { label: "DevOps", value: "devops" }, ], required: true, ui: { width: "50%" }, }, { type: "select", name: "experience", label: "Experience Level", options: [ { label: "Junior (0-2 years)", value: "junior" }, { label: "Mid-level (2-5 years)", value: "mid" }, { label: "Senior (5+ years)", value: "senior" }, { label: "Lead/Principal", value: "lead" }, ], ui: { width: "50%" }, }, ], }, { type: "tags", name: "skills", label: "Skills", placeholder: "Add skills...", maxTags: 8, ui: { delimiters: ["enter", "comma"], variant: "pills", }, }, ], }, { type: "array", name: "milestones", label: "Project Milestones", minItems: 2, maxItems: 8, ui: { isSortable: true, addLabel: "Add Milestone", }, fields: [ { type: "text", name: "title", label: "Milestone Title", placeholder: "MVP Launch", required: true, }, { type: "row", ui: { gap: 16, responsive: true }, fields: [ { type: "date", name: "dueDate", label: "Due Date", required: true, ui: { width: "50%" }, }, { type: "select", name: "priority", label: "Priority", options: [ { label: "Low", value: "low" }, { label: "Medium", value: "medium" }, { label: "High", value: "high" }, { label: "Critical", value: "critical" }, ], ui: { width: "50%" }, }, ], }, { type: "textarea", name: "description", label: "Description", placeholder: "Describe the milestone...", ui: { rows: 2 }, }, ], }, ], }); type TeamSchema = InferType; export default function ArrayFieldExample() { const handleSubmit = async ({ value }: { value: unknown }) => { const data = value as TeamSchema; await new Promise((r) => setTimeout(r, 1000)); toast("Project created!", { description: (

          {JSON.stringify(data, null, 2)}

), }); }; return ( Project Setup Dynamic team members and milestones with drag-and-drop reordering ); } 4a:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L4b",null,{"namespace":"@buzzform","registryDependencies":["@buzzform/array","@buzzform/text","@buzzform/email","@buzzform/textarea","@buzzform/select","@buzzform/date","@buzzform/tags","@buzzform/row","card","sonner"]}]]}],null]}],["$","$L4c",null,{"files":[{"path":"registry/shadcn/examples/array-field-form.tsx","content":"$4d","type":"registry:component","target":"components/buzzform/examples/array-field-form.tsx"}],"className":"h-[70svh] min-h-80"}]]}]