Multi-Step Form Wrapper
A comprehensive multi-step form wrapper component that breaks complex forms into manageable steps with advanced features like auto-save, validation, and animations.
Installation
Install the Multi-Step Form Wrapper component using your preferred package manager.
Usage
The Multi-Step Form Wrapper component simplifies the creation of step-by-step forms with validation and progress tracking.
Basic Info
Discover Its 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.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | - | Step components to render within the form |
| onComplete | (data: FormData) => void | undefined | Callback function called when the form is completed |
| initialData | Record<string, unknown> | {} | Initial data for the form |
| schema | ZodSchema | undefined | Zod schema for overall form validation |
| className | string | '' | Additional class names for styling |
| showStepIndicator | boolean | true | Whether to show the step indicator |
| showStepTitle | boolean | true | Whether to show the step title and description |
| showProgressBar | boolean | false | Whether to show progress bar with percentage |
| allowSkipSteps | boolean | false | Whether to allow skipping to other steps |
| navigationPosition | 'bottom' | 'top' | 'bottom' | Position of the navigation buttons |
| nextButtonText | string | "Next" | Text for the next button |
| prevButtonText | string | "Back" | Text for the previous button |
| completeButtonText | string | "Complete" | Text for the complete button |
| allowStepReset | boolean | false | Whether to show a reset button to go back to first step |
| onStepChange | (prevStep: number, nextStep: number) => void | undefined | Callback function called when the step changes |
| onStepValidationError | (step: number, errors: FieldErrors) => void | undefined | Callback function called when step validation fails |
| persistKey | string | undefined | Key for localStorage persistence of form data |
| autoSave | boolean | false | Whether to automatically save form data to localStorage |
| autoSaveDelay | number | 1000 | Delay in milliseconds for auto-save debouncing |
| animateStepChange | boolean | true | Whether to animate step transitions |
| transitionDuration | number | 300 | Duration of step transition animations in milliseconds |
Advanced Usage
Explore different configurations and use cases for the Multi-Step Form Wrapper component.
Basic Multi-Step Form
A simple two-step form with validation and progress tracking.
Basic Info
Form with Progress Bar
Multi-step form with a progress bar and custom navigation positioning.
Personal Info
Form with Step Skipping
Allow users to skip between steps and reset the form.
Personal
Form with Auto-Save
Automatically save form data to localStorage with custom validation messages.
Personal Info
Complete Registration Form
A comprehensive example with all features enabled.