```tsx "use client"; import { Button } from "@tilt-legal/cubitt-components/primitives"; import { z } from "zod"; import { FormBuilder } from "@tilt-legal/cubitt-components/composites"; const schema = z.object({ client: z.object({ name: z.string().min(1, "Add a client name"), email: z.string().email("Enter a valid email"), }), engagement: z.object({ type: z.enum(["standard", "custom"]), startDate: z.date(), notes: z.string().optional(), }), confirm: z.boolean().refine(Boolean, "Please confirm before submitting"), }); type WizardValues = z.infer; const formDefs = [ { kind: "step", id: "client", title: "Client details", nextLabel: "Next: Engagement", children: [ { kind: "group", children: [ { kind: "field", name: "client.name", label: "Client name", component: "text", size: "half", }, { kind: "field", name: "client.email", label: "Client email", component: "email", size: "half", }, ], }, ], }, { kind: "step", id: "engagement", title: "Engagement setup", nextLabel: "Review", children: [ { kind: "group", title: "Engagement details", children: [ { kind: "field", name: "engagement.type", label: "Type", component: "radio", options: [ { value: "standard", label: "Standard" }, { value: "custom", label: "Custom" }, ], }, { kind: "field", name: "engagement.startDate", label: "Start date", component: "date", size: "half", }, { kind: "field", name: "engagement.notes", label: "Customization notes", component: "textarea", size: "full", showIf: (v: WizardValues) => v.engagement?.type === "custom", }, ], }, ], }, { kind: "step", title: "Review & confirm", previousLabel: "Back", nextLabel: "Submit", children: [ { kind: "group", children: [ { kind: "field", name: "confirm", label: "I confirm these details are correct", component: "checkbox", }, ], }, ], }, ] as const satisfies FormDefs; export default function WizardForm() { const stepper = FormBuilder.Single.useStepper(() => null); return (
console.log(values)} />
); } ``` ## How It Works [#how-it-works] 1. **Define step nodes** – Use `kind: "step"` with `id`, `title`, and `children` 2. **Get stepper handle** – Call `FormBuilder.Single.useStepper(() => null)` to hide default UI 3. **Pass stepper.render** – Connects the stepper to the form 4. **Build custom controls** – Use `stepper.state` and `stepper.actions` See [Step Nodes](/composites/form-builder/form-defs#step-nodes) for step properties and [Stepper Hook](/composites/form-builder/single#stepper-hook) for the full state/actions API.