A Lightweight Wizard UI Component HTML5 in Vanilla JavaScript

Wizard JS is a lightweight wizard UI component that supports Accessibility and HTML5 in JavaScript Vanilla.

wizard ui design examples, progress step ui design, multi step form ui design, modern wizard ui, multi step form design codepen, wizard ux best practices

How to make use of it:

1. Create a step navigation bar indicating the current step in the wizard process.

<section class="wizard">
  <aside class="wizard-nav">
    <div class="wizard-step" data-type="form">
      <span class="dot"></span>
      <span>Notification</span>
    </div>
    <div class="wizard-step" data-type="form">
      <span class="dot"></span>
      <span>Style and content</span>
    </div>
    <div class="wizard-step" data-type="form">
      <span class="dot"></span>
      <span>Destiny</span>
    </div>
    <div class="wizard-step" data-type="form">
      <span class="dot"></span>
      <span>Last Step</span>
    </div>
  </aside>
</section>

2. Add model groups as steps to the wizard.

<section class="wizard">
  <aside class="wizard-nav">
    <div class="wizard-step" data-type="form">
      <span class="dot"></span>
      <span>Notification</span>
    </div>
    <div class="wizard-step" data-type="form">
      <span class="dot"></span>
      <span>Style and content</span>
    </div>
    <div class="wizard-step" data-type="form">
      <span class="dot"></span>
      <span>Destiny</span>
    </div>
    <div class="wizard-step" data-type="form">
      <span class="dot"></span>
      <span>Last Step</span>
    </div>
  </aside>
  <aside class="wizard-content container">
    <div class="wizard-step">
      <div class="form-group">
        <label for="nameCampaign">Campaign name</label>
        <input type="text" name="name" class="form-control required" id="nameCampaign" placeholder="Enter a short campaign name">
      </div>
      <div class="form-group">
        <label for="descCampaign">Description of the campaign</label>
        <textarea name="description" class="form-control" id="descCampaign"></textarea>
      </div>
    </div>
    <div class="wizard-step">
        <div class="form-group">
          <label for="titleNoti">Title</label>
          <input type="text" name="title" class="form-control required banner-info" id="titleNoti"
              placeholder="Example: Message title">
        </div>
        <div class="form-group">
          <label for="bodyNoti">Body</label>
          <input type="text" name="body" class="form-control required banner-info" id="bodyNoti" placeholder="Example: Message body">
        </div>
        <div class="form-group">
          <label for="imageNoti">Image</label>
          <input type="file" name="image" class="form-control banner-info" id="imageNoti">
        </div>
    </div>
    <div class="wizard-step">
        <div class="form-group">
          <label for="titleNoti">Action</label>
          <select class="form-control" name="action">
            <option value="">Select one ...</option>
            <option value="0">Open bolus configurator</option>
          </select>
        </div>
        <div class="form-group">
          <label for="bodyNoti">Segment</label>
          <select class="form-control required fetch-info" name="segment">
            <option value="">Select one ...</option>
            <option value="0">País</option>
            <option value="1">Language</option>
            <option value="2">Diabetes Type</option>
            <option value="3">Center</option>
          </select>
        </div>
    </div>
    <div class="wizard-step">
      <div class="form-group">
        <label for="titleNoti">Action</label>
        <textarea class="form-control required fetch-info">🍍</textarea>>
      </div>
    </div>
  </aside>
</section>

3. Load the main javascript and style sheet.

<link rel="stylesheet" href="./styles/css/main.css" />
<script src="./src/wizard.js"></script>

4. Initialize the processor.

const wizard = new Wizard(args);
wizard.init();

5. All processor options are available.

const wizard = new Wizard({
      // Default CSS classes
      wz_class: ".wizard",
      wz_nav: ".wizard-nav",
      wz_nav_style: "dots", // or 'progress'
      wz_content: ".wizard-content",
      wz_buttons: ".wizard-buttons",
      wz_button: ".wizard-btn",
      wz_step: ".wizard-step",
      wz_form: ".wizard-form",
      wz_next: ".next",
      wz_prev: ".prev",
      wz_finish: ".finish",
      // Current step. 0 = Step 1
      current_step: 0,
      // Number of steps
      steps: 0,
      // 'all', 'nav', or 'buttons'
      navigation: "all",
      // Show buttons
      buttons: true,
      // Custom lable text
      next: "Next",
      prev: "Prev",
      finish: "Submit",
});

6. Events.

document.addEventListener("prevWizard", function (e) {
  alert("Prev Step");
});

document.addEventListener("nextWizard", function (e) {
  alert("Next Step");
});

document.addEventListener("submitWizard", function (e) {
  alert("Form Submit");
});

Form Wizard UI With Step Navigation, Wizard Vanilla JavaScript Plugin/Github, form wizard ux, navigation steps design