Multi-step forms for React, done right

Headless by default

Zero UI opinions. Bring your own design system, CSS framework, or component library.

Per-step validation

Each step validates only its own Zod schema before advancing. No full-form re-validation.

Built on react-hook-form

Fully compatible with the react-hook-form ecosystem. Use any resolver or field array.

Type-safe to the core

Strict TypeScript throughout. Inferred types from Zod schemas flow into your form fields.

Tiny footprint

Tree-shakeable. No CSS bundled. Only ship what you actually use.

Flexible architecture

Use the headless hooks alone, or drop in the optional UI components for a quick start.

See it in action

Each step only validates its own schema. You can't advance until the current step is valid — and going back never loses accumulated data.

• Progress tracked automatically
• Per-step Zod validation
• Back navigation preserves data
• Final submit merges all steps

Simple API, powerful results

Drop in the hooks and keep full control over your UI.

import { useSteps, useStepForm } from 'react-formsteps-core';
import { z } from 'zod';

const schema = z.object({ email: z.string().email() });

function MyForm() {
  const { currentStep, next, prev, isLast, progress } = useSteps({
    totalSteps: 3,
  });

  const { form, nextWithValidation } = useStepForm({ schema });

  return (
    <form>
      <progress value={progress} max={100} />
      <input {...form.register('email')} />
      <button onClick={prev}>Back</button>
      <button onClick={() => nextWithValidation().then(ok => ok && next())}>
        {isLast ? 'Submit' : 'Next'}
      </button>
    </form>
  );
}