Fashionable Step Wizard Plugin for jQuery – Good Wizard

Good Wizard is a jQuery step wizard plugin that converts an ordinary HTML record and tab panel construction into a completely purposeful, multi-step navigation interface.

It is ideally suited for jQuery-based internet functions that want a production-ready element for registration varieties, checkout flows, survey screens, or configuration sequences. 

Options:

• TypeScript-rewritten: The v7 launch is an entire TypeScript rewrite with built-in kind declarations.
• 4 built-in themes: Ships with primary, arrows, glow, and drugs themes.
• Six transition results: default, fade, slideHorizontal, slideVertical, slideSwing, and css mode transitions.
• Darkish, mild, and auto modes: The auto mode reads the system shade scheme desire through matchMedia.
• Six step states: Particular person steps can carry accomplished, energetic, disabled, hidden, error, or warning states at runtime.
• Keyboard navigation: Left and proper arrow keys transfer between steps.
• Contact swipe navigation: Optionally available swipe help for cellular with a configurable pixel threshold.
• URL hash routing: Steps hyperlink to the URL hash with elective browser again and ahead button help.
• Dynamic content material loading: The contentLoader callback fetches step content material asynchronously on demand.
• Progress bar: A --sw-progress-percentage CSS customized property drives the progress bar ahead because the person advances.
• Horizontal overflow scrolling: The step navigation scrolls horizontally with mouse wheel help when steps exceed the container width.
• RTL help: Full right-to-left structure help for localized functions.
• CSS animation library compatibility: The css transition mode integrates with Animate.css and every other keyframe-based library.

Use Instances:

• Multi-Step Registration Types: Break lengthy sign-up varieties into digestible steps. Customers can evaluate and edit earlier steps.
• E‑commerce Checkout: Information clients via transport, fee, and order affirmation. The progress bar retains them knowledgeable.
• Survey or Questionnaire Wizards: Current questions one by one. Use step states to point which sections are full or have errors.
• Configuration Wizards: Assist customers arrange complicated software program or {hardware} by strolling them via choices step-by-step.

See Additionally:

How To Use It:

1. Load the core stylesheet SmartWizard.css and a theme CSS of your selection within the webpage.

<!-- Core Stylesheet -->
<hyperlink href="./dist/css/smartwizard.min.css" rel="stylesheet" />
<!-- Optionally available SmartWizard themes -->
<hyperlink href="./dist/css/themes/arrows.min.css" rel="stylesheet">
<hyperlink href="./dist/css/themes/primary.min.css" rel="stylesheet">
<hyperlink href="./dist/css/themes/glow.min.css" rel="stylesheet">
<hyperlink href="./dist/css/themes/drugs.min.css" rel="stylesheet">

2. The essential HTML construction for the good wizard. The plugin requiers a wrapper div containing a <ul class="nav"> for the step anchors and a <div class="tab-content"> for the step panels. The href on every anchor should match the id of the corresponding panel. The progress bar is elective. Embrace it solely once you need seen progress monitoring.

<div id="registrationWizard">

  <!-- Step navigation anchors -->
  <ul class="nav">
    <li class="nav-item">
      <a category="nav-link" href="#account-info">
        <span class="badge">1</span>
        Account Information
      </a>
    </li>
    <li class="nav-item">
      <a category="nav-link" href="#personal-details">
        <span class="badge">2</span>
        Private Particulars
      </a>
    </li>
    <li class="nav-item">
      <a category="nav-link" href="#preferences">
        <span class="badge">3</span>
        Preferences
      </a>
    </li>
    <li class="nav-item">
      <a category="nav-link" href="#affirmation">
        <span class="badge">4</span>
        Affirmation
      </a>
    </li>
  </ul>

  <!-- Step content material panels — every id should match the anchor href -->
  <div class="tab-content">
    <div id="account-info" class="tab-pane" position="tabpanel" aria-labelledby="account-info">
      <h4>Account Data</h4>
      <p>Enter your username and electronic mail handle.</p>
    </div>
    <div id="personal-details" class="tab-pane" position="tabpanel" aria-labelledby="personal-details">
      <h4>Private Particulars</h4>
      <p>Enter your full title and date of beginning.</p>
    </div>
    <div id="preferences" class="tab-pane" position="tabpanel" aria-labelledby="preferences">
      <h4>Preferences</h4>
      <p>Select your notification and show settings.</p>
    </div>
    <div id="affirmation" class="tab-pane" position="tabpanel" aria-labelledby="affirmation">
      <h4>Affirmation</h4>
      <p>Assessment your particulars and submit your registration.</p>
    </div>
  </div>

  <!-- Optionally available progress bar — tracks step development -->
  <div class="progress">
    <div class="progress-bar" position="progressbar" model="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
  </div>

