react-form-wizard-component

Multi-step forms in React, without the wiring

Accessible, zero-dependency form wizard for React 17, 18 and 19 — styled or headless, with real per-step validation.

Zero dependencies
~5 kB gzipped
React 17 · 18 · 19
TypeScript-first
SSR-safe

A live wizard — try the arrow keys.

Install and go

One package, nothing else enters your lockfile. The snippet on the right is a complete three-step wizard — progress bar, keyboard navigation and screen-reader announcements included.

Installation notes →

npm install react-form-wizard-component

import FormWizard from "react-form-wizard-component";import "react-form-wizard-component/styles.css";<FormWizard onComplete={(data) => submit(data)}>  <FormWizard.TabContent title="Account">…</FormWizard.TabContent>  <FormWizard.TabContent title="Profile">…</FormWizard.TabContent>  <FormWizard.TabContent title="Review">…</FormWizard.TabContent></FormWizard>;

What you get

Two ways to define steps

Nest JSX children for something quick, or hand over a schema for conditional steps and data-driven flows.

Per-step validation

Adapters for Zod and react-hook-form validate one step's fields without splitting your form into several.

Styled or headless

Recolour it with CSS variables, go fully unstyled with your own classes, or take the state machine alone.

Accessible by default

Tablist semantics, live-region step announcements, focus management and full keyboard operation.

Survives a reload

Persist answers to session or local storage and mirror the active step into the URL for deep links.

Works in your stack

ESM, CJS and UMD with correct types in every resolution mode, and a use-client directive for the App Router.