```tsx "use client"; import { Stepper, StepperItem, StepperTrigger, StepperIndicator, StepperTitle, } 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), email: z.string().email(), }), engagement: z.object({ type: z.enum(["standard", "custom"]), startDate: z.date(), }), confirm: z.boolean().refine(Boolean), }); type WizardValues = z.infer; const formDefs = [ { kind: "step", id: "client", title: "Client details", children: [/* fields */], }, { kind: "step", id: "engagement", title: "Engagement", children: [/* fields */], }, { kind: "step", id: "confirm", title: "Confirm", children: [/* fields */], }, ] as const satisfies FormDefs; export default function StepperNavForm() { const stepper = FormBuilder.Single.useStepper( (slot) => slot.defaultStepper ); const steps = formDefs.filter((n) => n.kind === "step"); return (
stepper.actions.goTo(idx)} className="mb-8" > {steps.map((step, idx) => ( stepper.state.index} > {step.title} ))} console.log(values)} />
); } ``` ## How It Works [#how-it-works] 1. **Keep default footer** – Pass `(slot) => slot.defaultStepper` to preserve Next/Back buttons 2. **Sync with Stepper** – Bind `value` to `stepper.state.index` and `onValueChange` to `stepper.actions.goTo` 3. **Disable future steps** – Prevent jumping ahead with `disabled={idx > stepper.state.index}` The key difference from [Multi-Step Wizard](/composites/form-builder/single-examples/multi-step-wizard): * `() => null` – Hides default UI for fully custom navigation * `(slot) => slot.defaultStepper` – Keeps default footer, lets you add a visual progress indicator See [Stepper Hook](/composites/form-builder/single#stepper-hook) for the full API and the [Stepper component](/primitives/stepper) for styling options.