Stepper divides a huge form to sections to not overwhelm a viewer. This uses Materialize Stepper by Igor Marcossi. Checkout the documentation here. To use the stepper, you will have to manually link the mstepper.min.js file located in the extras folder

Basic

This example uses .linear class which prevents you from proceeding to the next step until the current form is filled. To allow skipping sections, remove the .linear class.

  <div class="card-panel">
    <ul class="stepper linear">
      <li class="step active">
        <div data-step-label="Some label" class="step-title waves-effect">Step 1</div>
        <div class="step-content">
          <div class="row">
            <div class="input-field col s12">
              <input id="linear_email" name="linear_email" type="email" class="validate" required="">
              <label for="linear_email">Your e-mail</label>
            </div>
          </div>
          <div class="step-actions">
            <button class="waves-effect btn next-step">CONTINUE</button>
          </div>
        </div>
      </li>
      <li class="step">
        <div class="step-title waves-effect">Step 2</div>
        <div class="step-content">
          <div class="row">
            <div class="input-field col s12">
              <input id="linear_password" name="linear_password" type="password" class="validate" required>
              <label for="linear_password">Your password</label>
            </div>
          </div>
          <div class="step-actions">
            <button class="waves-effect btn next-step">CONTINUE</button>
            <button class="waves-effect btn-flat ondark-white-text previous-step">BACK</button>
          </div>
        </div>
      </li>
      <li class="step">
        <div class="step-title waves-effect">Step 3</div>
          <div class="step-content">
          Finish!
            <div class="step-actions">
              <button class="waves-effect btn" type="submit">SUBMIT</button>
            </div>
          </div>
      </li>
    </ul>
  </div>
            

Initialization

To check all the available options, checkout the documentation here.

  document.addEventListener('DOMContentLoaded', function() {
    var elem = document.querySelector('.stepper');
    var instance = new MStepper(elem, {
      // options
      firstActive: 0 // this is the default
    });
  });
            

Horizontal

You can also make the stepper horizontal by adding the .horizontal class to the .stepper element. This will also turn to vertical automatically on medium to small devices.

  <div class="card-panel">
    <ul class="stepper horizontal">
      <li class="step active">
        <div class="step-title waves-effect">Step 1</div>
         <div class="step-content">
            <div class="row">
              <div class="input-field col s12">
                <input id="linear_email2" name="linear_email" type="email" class="validate" required="">
                <label for="linear_email2">Your e-mail</label>
              </div>
            </div>
            <div class="step-actions">
              <button class="waves-effect btn next-step">CONTINUE</button>
            </div>
          </div>
      </li>
      <li class="step">
        <div class="step-title waves-effect">Step 2</div>
          <div class="step-content">
          <div class="row">
            <div class="input-field col s12">
              <input id="linear_password2" name="linear_password" type="password" class="validate" required>
              <label for="linear_password2">Your password</label>
            </div>
          </div>
          <div class="step-actions">
            <button class="waves-effect btn next-step">CONTINUE</button>
            <button class="waves-effect btn-flat ondark-white-text previous-step">BACK</button>
          </div>
        </div>
      </li>
      <li class="step">
        <div class="step-title waves-effect">Step 3</div>
        <div class="step-content">
        Finish!
          <div class="step-actions">
            <button class="waves-effect btn" type="submit">SUBMIT</button>
          </div>
        </div>
      </li>
    </ul>
  </div>