Home Metronic Hire Us Buy Now
The World’s #1 Bootstrap 4 & 5 HTML, Angular 11, React, VueJS & Laravel
Admin Dashboard Theme

## Wizard

### Overview

`KTWizard` is a Metronic's custom plugin defined in `[metronic]/theme/html/[demo]/src/js/components/wizard.js`.

### Initialization

First parameter is the id, class, or tag of the HTML element. The second parameter is for the options.

    wizard = new KTWizard('kt_wizard_v1', {
    	startStep: 1, // Initial active step number
    	clickableSteps: true,  // Allow step clicking
    });

    wizard.goTo(2); // Change to a step by step number
    alert(wizard.getStep()); // Get current step number. For more info see the full API functions list in the below table.

### Options

    var options = {
    	startStep: 1, // Initial active step number
    	clickableSteps: true,  // Allow step clicking
    };

Field | Type | Description
--- | --- | ---
`startStep` | `number` | The page number of step to start at the initial load.

Sample
    startStep: 1

`clickableSteps` | `boolean` | Enable/disable wizard step click on the wizard navigation bar.

Sample
    clickableSteps: true

`navigation` | `boolean` | Enable/disable wizard previouse and next navigation default handlers to allow attaching custom navgiation handlers that allows implementing custom form validaiton flow.

Sample
    navigation: false

    // Wizard DOM element
    var wizardEl = document.querySelector('#kt_wizard');

    // Initialize wizard object
    var wizardObj = new KTWizard(_wizardEl, {
    	startStep: 1, // initial active step number
    	clickableSteps: false, // allow step clicking
    	navigation: false // disable default navigation handlers,
    });

    // Wizard's navigation buttons
    var prevButton = wizardEl.querySelector('[data-wizard-type="action-prev"]');
    var nextButton = wizardEl.querySelector('[data-wizard-type="action-next"]');

    // Custom navigation handlers
    prevButton.addEventListener('click', function() {
    	// Go back to the previouse step
    	wizardObj.goPrev();
    });​

    nextButton.addEventListener('click', function() {
    	var validation = false;

    	// do some validation here

    	// Go to the next step only if validation is success
    	if (validation === true) {
    		wizardObj.goNext();
    	}
    });

### Attributes

Atrribute | Description
--- | ---
`data-wizard-state` | Set the initial KTWizard initial state. The state value will be changed based on interaction to the wizard.

Value | Description
--- | ---
`current` | Current wizard step.
`done` | All the previous wizard page step.
`pending` | All the next wizard page step.

`data-wizard-type` |

Value | Description
--- | ---
`step` | Define element as a step number button.
`step-info` | Define element as a step info.
`step-content` | Define element as a step content.
`action-submit` | Define element as action submit button.
`action-next` | Define element as action button to the next step.
`action-prev` | Define element as action button to the previous step.

`data-wizard-clickable` |

Value | Description
--- | ---
`true` | Enable wizard step click on the wizard navigation bar.
`false` | Disable wizard step click on the wizard navigation bar.

### API Methods

Method | Description
--- | ---
`setDefaults(options)` | Set default options.
`goNext()` | Go to the next step.
`goPrev()` | Go to the prev step.
`goLast()` | Go to the last step.
`goFirst()` | Go to the first step.
`goTo(number)` | Go to a step.
`stop()` | Stop wizard.
`resume()` | Resume wizard.
`getStep()` | Get current step number.
`getNewStep()` | Get new step number.
`setNewStep(number)` | Set new step number.
`isLastStep()` | Check last step.
`isFirstStep()` | Check first step.
`on(name, handler)` | Attach event("change", "changed", "submit").
`one(name, handler)` | Attach event that will be fired once.