KTUIKTUI
KTUIKTUI
ComponentsDocsStudio

Getting Started

IntroductionInstallationApproachThemingJavaScriptTypeScriptDark modeRTLReferencesChangelog - v1.2.2Metronic TemplatePopular

Components

AccordionAvatarAlertBadgeBreadcrumbButtonCardCarouselNewClipboardNewCheckboxCollapseDatatableDismissDrawerDropdownImage InputInputKbdLinkModalPaginationPin inputNewProgressRadio GroupRange SliderNewRatingNewReparentRepeaterNewScrollableScrollspyScrolltoSelectSeparatorSkeletonStepperStickySwitchTabsTextareaTheme SwitchToastTooltipToggleToggle GroupToggle PasswordTooltip
©2026 KtUI. All rights reserved.
A project by Keenthemes
Docs
Stepper

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.

OptionTypeDefaultDescription
data-kt-stepper-active-stepnumber1Specifies 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.

NameDescription
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.

NameDescription
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.

MethodDescription
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.

MethodDescription
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.

EventDescription
changeThis event triggers before a stepper step is changed, allowing actions to be performed prior to the step transition.
changedThis 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');
});

TypeScript

Import the component and types from @keenthemes/ktui for typed options and instance:

import {
  KTStepper,
  type KTStepperConfigInterface,
  type KTStepperInterface,
} from '@keenthemes/ktui';
 
const stepperEl = document.querySelector<HTMLElement>('#my_stepper');
if (!stepperEl) return;
 
const stepper: KTStepperInterface | null = KTStepper.getInstance(stepperEl);
if (stepper) stepper.on('changed', () => {});
 
const options: KTStepperConfigInterface = {};
const instance: KTStepperInterface = new
PreviouseSkeletonNextSticky

On This Page

  • Examples
    • Basic Usage
  • Component API
    • Options
    • Selectors
    • Tailwind Modifiers
    • Methods
    • Utilities
    • Events
  • TypeScript
string
"hidden"
Defines a Tailwind class applied to hide the stepper contents when they are not active.
data-kt-stepper-number="true"
Specifies an element that for dynamically print step number.
Classes
firstApplied to the stepper root element when current step is first.
lastApplied to the stepper root element when current step is last.
betweenApplied to the stepper root element when current step is between.
activeApplied to the stepper active item.
completedApplied to the stepper completed item.
pendingApplied to the stepper pending item.
kt-stepper-item-active:*A custom Tailwind variant for the currently active stepper item, highlighting the current step in the process.
kt-stepper-item-completed:*A custom Tailwind variant for stepper items that have been completed, indicating past steps in the process.
kt-stepper-item-pending:*A custom Tailwind variant for stepper items that are pending, indicating future steps yet to be reached in the process.
goFirst()
Navigates to the first step in the stepper sequence.
goLast()Navigates to the last step in the stepper sequence.
goNext()Moves the stepper to the next step in the sequence.
goBack()Moves the stepper to the previous step in the sequence.
update()Updates the stepper layout and state to reflect any changes in the DOM or stepper configuration.
getStep(itemElement)Returns the step number associated with the specified DOM element object.
getItemElement(step)Returns the DOM element object associated with the specified step number.
getTotalSteps()Returns the total number of steps in the stepper sequence.
getItemElements()Returns an array of all the DOM element objects in the stepper sequence.
getOption(name)Retrieves the value of a configuration option by name parameter from a KTStepper instance.
getElement()Retrieves the DOM element linked to a specific KTStepper instance.
on(eventName, handler)Allows attaching event listeners to the KTStepper custom events using the eventName and eventId string parameters. These events enable programmatic interaction based on user actions or internal state changes of KTStepper. The function returns string as a unique identifier for the registered listener, allowing you to remove it later if needed.
off(eventName, eventId)Removes an event listener for the eventName and eventId parameters attached with the on method.
dispose()Removes the KTStepper instance from an element, including any associated data stored on the DOM element.
element
getOrCreateInstance(element)Returns the existing KTStepper object for the provided DOM element element , or creates a new instance if none exists, then returns the same.
KTStepper
(stepperEl, options);