</div>

3. Load the newest jQuery library and the jQuery Good Wizard plugin’s script on the finish of the webpage.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="./dist/js/jquery.smartWizard.min.js"></script>

4. Initialize the good wizard with default choices. That is it.

$(perform() {
  // Minimal initialization — all choices use defaults
  $('#registrationWizard').smartWizard();
});

5. All configuration choices. Go an choices object to smartWizard() at initialization or name setOptions() at runtime.

• initialStep (quantity): The zero-based index of the step to point out on load. Default is 0.
• theme (string): The visible theme. Accepts primary, arrows, glow, or drugs. The matching theme CSS file should be included individually.
• displayMode (string): The colour scheme. Accepts auto, darkish, mild, or none. auto reads the OS-level prefers-color-scheme desire.
• conduct.autoHeight (boolean): Resizes the content material space to match the energetic step panel top. Default is true.
• conduct.useUrlHash (boolean): Syncs the energetic step with the URL hash. Default is false.
• conduct.supportBrowserHistory (boolean): Prompts browser again and ahead button help. Requires useUrlHash: true. Default is false.
• navigation.enabled (boolean): Lets customers click on step anchors to navigate straight. Default is true.
• navigation.alwaysClickable (boolean): Lets customers click on any step at any time, no matter completion state. Default is false.
• navigation.accomplished.enabled (boolean): Marks every visited step as accomplished on departure. Default is true.
• navigation.accomplished.completeAllPreviousSteps (boolean): Marks all prior steps as accomplished when navigating through URL hash. Default is true.
• navigation.accomplished.clearOnBack (boolean): Removes the finished state from a step when the person navigates backward previous it. Default is false.
• navigation.accomplished.clickable (boolean): Lets customers click on again to beforehand accomplished steps. Default is true.
• transition.impact (string): The step change animation. Accepts none, fade, slideHorizontal, slideVertical, slideSwing, or css. Default is default.
• transition.velocity (quantity): Animation period in milliseconds. Not utilized when impact is css. Default is 400.
• transition.easing (string): jQuery easing perform title. Requires the jQuery Easing plugin. Not utilized when impact is css.
• transition.css.prefix (string): CSS class prefix for CSS-mode animations (e.g., animate__animated for Animate.css).
• transition.css.ahead.present (string): CSS animation class utilized to the incoming panel throughout ahead navigation.
• transition.css.ahead.cover (string): CSS animation class utilized to the outgoing panel throughout ahead navigation.
• transition.css.backward.present (string): CSS animation class utilized to the incoming panel throughout backward navigation.
• transition.css.backward.cover (string): CSS animation class utilized to the outgoing panel throughout backward navigation.
• toolbar.place (string): Controls toolbar placement. Accepts none, high, backside, or each. Default is backside.
• toolbar.buttons.showNext (boolean): Reveals or hides the Subsequent button. Default is true.
• toolbar.buttons.showPrevious (boolean): Reveals or hides the Earlier button. Default is true.
• toolbar.extraElements (string | jQuery object): Further HTML or jQuery parts appended to the toolbar alongside the navigation buttons.
• keyboardNavigation.enabled (boolean): Prompts left and proper arrow key navigation. Default is true.
• keyboardNavigation.keys.left (array): Key codes that set off backward navigation. Default is [37].
• keyboardNavigation.keys.proper (array): Key codes that set off ahead navigation. Default is [39].
• swipeNavigation.enabled (boolean): Prompts contact swipe navigation on cellular. Default is false.
• swipeNavigation.threshold (quantity): Minimal swipe distance in pixels to register a navigation gesture. Default is 50.
• localization.buttons.subsequent (string): Label textual content for the Subsequent button. Default is 'Subsequent'.
• localization.buttons.earlier (string): Label textual content for the Earlier button. Default is 'Earlier'.
• stepStates.accomplished (array): Zero-based step indexes to pre-mark as accomplished on initialization.
• stepStates.disabled (array): Step indexes to disable on initialization.
• stepStates.hidden (array): Step indexes to cover on initialization.
• stepStates.error (array): Step indexes to pre-mark with an error state on initialization.
• stepStates.warning (array): Step indexes to pre-mark with a warning state on initialization.
• scrollToView (boolean): Scrolls the energetic step anchor into the viewport on every step change. Default is false.
• contentLoader (perform | null): A callback for dynamic content material loading. Receives (stepIndex, stepDirection, stepPosition, stepElement, callback). Name callback(htmlContent) when the content material is prepared.

