Stepper

Docs

Stepper

Tailwind Stepper component provides a visually intuitive way to guide users through multi-step processes or forms. Utilizing Tailwind's utility classes, it offers customizable styles for each step, making it easy to indicate progress and navigate between steps.

Examples

Basic Usage

<form action="#" method="post">
  <div data-kt-stepper="true">
    <div class="kt-card">
      <div class="kt-card-header h-auto px-10 py-5">
        <div
          data-kt-stepper-item="#stepper_1"
          class="active flex gap-2.5 items-center"
        >
          <div
            class="shrink-0 rounded-full size-8 flex items-center justify-center text-sm font-semibold bg-muted text-muted-foreground kt-stepper-item-active:bg-primary kt-stepper-item-active:text-primary-foreground kt-stepper-item-completed:bg-green-500 kt-stepper-item-completed:text-white"
          >
            <span
              data-kt-stepper-number="true"
              class="kt-stepper-item-completed:hidden"
              >1</span
            ><svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="lucide lucide-check size-4 hidden kt-stepper-item-completed:inline"
              aria-hidden="true"
            >
              <path d="M20 6 9 17l-5-5"></path>
            </svg>
          </div>
          <div class="flex flex-col gap-0.5">
            <h4
              class="text-sm font-medium text-mono kt-stepper-item-completed:opacity-70"
            >
              Step 1
            </h4>
            <span
              class="text-sm text-muted-foreground kt-stepper-item-completed:opacity-70"
              >Description</span
            >
          </div>
        </div>
        <div
          data-kt-stepper-item="#stepper_2"
          class="flex gap-2.5 items-center"
        >
          <div
            class="shrink-0 rounded-full size-8 flex items-center justify-center text-sm font-semibold bg-muted text-muted-foreground kt-stepper-item-active:bg-primary kt-stepper-item-active:text-primary-foreground kt-stepper-item-completed:bg-green-500 kt-stepper-item-completed:text-white"
          >
            <span
              data-kt-stepper-number="true"
              class="kt-stepper-item-completed:hidden"
              >2</span
            ><svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="lucide lucide-check size-4 hidden kt-stepper-item-completed:inline"
              aria-hidden="true"
            >
              <path d="M20 6 9 17l-5-5"></path>
            </svg>
          </div>
          <div class="flex flex-col gap-0.5">
            <h4
              class="text-sm font-medium text-mono kt-stepper-item-completed:opacity-70"
            >
              Step 2
            </h4>
            <span
              class="text-sm text-muted-foreground kt-stepper-item-completed:opacity-70"
              >Description</span
            >
          </div>
        </div>
        <div
          data-kt-stepper-item="#stepper_3"
          class="flex gap-2.5 items-center"
        >
          <div
            class="shrink-0 rounded-full size-8 flex items-center justify-center text-sm font-semibold bg-muted text-muted-foreground kt-stepper-item-active:bg-primary kt-stepper-item-active:text-primary-foreground kt-stepper-item-completed:bg-green-500 kt-stepper-item-completed:text-white"
          >
            <span
              data-kt-stepper-number="true"
              class="kt-stepper-item-completed:hidden"
              >3</span
            ><svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="lucide lucide-check size-4 hidden kt-stepper-item-completed:inline"
              aria-hidden="true"
            >
              <path d="M20 6 9 17l-5-5"></path>
            </svg>
          </div>
          <div class="flex flex-col gap-0.5">
            <h4
              class="text-sm font-medium text-mono kt-stepper-item-completed:opacity-70"
            >
              Step 3
            </h4>
            <span
              class="text-sm text-muted-foreground kt-stepper-item-completed:opacity-70"
              >Description</span
            >
          </div>
        </div>
      </div>
      <div class="kt-card-content px-5 py-20">
        <div class="" id="stepper_1">
          <div
            class="flex items-center justify-center text-lg font-semibold text-mono"
          >
            Step
            <!-- -->1
          </div>
        </div>
        <div class="hidden" id="stepper_2">
          <div
            class="flex items-center justify-center text-lg font-semibold text-mono"
          >
            Step
            <!-- -->2
          </div>
        </div>
        <div class="hidden" id="stepper_3">
          <div
            class="flex items-center justify-center text-lg font-semibold text-mono"
          >
            Step
            <!-- -->3
          </div>
        </div>
      </div>
      <div class="kt-card-footer justify-between p-5">
        <div>
          <button
            class="kt-btn kt-btn-secondary kt-stepper-first:hidden"
            data-kt-stepper-back="true"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="lucide lucide-arrow-left"
              aria-hidden="true"
            >
              <path d="m12 19-7-7 7-7"></path>
              <path d="M19 12H5"></path></svg
            >Back
          </button>
        </div>
        <div>
          <button
            class="kt-btn kt-btn-secondary kt-stepper-last:hidden"
            data-kt-stepper-next="true"
          >
            Next<svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="lucide lucide-arrow-right"
              aria-hidden="true"
            >
              <path d="M5 12h14"></path>
              <path d="m12 5 7 7-7 7"></path>
            </svg></button
          ><button class="kt-btn hidden kt-stepper-last:inline-flex">
            Submit
          </button>
        </div>
      </div>
    </div>
  </div>
