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:T11d4,"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 group field containing address information const registrationSchema = defineSchema({ fields: [ { type: "text", name: "fullName", label: "Full Name", placeholder: "John Doe", required: true, }, { type: "email", name: "email", label: "Email Address", placeholder: "john@example.com", required: true, }, { type: "group", name: "address", label: "Shipping Address", description: "Enter your complete shipping address", ui: { variant: "card", spacing: "md", showErrorBadge: true, }, fields: [ { type: "text", name: "street", label: "Street Address", placeholder: "123 Main Street", required: true, }, { type: "row", fields: [ { type: "text", name: "city", label: "City", placeholder: "New York", required: true, ui: { width: "50%" }, }, { type: "text", name: "state", label: "State/Province", placeholder: "NY", required: true, ui: { width: "50%" }, }, ], }, { type: "row", fields: [ { type: "text", name: "zipCode", label: "ZIP/Postal Code", placeholder: "10001", required: true, ui: { width: "50%" }, }, { type: "text", name: "country", label: "Country", placeholder: "United States", required: true, ui: { width: "50%" }, }, ], }, ], }, { type: "group", name: "billingAddress", label: "Billing Address", description: "Leave blank to use shipping address", ui: { variant: "bordered", spacing: "md", collapsed: true, showErrorBadge: true, }, fields: [ { type: "checkbox", name: "sameAsShipping", label: "Same as shipping address", }, { type: "text", name: "street", label: "Street Address", placeholder: "123 Main Street", }, { type: "row", fields: [ { type: "text", name: "city", label: "City", placeholder: "New York", ui: { width: "50%" }, }, { type: "text", name: "state", label: "State/Province", placeholder: "NY", ui: { width: "50%" }, }, ], }, ], }, { type: "checkbox", name: "agreeToTerms", label: "I agree to the terms and conditions", required: true, }, ], }); type RegistrationSchema = InferType; export default function GroupFieldExample() { const handleSubmit = async ({ value }: { value: unknown }) => { const data = value as RegistrationSchema; await new Promise((r) => setTimeout(r, 1000)); toast("Registration complete!", { description: (

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

), }); }; return ( Shipping & Billing Grouped address fields with collapsible sections ); } 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/group","@buzzform/text","@buzzform/email","@buzzform/checkbox","@buzzform/row","card","sonner"]}]]}],null]}],["$","$L4c",null,{"files":[{"path":"registry/shadcn/examples/group-field-form.tsx","content":"$4d","type":"registry:component","target":"components/buzzform/examples/group-field-form.tsx"}],"className":"h-[70svh] min-h-80"}]]}]