$('#registrationWizard').smartWizard({
  initialStep: 0, // Begin on step one
  theme: 'arrows', // Use the arrows theme (arrows.min.css should be included)
  displayMode: 'auto', // Observe the system darkish/mild desire

  conduct: {
    autoHeight: true, // Resize the content material space to every step's top
    useUrlHash: true, // Sync energetic step with the URL hash
    supportBrowserHistory: true // Reply to browser again/ahead navigation
  },

  navigation: {
    enabled: true,
    alwaysClickable: false, // Customers should full steps so as
    accomplished: {
      enabled: true,
      completeAllPreviousSteps: true,
      clearOnBack: false,
      clickable: true
    }
  },

  transition: {
    impact: 'fade', // Crossfade between step panels
    velocity: 350 // 350ms fade period
  },

  toolbar: {
    place: 'backside',
    buttons: {
      showNext: true,
      showPrevious: true
    },
    // Append a customized Save Draft button to the toolbar
    extraElements: '<button class="btn" id="btn-save-draft">Save Draft</button>'
  },

  keyboardNavigation: {
    enabled: true,
    keys: {
      left: [37], // Left arrow key
      proper: [39] // Proper arrow key
    }
  },

  swipeNavigation: {
    enabled: true, // Activate swipe navigation on contact gadgets
    threshold: 60 // Require not less than 60px of horizontal swipe
  },

  localization: {
    buttons: {
      subsequent: 'Proceed', // Customized Subsequent button label
      earlier: 'Go Again' // Customized Earlier button label
    }
  },

  stepStates: {
    accomplished: [],
    disabled: [3], // Lock the affirmation step on load
    hidden: [],
    error: [],
    warning: []
  },

  scrollToView: false,

  // Load step content material from an endpoint on demand
  contentLoader: perform(stepIndex, stepDirection, stepPosition, stepElement, callback) {
    $.get('/api/steps/' + stepIndex, perform(html) {
      callback(html); // Go the fetched HTML to the wizard
    });
  }
});

6. Accessible occasion handlers.

// Fires as soon as after the wizard completes its inside setup
$('#registrationWizard').on('initialized.sw', perform(e) {
  console.log('Wizard initialized.');
});

// Fires after the preliminary step renders for the primary time
$('#registrationWizard').on('loaded.sw', perform(e) {
  console.log('First step is now seen.');
});

// Fires earlier than the wizard leaves the present step
// Return false from the handler to dam navigation (for validation)
$('#registrationWizard').on('depart.sw', perform(e, args) {
  // args incorporates: stepIndex, nextStepIndex, stepElement, stepDirection, stepPosition
  var stepIsValid = validateCurrentStep(args.stepIndex);
  if (!stepIsValid) {
    alert('Please full all required fields earlier than persevering with.');
    return false; // Blocks the step transition
  }
});

// Fires after a brand new step turns into seen
$('#registrationWizard').on('proven.sw', perform(e, args) {
  // args incorporates: stepIndex, stepElement, stepDirection, stepPosition
  console.log('Now on step ' + args.stepIndex + ' (' + args.stepDirection + ')');
});

7. Accessible API strategies to create your personal wizard controls.

const wizard = $('#registrationWizard');

// Advance to the following out there step
wizard.smartWizard('subsequent');

// Return to the earlier out there step
wizard.smartWizard('prev');

// Navigate on to step index 2 (third step, zero-based)
wizard.smartWizard('goToStep', 2);

// Power navigation to step 2; marks all previous steps as accomplished
wizard.smartWizard('goToStep', 2, true);

// Reset the wizard to its preliminary state and first step
wizard.smartWizard('reset');

// Replace configuration at runtime — no web page reload required
wizard.smartWizard('setOptions', { theme: 'drugs', displayMode: 'darkish' });

// Disable steps at indexes 1 and a couple of
wizard.smartWizard('setState', [1, 2], 'disable');

// Mark step 3 with an error state (turns it purple in most themes)
wizard.smartWizard('setState', [3], 'error');

// Mark step 2 with a warning state
wizard.smartWizard('setState', [2], 'warning');

// Re-enable beforehand disabled steps
wizard.smartWizard('unsetState', [1, 2], 'disable');

// Present the loading spinner (helpful when fetching async content material)
wizard.smartWizard('loader', 'present');

// Conceal the loading spinner
wizard.smartWizard('loader', 'cover');

// Manually recalculate and apply the content material space top
wizard.smartWizard('adjustHeight');

// Retrieve the present step index and whole step depend
const information = wizard.smartWizard('getStepInfo');
// Returns: { currentStep: 1, totalSteps: 4 }
console.log('Step ' + information.currentStep + ' of ' + information.totalSteps);

