jquery-smartwizard

jQuery Smart Wizard v7

A modern and accessible step wizard plugin for jQuery

jQuery Smart Wizard v7 is a lightweight and extensible step wizard plugin built for modern web applications using jQuery. It provides a clean, intuitive interface for managing multi-step processes such as registration forms, checkout screens, surveys, configuration flows, and more.

jQuery Smart Wizard v7 focuses on usability and flexibility. It offers customizable navigation styles, toolbars, transitions, and events, making it easy to integrate into existing applications. Whether you’re building a simple step form or a complex workflow, Smart Wizard adapts to your needs.

• Homepage
• Documentation
• Demos
• StackOverflow Q&A
• GitHub Issues

Screenshots

Requirements

• jQuery >= 1.11.1 (jQuery 4.x and jQuery Slim versions are also supported)

Installation

NPM

npm install smartwizard

Yarn

yarn add smartwizard

CDN - jsDelivr

CDN - UNPKG

ES Module / Bundler

import $ from "jquery";
import "smartwizard/dist/css/smartwizard.min.css";
import "smartwizard/dist/css/themes/arrows.min.css";
import smartWizard from "smartwizard";

$(function() {
    $('#smartwizard').smartWizard();
});

CommonJS / Webpack

var $ = require("jquery");
require("smartwizard/dist/css/smartwizard.min.css");
require("smartwizard/dist/css/themes/arrows.min.css");
const smartWizard = require("smartwizard");

$(function() {
    $('#smartwizard').smartWizard();
});

Download

Download from GitHub

Features

• Easy to implement with minimal and clean HTML structure
• Fully rewritten in TypeScript (v7) with built-in type declarations
• Compatible with all modern browsers
• Responsive and mobile-ready design
• Multiple built-in themes (basic | arrows | glow | pills), easily customizable
• Flexible color customization using CSS variables
• Light / dark / auto display mode support
• Built-in transition animations (default | fade | slideHorizontal | slideVertical | slideSwing | css)
• Compatible with CSS animation libraries (including Animate.css)
• Extendable transition system with custom animation handlers
• Comprehensive step states: completed, active, disabled, hidden, error, warning
• Runtime option updates via setOptions()
• Automatic horizontal scrolling when steps overflow (mouse wheel supported)
• Keyboard navigation (left/right arrow keys)
• Form validation support via leave.sw event
• RTL (right-to-left language) support
• Accessible navigation controls
• Support for external navigation controls
• Dynamic content loading via contentLoader callback
• Auto content height adjustment
• Customizable toolbar with support for additional HTML elements
• Integrated progress bar
• URL hash navigation with browser history integration
• UMD (Universal Module Definition) compatible
• Supports jQuery >= 1.11.1, jQuery 3.x, jQuery 4.x, and jQuery Slim versions

Usage

Include SmartWizard CSS

Include HTML (This is the basic HTML markup. Customize it by adding your own step content).

            Step Title
          
        

        

          
            2
            Step Title
          
        

        

          
            3
            Step Title
          
        

        

          
            4
            Step Title
          
        

    

    

        

        

        

    

    
    

    

Include JavaScript

Note:- jQuery should be included before the jQuery SmartWizard JavaScript file.

Include SmartWizard plugin JavaScript

Initialize the jQuery SmartWizard

$(function() {
  // SmartWizard initialize
  $('#smartwizard').smartWizard();
});

That's it!

Please see the detailed documentation for implementation and usage.

All options

…

Events

…

Public methods

…

License

jQuery SmartWizard v7 is dual-licensed:

MIT License — Free for personal and open-source projects.

Commercial License — Required for closed-source, SaaS, or any commercial projects.
If you use jQuery SmartWizard v7 in a commercial or client application, please purchase a commercial license.

Commercial licenses help support continued development, maintenance, and new features.

Contribute

If you like the project please support with your contribution.

GitHub Sponsor

Happy Coding ❤️