Forms

Wizard

Wizard implementation on top of Bootstrap's tab system.

Requirements

<script src="js/cs/wizard.js"></script>

Example

Javascript
var wizard = new Wizard(document.getElementById('wizardBasic'));
Html
<div class="card mb-5 wizard" id="wizardBasic">
  <div class="card-header border-0 pb-0">
    <ul class="nav nav-tabs justify-content-center" role="tablist">
      <li class="nav-item" role="presentation">
        <a class="nav-link text-center" href="#basicFirst" role="tab">
          <div class="mb-1 title d-none d-sm-block">First</div>
          <div class="text-small description d-none d-md-block">First description</div>
        </a>
      </li>
      <li class="nav-item" role="presentation">
        <a class="nav-link text-center" href="#basicSecond" role="tab">
          <div class="mb-1 title d-none d-sm-block">Second</div>
          <div class="text-small description d-none d-md-block">Second description</div>
        </a>
      </li>
      <li class="nav-item" role="presentation">
        <a class="nav-link text-center" href="#basicThird" role="tab">
          <div class="mb-1 title d-none d-sm-block">Third</div>
          <div class="text-small description d-none d-md-block">Third description</div>
        </a>
      </li>
      <li class="nav-item d-none" role="presentation">
        <a class="nav-link text-center" href="#basicLast" role="tab"></a>
      </li>
    </ul>
  </div>
  <div class="card-body sh-35">
    <div class="tab-content">
      <div class="tab-pane fade" id="basicFirst" role="tabpanel">
        <h5 class="card-title">First Title</h5>
        <p class="card-text text-alternate mb-4">With supporting text below as a natural lead-in to additional content.</p>
        <form>
          <label class="mb-3 top-label">
            <input class="form-control" />
            <span>FIRST NAME</span>
          </label>
          <label class="mb-3 top-label">
            <input class="form-control" />
            <span>LAST NAME</span>
          </label>
        </form>
      </div>
      <div class="tab-pane fade" id="basicSecond" role="tabpanel">
        <h5 class="card-title">Second Title</h5>
        <p class="card-text text-alternate mb-4">With supporting text below as a natural lead-in to additional content.</p>
        <form>
          <label class="mb-3 top-label">
            <input class="form-control" />
            <span>E-MAIL</span>
          </label>
          <label class="mb-3 top-label">
            <input class="form-control" id="password" type="password" placeholder="" />
            <span>PASSWORD</span>
          </label>
        </form>
      </div>
      <div class="tab-pane fade" id="basicThird" role="tabpanel">
        <h5 class="card-title">Third Title</h5>
        <p class="card-text text-alternate mb-4">With supporting text below as a natural lead-in to additional content.</p>
        <form>
          <label class="mb-3 top-label">
            <input class="form-control" />
            <span>COUNTRY</span>
          </label>
          <label class="mb-3 top-label">
            <input class="form-control" />
            <span>CITY</span>
          </label>
        </form>
      </div>
      <div class="tab-pane fade" id="basicLast" role="tabpanel">
        <div class="text-center mt-5">
          <h5 class="card-title">Thank You!</h5>
          <p class="card-text text-alternate mb-4">Your registration completed successfully!</p>
          <button class="btn btn-icon btn-icon-start btn-primary btn-reset" type="button">
            <i data-acorn-icon="rotate-left"></i>
            <span>Reset</span>
          </button>
        </div>
      </div>
    </div>
  </div>
  <div class="card-footer text-center border-0 pt-1">
    <button class="btn btn-icon btn-icon-start btn-outline-primary btn-prev" type="button">
      <i data-acorn-icon="chevron-left"></i>
      <span>Back</span>
    </button>
    <button class="btn btn-icon btn-icon-end btn-outline-primary btn-next" type="button">
      <span>Next</span>
      <i data-acorn-icon="chevron-right"></i>
    </button>
  </div>
</div>

More Examples

You may find more examples in Interface.Forms.Wizard.html file which is initialized by js/forms/wizards.js.

Reference

Properties

NAME
TYPE
DEFAULT
DESCRIPTION
NAME
element
TYPE
DOM Element
DEFAULT
null
DESCRIPTION
Tab nav and tab content dom element.
NAME
options.selected
TYPE
number
DEFAULT
0
DESCRIPTION
Starting index of the wizard.
NAME
options.cycle
TYPE
boolean
DEFAULT
false
DESCRIPTION
Allow going back to start with next button or to the last item with previous button.
NAME
options.topNav
TYPE
boolean
DEFAULT
true
DESCRIPTION
Enable top navigation buttons.
NAME
options.lastEnd
TYPE
boolean
DEFAULT
false
DESCRIPTION
Disables the wizard on the last step.
NAME
options.handleButtonClicks
TYPE
boolean
DEFAULT
true
DESCRIPTION
Setting it false means that next and previous buttons will not change steps. Good for controlling steps manually to add things like validation or async methods.
NAME
options.onNextClick
TYPE
Function
DEFAULT
null
DESCRIPTION
Callback for next button click.
NAME
options.onPrevClick
TYPE
Function
DEFAULT
null
DESCRIPTION
Callback for previous button click.
NAME
options.onResetClick
TYPE
Function
DEFAULT
null
DESCRIPTION
Callback for reset button click.

Methods

NAME
DESCRIPTION
NAME
getCurrentIndex
DESCRIPTION
Returns current index of the step.
NAME
getTotalSteps
DESCRIPTION
Returns total step count.
NAME
getCurrentContent
DESCRIPTION
Returns content of the current step.
NAME
getContentByIndex
DESCRIPTION
Returns content of the step by provided index.
NAME
gotoIndex
DESCRIPTION
Jumps to step by provided index.
NAME
gotoNext
DESCRIPTION
Jumps to next step.
NAME
gotoPrev
DESCRIPTION
Jumps to previous step.
NAME
reset
DESCRIPTION
Resets steps and jumps to first one.