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.
These data attributes allow you to set options for the stepper component during auto initialization.
| Option | Type | Default | Description |
|---|---|---|---|
data-kt-stepper-active-step | 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 | Defines a Tailwind class applied to hide the stepper contents when they are not active. |
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. |
data-kt-stepper-number="true" | Specifies an element that for dynamically print step number. |
| Classes | |
first | Applied to the stepper root element when current step is first. |
last | Applied to the stepper root element when current step is last. |
between | Applied to the stepper root element when current step is between. |
active | Applied to the stepper active item. |
completed | Applied to the stepper completed item. |
pending | Applied to the stepper pending item. |
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. |
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. |
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. |
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 |
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 |
off(eventName, eventId) | Removes an event listener for the |
dispose() | Removes the KTStepper instance from an element, including any associated data stored on the DOM element. |
const stepperEl = document.querySelector('#my_stepper');
const stepper = KTStepper.getInstance(stepperEl);
stepper.goNext();
stepper.go(3);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 |
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 |
getOrCreateInstance(element) | Returns the existing |
// Initialize all steppers
KTStepper.init();
// Initialzie pending steppers
KTStepper.createInstances();
// Get stepper object
const stepperEl = document.querySelector('#my_stepper');
const stepper = KTStepper.getInstance(stepperEl);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');
});