PHPackages                             techlab/smartwizard - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. techlab/smartwizard

ActiveLibrary[Utility & Helpers](/categories/utility)

techlab/smartwizard
===================

The awesome jQuery step wizard plugin

v6.0.6(3y ago)789101.6k↓62.8%241[22 issues](https://github.com/techlab/SmartWizard/issues)[2 PRs](https://github.com/techlab/SmartWizard/pulls)2MITTypeScriptCI passing

Since Oct 31Pushed 1w ago42 watchersCompare

[ Source](https://github.com/techlab/SmartWizard)[ Packagist](https://packagist.org/packages/techlab/smartwizard)[ Docs](http://techlaboratory.net/jquery-smartwizard)[ Fund](https://www.paypal.me/dipuraj)[ GitHub Sponsors](https://github.com/techlab)[ RSS](/packages/techlab-smartwizard/feed)WikiDiscussions master Synced 2d ago

READMEChangelog (10)DependenciesVersions (21)Used By (2)

jQuery Smart Wizard v7
======================

[](#jquery-smart-wizard-v7)

### A modern and accessible step wizard plugin for jQuery

[](#a-modern-and-accessible-step-wizard-plugin-for-jquery)

[![npm version](https://camo.githubusercontent.com/2822e716dc5934182a8629a683f70a0c67cba3b7ca970b621cec0155a9a5df15/68747470733a2f2f62616467652e667572792e696f2f6a732f736d61727477697a6172642e737667)](https://www.npmjs.com/package/smartwizard)[![jsDelivr Hits](https://camo.githubusercontent.com/9f4b60a724f71827cf615529ea87e5952407f245f17c1187388a4e2a0370544d/68747470733a2f2f646174612e6a7364656c6976722e636f6d2f76312f7061636b6167652f6e706d2f736d61727477697a6172642f62616467653f7374796c653d726f756e646564)](https://www.jsdelivr.com/package/npm/smartwizard)[![Npm Downloads](https://camo.githubusercontent.com/dfc77193f27d45833b8c79666b402e91fe46ce8d5840503fea11b4a3cf2eb5c0/68747470733a2f2f62616467656e2e6e65742f6e706d2f646d2f736d61727477697a6172643f69636f6e3d6e706d)](https://www.npmjs.com/package/smartwizard)[![GitHub license](https://camo.githubusercontent.com/7013272bd27ece47364536a221edb554cd69683b68a46fc0ee96881174c4214c/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4d49542d626c75652e737667)](https://raw.githubusercontent.com/techlab/jquery-smartwizard/master/LICENSE)[![GitHub Repo](https://camo.githubusercontent.com/73bfea34255c2faca5e067befc2af3322622ec61c6e1a48a6902c04814efab24/68747470733a2f2f62616467656e2e6e65742f62616467652f69636f6e2f6a71756572792d736d61727477697a6172643f69636f6e3d676974687562266c6162656c3d26636f6c6f723d306461346433)](https://github.com/techlab/jquery-smartwizard)[![GitHub Sponsor](https://camo.githubusercontent.com/5be0458640e24974f9d46e0648fee60f3abcc9e6eceb5b91bd671d27b609f782/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f53706f6e736f722d746563686c61622d626c75652e7376673f6c6f676f3d676974687562)](https://github.com/sponsors/techlab)

**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](https://techlaboratory.net/jquery-smartwizard)
- [Documentation](https://techlaboratory.net/jquery-smartwizard#documentation)
- [Demos](https://techlaboratory.net/jquery-smartwizard#demo)
- [StackOverflow Q&A](https://stackoverflow.com/questions/tagged/smart-wizard)
- [GitHub Issues](https://github.com/techlab/jquery-smartwizard/issues)

Screenshots
-----------

[](#screenshots)

[![Smart Wizard](https://camo.githubusercontent.com/08b1cb662726305934fe66fdf0a1a1ccb77433bdd20b760ffd1dc07a543e227e/68747470733a2f2f746563686c61626f7261746f72792e6e65742f6d656469612f6a71756572792d736d6172742d77697a6172642f76372f616c6c2d73637265656e732e706e67)](https://camo.githubusercontent.com/08b1cb662726305934fe66fdf0a1a1ccb77433bdd20b760ffd1dc07a543e227e/68747470733a2f2f746563686c61626f7261746f72792e6e65742f6d656469612f6a71756572792d736d6172742d77697a6172642f76372f616c6c2d73637265656e732e706e67)

Requirements
------------

[](#requirements)

- [jQuery](https://jquery.com/) >= 1.11.1 (jQuery 4.x and jQuery Slim versions are also supported)

Installation
------------

[](#installation)

### [NPM](https://www.npmjs.com/package/smartwizard)

[](#npm)

```
npm install smartwizard

```

### [Yarn](https://yarn.pm/smartwizard)

[](#yarn)

```
yarn add smartwizard

```

### [CDN - jsDelivr](https://www.jsdelivr.com/package/npm/smartwizard)

[](#cdn---jsdelivr)

```

```

### [CDN - UNPKG](https://unpkg.com/browse/smartwizard/)

[](#cdn---unpkg)

```

```

### ES Module / Bundler

[](#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

[](#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)

#### [Download from GitHub](https://github.com/techlab/jquery-smartwizard/archive/master.zip)

[](#download-from-github)

Features
--------

[](#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](https://animate.style/))
- 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
-----

[](#usage)

Include SmartWizard CSS

```

```

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

```

            1
            Step Title

            2
            Step Title

            3
            Step Title

            4
            Step Title

            Step 1 content

            Step 2 content

            Step 3 content

            Step 4 content

```

### Include JavaScript

[](#include-javascript)

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

Include SmartWizard plugin JavaScript

```

```

### Initialize the jQuery SmartWizard

[](#initialize-the-jquery-smartwizard)

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

That's it!

Please see the detailed [documentation](https://techlaboratory.net/jquery-smartwizard#documentation) for implementation and usage.

### All options

[](#all-options)

```
$('#smartwizard').smartWizard({
    initialStep: 0,         // Initial selected step (0 = first step)
    theme: 'basic',         // Theme: basic | arrows | dots | round | square | progress (ensure related CSS is included)
    displayMode: 'auto',    // Display mode: auto (system preference) | dark | light | none

    behavior: {
        autoHeight: true,             // Auto-adjust content height to active step
        useUrlHash: false,            // Enable step selection via URL hash
        supportBrowserHistory: false  // Enable browser back/forward button support
    },

    navigation: {
        enabled: true,          // Enable/disable anchor click navigation
        alwaysClickable: false, // Allow clicking any step at any time
        completed: {
            enabled: true,                  // Mark visited steps as completed
            completeAllPreviousSteps: true, // Mark all prior steps done when navigating via URL hash
            clearOnBack: false,             // Clear completed state when navigating backward
            clickable: true                 // Allow navigating back to completed steps
        }
    },

    transition: {
        effect: 'default',  // none | fade | slideHorizontal | slideVertical | slideSwing | css
        speed: 400,         // Animation speed in ms (not used for 'css')
        easing: '',         // jQuery easing (requires easing plugin; not used for 'css')
        css: {              // Settings used only when effect is 'css'
            prefix: '',     // CSS animation class prefix (e.g. 'animate__animated')
            forward:  { show: '', hide: '' },  // Classes for forward animation
            backward: { show: '', hide: '' }   // Classes for backward animation
        }
    },

    toolbar: {
        position: 'bottom',        // none | top | bottom | both
        buttons: {
            showNext: true,        // Show/hide the Next button
            showPrevious: true     // Show/hide the Previous button
        },
        extraElements: ''          // Additional HTML or jQuery elements to append to toolbar
    },

    keyboardNavigation: {
        enabled: true,             // Enable left/right arrow key navigation
        keys: {
            left: [37],            // Key codes for backward navigation
            right: [39]            // Key codes for forward navigation
        }
    },

    swipeNavigation: {
        enabled: false,            // Enable swipe navigation on touch devices
        threshold: 50              // Minimum swipe distance in px to trigger navigation
    },

    localization: {
        buttons: {
            next: 'Next',
            previous: 'Previous'
        }
    },

    stepStates: {
        completed: [],  // Step indexes to mark as completed on init
        disabled: [],   // Step indexes to disable on init
        hidden: [],     // Step indexes to hide on init
        error: [],      // Step indexes to mark as error on init
        warning: []     // Step indexes to mark as warning on init
    },

    scrollToView: false, // Scroll the active step anchor into view on step change

    contentLoader: null  // function(stepIndex, stepDirection, stepPosition, stepElement, callback)
                         // Dynamically load step content; call callback(htmlContent) when ready
});
```

### Events

[](#events)

```
// Fires after the wizard is fully initialized
$('#smartwizard').on('initialized.sw', function(e) { });

// Fires after the initial step is shown for the first time
$('#smartwizard').on('loaded.sw', function(e) { });

// Fires before leaving the current step
// Return false from the handler to cancel navigation
$('#smartwizard').on('leave.sw', function(e, args) {
    // args: { stepIndex, nextStepIndex, stepElement, stepDirection, stepPosition }
});

// Fires after a new step is shown
$('#smartwizard').on('shown.sw', function(e, args) {
    // args: { stepIndex, stepElement, stepDirection, stepPosition }
});
```

### Public methods

[](#public-methods)

```
const wizard = $('#smartwizard');

wizard.smartWizard('next');                  // Navigate to next step
wizard.smartWizard('prev');                  // Navigate to previous step
wizard.smartWizard('goToStep', 2);           // Go to step index 2
wizard.smartWizard('goToStep', 2, true);     // Go to step index 2 (force, marks previous as done)
wizard.smartWizard('reset');                 // Reset wizard to initial state
wizard.smartWizard('setOptions', { theme: 'arrows' }); // Update options at runtime

wizard.smartWizard('setState',   [1, 2], 'disable'); // Disable steps 1 and 2
wizard.smartWizard('setState',   [3],    'error');     // Mark step 3 as error
wizard.smartWizard('unsetState', [1, 2], 'disable'); // Re-enable steps 1 and 2

wizard.smartWizard('loader', 'show'); // Show loader
wizard.smartWizard('loader', 'hide'); // Hide loader

wizard.smartWizard('adjustHeight'); // Manually re-adjust content height

const info = wizard.smartWizard('getStepInfo');
// Returns: { currentStep, totalSteps }
```

License
-------

[](#license)

**jQuery SmartWizard v7** is dual-licensed:

**[MIT License](https://github.com/techlab/jquery-smartwizard/blob/master/LICENSE)** — Free for personal and open-source projects.

**[Commercial License](https://techlaboratory.net/jquery-smartwizard#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
----------

[](#contribute)

If you like the project please support with your contribution.

[GitHub Sponsor](https://github.com/sponsors/techlab)

Happy Coding ❤️

###  Health Score

60

—

FairBetter than 98% of packages

Maintenance63

Regular maintenance activity

Popularity57

Moderate usage in the ecosystem

Community35

Small or concentrated contributor base

Maturity72

Established project with proven stability

 Bus Factor1

Top contributor holds 67.2% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~127 days

Recently: every ~16 days

Total

18

Last Release

1370d ago

Major Versions

v4.4.1 → v5.0.02020-05-23

v5.x-dev → v6.0.12022-06-26

### Community

Maintainers

![](https://www.gravatar.com/avatar/5c126b08e48aa49997c9019a4b1a281a17194eddbb5311e526f938a132fff610?d=identicon)[techlab](/maintainers/techlab)

---

Top Contributors

[![techlab](https://avatars.githubusercontent.com/u/511092?v=4)](https://github.com/techlab "techlab (82 commits)")[![rabrowne85](https://avatars.githubusercontent.com/u/8293543?v=4)](https://github.com/rabrowne85 "rabrowne85 (23 commits)")[![fabriciobegalli](https://avatars.githubusercontent.com/u/2120577?v=4)](https://github.com/fabriciobegalli "fabriciobegalli (3 commits)")[![simkojacint](https://avatars.githubusercontent.com/u/5919809?v=4)](https://github.com/simkojacint "simkojacint (3 commits)")[![mul14](https://avatars.githubusercontent.com/u/113989?v=4)](https://github.com/mul14 "mul14 (1 commits)")[![nafplann](https://avatars.githubusercontent.com/u/7114259?v=4)](https://github.com/nafplann "nafplann (1 commits)")[![AnushkaKRajasingha](https://avatars.githubusercontent.com/u/6707401?v=4)](https://github.com/AnushkaKRajasingha "AnushkaKRajasingha (1 commits)")[![nano-rgba](https://avatars.githubusercontent.com/u/268612602?v=4)](https://github.com/nano-rgba "nano-rgba (1 commits)")[![pierlon](https://avatars.githubusercontent.com/u/16200219?v=4)](https://github.com/pierlon "pierlon (1 commits)")[![robertobermejo](https://avatars.githubusercontent.com/u/221931?v=4)](https://github.com/robertobermejo "robertobermejo (1 commits)")[![sfulham](https://avatars.githubusercontent.com/u/40906364?v=4)](https://github.com/sfulham "sfulham (1 commits)")[![naiquevin](https://avatars.githubusercontent.com/u/584860?v=4)](https://github.com/naiquevin "naiquevin (1 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (1 commits)")[![felipealvesprestes](https://avatars.githubusercontent.com/u/9203851?v=4)](https://github.com/felipealvesprestes "felipealvesprestes (1 commits)")[![mjl321](https://avatars.githubusercontent.com/u/28592052?v=4)](https://github.com/mjl321 "mjl321 (1 commits)")

---

Tags

ajax-supportbootstrapbootstrap-supporthacktoberfestjavascriptjqueryjquery-pluginjquery-smart-wizardjquery-wizard-pluginjsdelivrstep-wizardtypescriptuiuikitwizarduijquerybootstrapwizardjquery-pluginstepwizard plugin

### Embed Badge

![Health badge](/badges/techlab-smartwizard/health.svg)

```
[![Health](https://phpackages.com/badges/techlab-smartwizard/health.svg)](https://phpackages.com/packages/techlab-smartwizard)
```

###  Alternatives

[snapappointments/bootstrap-select

The jQuery plugin that brings select elements into the 21st century with intuitive multiselection, searching, and much more. Now with Bootstrap 4 support.

9.8k501.2k3](/packages/snapappointments-bootstrap-select)[kartik-v/bootstrap-popover-x

Bootstrap Popover Extended - Popover with modal behavior, styling enhancements and more.

1163.6M3](/packages/kartik-v-bootstrap-popover-x)[kartik-v/yii2-editable

An enhanced editable widget for Yii 2.0 that allows easy editing of displayed data with numerous configuration possibilities.

1173.4M60](/packages/kartik-v-yii2-editable)[kartik-v/bootstrap-tabs-x

Extended Bootstrap Tabs with ability to align tabs in multiple ways, add borders, rotated titles, and more.

1021.4M1](/packages/kartik-v-bootstrap-tabs-x)[kartik-v/yii2-widget-timepicker

Enhanced Yii2 wrapper for the bootstrap timepicker plugin (sub repo split from yii2-widgets)

445.2M14](/packages/kartik-v-yii2-widget-timepicker)[kartik-v/yii2-widget-rating

A Yii2 widget for the simple yet powerful bootstrap-star-rating plugin with fractional rating support (sub repo split from yii2-widgets)

474.3M8](/packages/kartik-v-yii2-widget-rating)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)