Build Step-by-step User Interfaces with Stepper.js Library

This is a lightweight yet customizable stepper JavaScript library for creating step-by-step user interfaces like multi-step signup forms, user onboarding flows, or even interactive tutorials.

It allows you to create helpful guided workflows that take users through complex forms or processes.

Stepper.JS handles the navigation and display logic, so you can focus on the content of each step.

Features:

• Step-by-Step Navigation: This is the core function of the library. It allows you to divide content or processes into distinct, sequential steps.
• Intuitive Interface: Stepper.JS provides a user-friendly interface with visual cues that clearly indicate the current step and the overall progress. This helps users understand where they are in the process and what to expect next.
• Customizable Appearance: Stepper.JS comes with lots of customization options to adapt the stepper’s appearance to your website’s design.
• Responsive Design: The stepper works well on any devices and screen sizes. It automatically adjusts its layout to fit the available space.
• Step Indicators (Optional): You can choose to include a visual indicator that shows the user their current step within the overall sequence.
• Button Event Callbacks: Stepper.JS allows you to define custom JavaScript functions that execute when navigation buttons (Next, Previous, Submit) or tabs are clicked.

How to use it:

1. Download the package and load the ‘stepper.min.js’ script in the document.

<link rel="stylesheet" href="assets/css/stepper.css">
<script src="stepper.min.js"></script>

2. Create the HTML structure for your stepper interface. Use div elements with appropriate classes to represent tabs, content panes, and navigation buttons:

<div class="st-container" st-example>
  <div class="st-group">
    <div class="st-tabs">
      <div class="st-tab">
        <div class="st-tab-block">
          <h3>Step 1</h3>
        </div>
      </div>
      <div class="st-tab">
        <div class="st-tab-block">
          <h3>Step 2</h3>
        </div>
      </div>
      <div class="st-tab">
       <div class="st-tab-block">
          <h3>Step 3</h3>
        </div>
      </div>
    </div>
    <div class="st-content">
      <div class="st-pane">
        Step 1
      </div>
      <div class="st-pane">
        Step 2
      </div>
      <div class="st-pane">
        Step 3
      </div>
    </div>
    <div class="st-bottom d-flex flex-wrap justify-content-between">
      <div>
        <button type="button" class="prev-step st-button">Previous</button>
      </div>
      <div>
        <button type="button" class="next-step st-button">Next</button>
        <button type="button" class="submit-step st-button">Submit</button>
      </div>
    </div>
  </div>
</div>

3. Initialize the stepper and pass the container selector along with optional configurations:

const stepper1 = stepper('[st-example]', {
  // all possible options
});

4. All configuration options.

const myStepper = stepper('[st-example]', {
  // Sets responsive breakpoint (default: 420)
  containerWidth: 420,
  // Controls progress display
  indicator: {
    visible: false,
    theme: 'Default', // or 'Classic'
  },
  // Prevents direct tab access
  allTabsDisabled: true,
  // Assigns a unique ID to the stepper container
  containerId: {{dynamic}},
  // Enables editing completed forms
  submitted: false,
  
  // Event handlers:
  nextButtonEvent: () => {},
  nextButtonProcess: () => {},
  prevButtonEvent: () => {},
  submitButtonEvent: () => {},
  tabButtonEvent: () => {},
  
});