Multi Step Form Wrapper

A flexible grid/list component that provides seamless switching between grid and list layouts with customizable card rendering.

Usage

Basic Info

Name

multi-step-form.tsx

import { MultiStepFormWrapper, Step } from "@/components/multi-step-form-wrapper"

export default function MyComponent() {
  return (
    <MultiStepFormWrapper>
      <Step title="Basic Info">
        <FormBasic />
      </Step>
      <Step title="Message">
        <FormMessage />
      </Step>
    </MultiStepFormWrapper>
  )
}

Installation

Install the Multi-Step Form Wrapper component using your preferred package manager.

npx shadcn@latest add https://rigidui.com/r/multi-step-form-wrapper.json

Features

The Multi-Step Form Wrapper component is packed with powerful features designed to provide an exceptional user experience.

Step-by-Step Form Flow

Guide users through complex forms with a clear step-by-step interface and visual progress tracking.

Advanced Validation

Comprehensive step-by-step validation with Zod schemas, custom error messages, and validation error callbacks.

Auto-Save & Persistence

Automatically save form progress to localStorage with configurable debouncing and persistent form state.

Smooth Animations

Beautiful step transitions with configurable animation duration and seamless user experience.

Flexible Configuration

Highly customizable with step lifecycle hooks, optional steps, progress bars, and accessibility features.

Props

Prop	Type	Default
`children`	`React.ReactNode`	`-`
`onComplete?`	`(data: FormData) => void`	`undefined`
`initialData?`	`Record<string, unknown>`	`{}`
`schema?`	`ZodSchema`	`undefined`
`className?`	`string`	`''`
`showStepIndicator?`	`boolean`	`true`
`showStepTitle?`	`boolean`	`true`
`showProgressBar?`	`boolean`	`false`
`allowSkipSteps?`	`boolean`	`false`
`navigationPosition?`	`'bottom' \| 'top'`	`'bottom'`
`nextButtonText?`	`string`	`"Next"`
`prevButtonText?`	`string`	`"Back"`
`completeButtonText?`	`string`	`"Complete"`
`allowStepReset?`	`boolean`	`false`
`onStepChange?`	`(prevStep: number, nextStep: number) => void`	`undefined`
`onStepValidationError?`	`(step: number, errors: FieldErrors) => void`	`undefined`
`persistKey?`	`string`	`undefined`
`autoSave?`	`boolean`	`false`
`autoSaveDelay?`	`number`	`1000`
`animateStepChange?`	`boolean`	`true`
`transitionDuration?`	`number`	`300`