Options

FAQs:

Q: How do I validate a type step earlier than the person strikes ahead?

A: Bind a handler to the depart.sw occasion and return false to dam navigation. The plugin calls each depart.sw handler earlier than making an attempt the transition. Run your validation logic in opposition to args.stepIndex or question the fields inside args.stepElement. A return false in any handler stops the transfer and retains the person on the present step.

Q: Can Good Wizard v7 work alongside Bootstrap 5 or Tailwind CSS?

A: Sure. The plugin applies its personal scoped CSS courses and doesn’t battle with utility-first frameworks. The toolbar renders normal <button> parts you’ll be able to model freely. Step panels are plain div parts, so you’ll be able to put any Bootstrap grid row or Tailwind element inside them.

Q: The transition glints on step one change. How do I repair it?

A: This normally happens when autoHeight calculates a zero-height panel earlier than the content material renders. Set conduct.autoHeight: true and name wizard.smartWizard('adjustHeight') manually after any dynamic content material populates a panel. If the glint persists on slideHorizontal or slideVertical transitions, verify that the wizard wrapper has overflow: hidden in your stylesheet .

Q: How do I load step content material from an API on demand?

A: Use the contentLoader possibility. Go a perform that receives (stepIndex, stepDirection, stepPosition, stepElement, callback). Contained in the perform, make your Ajax request and move the returned HTML string to callback(html). Name wizard.smartWizard('loader', 'present') firstly of the request and wizard.smartWizard('loader', 'cover') contained in the callback to show the built-in loading indicator through the fetch.

Q: Can I add a customized button to the toolbar?

A: Sure. Go an HTML string or a jQuery object to toolbar.extraElements. The plugin appends it to the toolbar alongside the Subsequent and Earlier buttons. For instance, toolbar.extraElements: '<button class="btn" id="btn-save">Save Progress</button>' provides a Save button. Bind its click on handler individually with normal jQuery.

Changelog:

v7.1.2 (2026-10-19)

v7.1.0 (2026-10-15)

• Modified: HTML class names prefixed with sw- to keep away from styling and structure conflicts with CSS frameworks like Bootstrap and Tailwind (.sw-nav, .sw-nav-item, .sw-nav-link, .sw-tab-content, .sw-tab-pane, .sw-progress, .sw-progress-bar, .sw-badge)
• Modified: keyboardNavigation.keys.left and proper now use normal KeyboardEvent.key string names ([‘ArrowLeft’] / [‘ArrowRight’]) as an alternative of deprecated numeric key codes
• Modified: Keyboard navigation now robotically ignores key occasions originating inside <enter>, <textarea>, and <choose> parts
• Safety: Added contentSanitize: true default in contentLoader to soundly parse HTML utilizing $.parseHTML and stop DOM XSS
• Efficiency: Throttled/debounced fixHeight utilizing requestAnimationFrame throughout window resize to stop structure thrashing and primary thread blocking
• Efficiency: Optimized getShowable loop to get rid of pointless intermediate jQuery object allocations
• Improved: Nav bar scroll navigation buttons (scrollCheck, scrollAnchor):
• Improved: scrollToView now easily facilities the energetic step inside the navigation bar (scrollNavToStep) as an alternative of scrolling your complete window
• Bugfixes

v7.0.2 (2026-06-13)

• CSS Corrections and some updates

v7 (2026-03-05)

• Added: Full rewrite in TypeScript with bundled kind declarations (dist/sorts/)
• Added: displayMode possibility — auto (follows system desire) | darkish | mild | none
• Added: swipeNavigation possibility — swipe left/proper on contact gadgets to navigate steps (enabled, threshold)
• Added: Horizontal mouse-wheel scroll on the nav bar when steps overflow
• Added: conduct.useUrlHash and conduct.supportBrowserHistory choices change previous enableUrlHash / backButtonSupport
• Added: navigation.accomplished.clickable possibility — management whether or not accomplished steps are re-clickable
• Added: DATA_ATTRIBUTES constants for data-theme attribute administration
• Added: contentLoader callback for dynamic step content material loading
• Added: CSS animation help for transitions through transition.css (prefix, ahead, backward class teams)
• Added: Nav scroll buttons proven robotically when nav content material overflows
• Added: UMD, ESM, and CJS construct outputs
• Added: scrollToView possibility — scroll the energetic step anchor into view on step change
• Modified: All choices restructured with clearer namespacing
• Modified: Occasions renamed for consistency
• Modified: reset() not manipulates URL hash until useUrlHash + supportBrowserHistory are each enabled
• Modified: transition.css animations require the ingredient to be seen earlier than class is utilized (fixes animationend not firing)
• Modified: this.default(…) references inside transition handlers changed with direct transitions.default(…) to stop TypeError when handlers are invoked with out object context
• Modified: Progressbar width makes use of .toFixed(2) for cleaner CSS values
• Modified: ANIMATIONEND / ANIMATIONCANCEL occasions are actually namespaced (.sw)
• Fastened: that is undefined TypeError in CSS / fade / slide transition fallbacks
• Fastened: animationend occasion not firing on hidden parts (ingredient now proven earlier than animation class is utilized)
• Fastened: Double-invocation of transition full callback (guard flag added)
• Fastened: URL hash incorrectly at all times set; now solely when each useUrlHash and supportBrowserHistory are true
• Eliminated: justified possibility (structure dealt with by CSS)
• Eliminated: cycleNavigation possibility
• Eliminated: STEPCHANGE and RESET occasions (use proven.sw and deal with externally)