</form>

Component API

Options

These data attributes allow you to set options for the stepper component during auto initialization.

Option	Type	Default	Description
`data-kt-stepper-active-step`	~~number~~	1	Specifies the active step number when the stepper is first initialized, indicating which step should be active at the start.
`data-kt-stepper-hidden-class`

Selectors

This table details the custom classes and data attributes used by the stepper component.

Name	Description
Data Attributes
`data-kt-stepper="true"`	Automatically initializes Tailwind Stepper instances on page load.
`data-kt-stepper-item="#stepper_content_id"`	Links a step to its content using the ID selector, controlling content visibility based on the active step.

Tailwind Modifiers

Custom modifiers to control the accordion’s style and behavior with Tailwind classes.

Name	Description
`kt-stepper-first:*`	A custom Tailwind variant activated when the first stepper item is active, indicating the beginning of the stepper process.
`kt-stepper-between:*`	A custom Tailwind variant activated for stepper items that are between the first and last, indicating mid-process steps.
`kt-stepper-last:*`	A custom Tailwind variant activated when the last stepper item is active, indicating the end of the stepper process.

Methods

Use KTStepper component's API methods to programmatically control its behavior.

Method	Description
`new KTStepper(element, options)`	Creates an object instance of the KTStepper class for the given DOM element and configuration options.
`go(step)`	Navigates to the step with the specified step number in the stepper sequence.
`goTo(itemElement)`	Navigates to the stepper item associated with the specified DOM element object.

const stepperEl = document.querySelector('#my_stepper');
const stepper = KTStepper.getInstance(stepperEl);
 
stepper.goNext();
stepper.go(3);

Utilities

Manage and interact with KTStepper instances using these static methods of KTStepper JavaScript class.

Method	Description
`init()`	Automatically initializes KTStepper object for all elements with the ~~data-kt-stepper="true"~~ attribute on page load.
`createInstances()`	Allows to create KTStepper instances for all elements that have been dynamically added to the DOM but haven't been activated yet.
`getInstance(element)`	Returns the ~~KTStepper~~ object associated with the given DOM element .

// Initialize all steppers
KTStepper.init();
 
// Initialzie pending steppers
KTStepper.createInstances();
 
// Get stepper object
const stepperEl = document.querySelector('#my_stepper');
const stepper = KTStepper.getInstance(stepperEl);

Events

KTStepper custom events allows you to register callback functions(event listeners) that will be invoked automatically whenever specific custom events are triggered within the component.

Event	Description
`change`	This event triggers before a stepper step is changed, allowing actions to be performed prior to the step transition.
`changed`	This event triggers after a stepper step has changed, providing a hook to execute actions following the step transition.

const stepperEl = document.querySelector('#my_stepper');
const stepper = KTStepper.getInstance(stepperEl);
 
stepper.on('change', (detail) => {
  detail.cancel = true;
  console.log('change action canceled');
});
 
stepper.on('changed', () => {
  console.log('changed event');
});

PreviouseSkeleton NextSticky

On This Page

Examples
- Basic Usage
Component API