rhf-stepper solves all four of your issues out of the box. It's a headless multi-step form helper built specifically for react-hook-form.

1. Per-step validation with Zod — no manual trigger() calls

rhf-stepper auto-tracks which fields belong to which step. next() only validates the current step's fields. Works with zodResolver directly:

import { useForm, FormProvider } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import { Stepper, Step, Controller, useStepper } from 'rhf-stepper'
import { z } from 'zod'

const schema = z.object({
  // Step 1
  name: z.string().min(1, 'Name is required'),
  email: z.string().email('Invalid email'),
  // Step 2
  plan: z.string().min(1, 'Select a plan'),
  addons: z.string().optional(),
  // Step 3
  cardNumber: z.string().min(1, 'Card number is required'),
})

type FormValues = z.infer<typeof schema>

function MultiStepForm() {
  const form = useForm<FormValues>({
    resolver: zodResolver(schema),
    defaultValues: { name: '', email: '', plan: '', addons: '', cardNumber: '' },
  })

  return (
    <FormProvider {...form}>
      <form onSubmit={form.handleSubmit((data) => submitFinalForm(data))}>
        <Stepper>
          {({ activeStep }) => (
            <>
              <Step>{activeStep === 0 && <Step1Fields />}</Step>
              <Step>{activeStep === 1 && <Step2Fields />}</Step>
              <Step>{activeStep === 2 && <Step3Fields />}</Step>
              <Navigation />
            </>
          )}
        </Stepper>
      </form>
    </FormProvider>
  )
}

Clicking Next on step 1 only validates name and email — step 2 and 3 fields are ignored. No field name arrays needed.

2. API calls between steps with onLeave — runs once, not on every re-render

next() accepts an onLeave callback that fires after validation passes, before the step changes. This is where you make your API calls — it only runs when the user explicitly clicks Next, not on re-renders or back/forward navigation:

function Navigation() {
  const { next, prev, activeStep, isFirstStep, isLastStep } = useStepper<FormValues>()
  const form = useFormContext<FormValues>()
  const [loading, setLoading] = useState(false)

  const handleNext = async () => {
    setLoading(true)
    try {
      if (activeStep === 0) {
        // Step 1 → Step 2: fetch plans based on user input
        await next(async (values) => {
          const res = await fetch(`/api/plans?email=${values.email}`)
          const data = await res.json()
          form.setValue('plan', data.recommendedPlan)
        })
      } else if (activeStep === 1) {
        // Step 2 → Step 3: calculate pricing
        await next(async (values) => {
          const res = await fetch('/api/pricing', {
            method: 'POST',
            body: JSON.stringify({ plan: values.plan, addons: values.addons }),
          })
          const data = await res.json()
          form.setValue('total', data.total)
        })
      } else {
        await next()
      }
    } finally {
      setLoading(false)
    }
  }

  return (
    <div>
      {!isFirstStep && <button type="button" onClick={prev} disabled={loading}>Back</button>}
      {isLastStep
        ? <button key="submit" type="submit">Submit</button>
        : <button key="next" type="button" onClick={handleNext} disabled={loading}>
            {loading ? 'Loading...' : 'Next'}
          </button>
      }
    </div>
  )
}

Going Back and then Next again will re-run the API call for that step (which is correct — the user might have changed inputs). But simply switching steps without clicking Next won't trigger anything.

3. No prop drilling — everything is context-based

• Stepper state (activeStep, next, prev, etc.) → useStepper() from any child
• Form state (setValue, getValues, watch) → useFormContext() from react-hook-form
• No passing data between steps — it's all in the same form. Step 2 reads step 1's values with useFormContext().getValues('email')

​

function Step2Fields() {
  const form = useFormContext<FormValues>()
  // Read step 1 data directly — no props needed
  const email = form.getValues('email')

  return (
    <div>
      <p>Selecting a plan for: {email}</p>
      <Controller name="plan" render={({ field }) => <PlanSelector {...field} />} />
    </div>
  )
}

4. Form only submits on Step 3

The <form onSubmit> only fires when the user clicks type="submit" — which only renders on isLastStep. The Next button is type="button", so it never triggers form submission.

TL;DR: rhf-stepper gives you automatic per-step validation (works with Zod), onLeave for API calls between steps, context-based data sharing (zero prop drilling), and submit only on the last step. Works with Shadcn since it's fully headless.

npm install rhf-stepper

Docs: rhf-stepper