Multi-Step Form React Component

A flexible, customizable multi-step form component for React applications built with TypeScript and Framer Motion. Includes built-in styles with no external CSS dependencies required.

Features

• 🚀 Multi-step form navigation with progress indicator
• 🎨 Beautiful UI with clean, modern styling (no external CSS dependencies)
• 📱 Responsive design that works on all devices
• ⚡ Smooth animations powered by Framer Motion
• 🎯 Zero CSS dependencies - all styles included in the package
• 🔧 Highly customizable with configurable form steps
• 📝 Multiple field types including text, email, phone, file uploads, selects, and more
• ✅ Built-in validation with custom validation rules
• 📋 Review step to show all entered data before submission
• 🎯 TypeScript support with full type definitions
• 📦 Zero dependencies (except React peer dependencies)

Installation

npm install react-multistep-form-wizard

Quick Start

import React from 'react';
import { MultiStepForm, type FormStep } from 'react-multistep-form-wizard';
import 'react-multistep-form-wizard/dist/index.css';

function App() {
  const handleSubmit = (formData) => {
    console.log('Form submitted:', formData);
    // Handle form submission
  };

  const formStepsSample: FormStep[] = [
        {
            id: 1,
            title: "Employment Status",
            description: "Please provide your employment details.",
            fields: [
                {
                    name: "employmentStatus",
                    label: "Are you currently employed?",
                    type: "select",
                    required: true,
                    options: ["Yes", "No"]
                }
            ]
        },
        {
            id: 2,
            title: "Employment Details",
            description: "Please provide details about your employment.",
            fields: [
                {
                    name: "employer",
                    label: "Current Employer",
                    type: "text",
                    required: true
                },
                {
                    name: "employmentType",
                    label: "Type of Employment",
                    type: "select",
                    required: true,
                    options: ["Full-time", "Part-time", "Contract"]
                },
                {
                    name: "salary",
                    label: "Annual Salary",
                    type: "number",
                    required: true,
                    validation: "formData['employmentType'] && formData['employmentType']==='Full-time'"
                }
            ]
        },
        {
            id: 3,
            title: "Review & Submit",
            fields: [],
        },
    ]

    // Note: you can also use sample config provide in package - formStepsSample1, formStepsSample2

  return 
    <div>
            <h1>Multi Step</h1>
            <MultiStepForm formSteps={formStepsSample} onSubmit={handleSubmit}/>
        </div>
  ;
}

export default App;

Basic Usage

1. Import the component and styles

import { formStepsSample1, formStepsSample2, MultiStepForm, type FormStep } from 'react-multistep-form-wizard';
import 'react-multistep-form-wizard/dist/index.css';

2. Define your form steps

import { FormStep } from 'react-multistep-form-wizard';

const myFormSteps: FormStep[] = [
  {
    id: 1,
    title: "Personal Information",
    description: "Please provide your personal details",
    fields: [
      {
        name: "firstName",
        label: "First Name",
        type: "text",
        required: true,
      },
      {
        name: "email",
        label: "Email Address",
        type: "email",
        required: true,
      },
      {
        name: "phone",
        label: "Phone Number",
        type: "tel",
        required: true,
      },
    ],
  },
  {
    id: 2,
    title: "Preferences",
    description: "Tell us about your preferences",
    fields: [
      {
        name: "interests",
        label: "Your Interests",
        type: "multiselect",
        required: true,
        options: ["Technology", "Sports", "Music", "Art", "Travel"],
      },
      {
        name: "experience",
        label: "Years of Experience",
        type: "singleselect",
        required: true,
        options: ["0-1 years", "2-5 years", "5+ years"],
      },
    ],
  },
];

3. Use the component

function MyForm() {
  const handleSubmit = (formData) => {
    console.log('Form data:', formData);
    // Process the form data
  };

  return (
    <MultiStepForm 
      formSteps={myFormSteps} 
      onSubmit={handleSubmit} 
    />
  );
}

Field Types

The component supports various field types:

Text Fields

• text - Basic text input
• email - Email input with validation
• password - Password input
• tel - Phone number input (with international support)
• number - Numeric input
• textarea - Multi-line text input
• date - Date picker
• datetime-local - Date and time picker
• time - Time picker
• month - Month picker

Selection Fields

• select - Button-style selection
• singleselect - Radio button selection
• multiselect - Checkbox selection
• consent - Checkbox for terms/agreements

File Fields

• file - File upload with drag & drop support

Advanced Configuration

Conditional Fields

You can make fields conditional using the validation property:

{
  name: "salary",
  label: "Annual Salary",
  type: "number",
  required: false,
  validation: "formData['employmentType'] && formData['employmentType'] === 'Full-time'"
}

Custom Validation

The component includes built-in validation for:

• Required fields
• Email format validation
• Phone number validation

File Upload

File uploads are supported with drag & drop functionality:

{
  name: "documents",
  label: "Upload Documents",
  type: "file",
  required: false,
}

Styling

The component uses Tailwind CSS classes. You can customize the appearance by:

1. Using CSS custom properties to override colors
2. Extending Tailwind classes in your project
3. Providing custom CSS to override specific styles

Custom CSS Example

/* Override the primary color */
.multi-step-form-button.primary {
  background-color: #your-color;
}

/* Custom step indicator */
.multi-step-form-step-number.active {
  background-color: #your-color;
}

API Reference

MultiStepForm Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | formSteps | FormStep[] | Yes | Array of form steps configuration | | onSubmit | (formData: FormData) => void | Yes | Callback function when form is submitted |

FormStep Interface

interface FormStep {
  id: number;
  title: string;
  description?: string;
  fields: FormField[];
}

FormField Interface

interface FormField {
  name: string;
  label: string;
  type: FormFieldType;
  required: boolean;
  options?: string[];
  validation?: string;
}

FormFieldType

type FormFieldType = 
  | 'text'
  | 'email'
  | 'password'
  | 'tel'
  | 'number'
  | 'file'
  | 'textarea'
  | 'select'
  | 'singleselect'
  | 'multiselect'
  | 'consent'
  | 'date'
  | 'datetime-local'
  | 'time'
  | 'month';

Sample Configurations

The package includes sample configurations you can use as starting points:

import { formSteps, formSteps1, formSteps2 } from 'react-multistep-form-wizard';

// Use predefined configurations
<MultiStepForm formSteps={formSteps} onSubmit={handleSubmit} />

Development

Building the Package

# Build the library
npm run build:lib

# Development mode
npm run dev

Testing

# Run linting
npm run lint

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support

If you have any questions or need help, please:

1. Check the documentation
2. Search existing issues
3. Create a new issue

Changelog

1.0.0

• Initial release
• Multi-step form with progress indicator
• Support for various field types
• Built-in validation
• Responsive design
• TypeScript support