v6.0.6 (2022-10-03)

• Fastened: Historical past again on step1 not working

v6.0.5 (2022-08-08)

• Fastened: unDoneOnBackNavigation not working

v6.0.4 (2022-07-31)

• Modified: Code optimizations

v6.0.3 (2022-07-31)

• Fastened: Navigation not correctly maintained when navigate quick

v6.0.1 (2022-06-27)

• Added: Help for jQuery Slim model
• Added: Public perform fixHeight.
• Added: Public perform setState.
• Added: Public perform unsetState.
• Added: Public perform getStepInfo to get step index and whole steps.
• Added: goToStep perform with pressure parameter.
• Added: Constructed-in progressbar
• Added: New themes, Sq. and Spherical
• Added: Dots and Sq. these can have progressbar on navigation by including nav-progress CSS Class.
• Added: Colours are changable dynamically utilizing CSS variables.
• Added: Bootstrap 5 help
• Added: Num(badge) class help on all themes
• Added: RTL (Proper-to-left language) help
• Added: initialized occasion
• Added: Transfer CSS class names to choices
• Added: Transition animations could be prolonged
• Added: CSS Animations help on transition animations. Helps Animate.css
• Modified: JavaScript and CSS code is rewritten
• Modified: Imporoved all CSS themes
• Modified: Made a lot of the choices can modified with setOptions perform
• Modified: Rewritten possibility names and properties with minimal and significant names
• Modified: Improved transition animations
• Fastened: Reset does not clear the prevailing steps of the error state. 
• Fastened: goToStep technique fails to acknowledge the right step 
• Fastened: URL Navigation to verify if step visited.
• Fastened: Fastened and likewise added fixHeight public perform to refresh content material top.
• Fastened: CSS Recordsdata are empty
• Fastened: stepNumber is inaccurate on showStep occasion when no transition
• Fastened: showStep displaying Null as an alternative of index 0 on initializing
• Fastened: showStep’s stepIndex incorporates earlier index
• Fastened: Content material not displaying when used inside a Bootrap 4 modal
• Fastened: Different fixes
• Eliminated: this.choices.toolbar.buttonPosition is eliminated
• Eliminated: cycleNavigation is eliminated
• Eliminated: Darkish mode is eliminated. Added CSS variable help to alter any colours. See instance for darkish colours.

v5.1.1 (2020-07-11)

• Added: Accessibility
• Added: Darkish Mode help for all themes
• Added: New theme (Progress)
• Added: leaveStep occasion has new parameter => nextStepIndex
• Added: UMD (Common Module Definition) help
• Fastened: Incorrect stepDirection on leaveStep occasion

v5.0.0 (2020-05-24)

• Full rewrite of JavaScript and CSS
• CSS to SCSS
• Up to date all construct packages
• Exterior Ajax content material help through Promise
• New navigation animations added
• New themes added
• New public capabilities
• New content material loading occasion
• Standalone CSS with Bootstrap compatibility

v4.4.1 (2020-02-16)

• Added goToStep and hiddenSteps strategies
• Construct system packages up to date to newest out there.

v4.3.1 (2018-03-12)

v4.2.2 (2017-03-27)

• Small fixes and a number of wizard instance added

v4.2.1 (2017-03-27)

• Dots and Circles themes up to date to new design and made responsive

v4.1.7 (2017-02-21)

• Dots and Circles themes up to date to new design and made responsive

v4.1.5 (2017-02-01)

v4.1.2 (2017-01-09)

v4.1.1 (2016-12-08)

• many enhancements and additions

2016-11-16

• Up to date to model v4.0.5

This superior jQuery plugin is developed by techlab. For extra Superior Usages, please verify the demo web page or go to the official web site.