• navigations
  • Stepper

navigations

Tailwind CSS Stepper

The Stepper Component visually guides users through a multi-step process, such as a wizard or multi-section form, showing their current position and remaining steps.

Require FlyonUI JS
Class Name
Type
Description
stepper-active:{tw-utility-class}ModifierRefines the appearance of the active step.
stepper-success:{tw-utility-class}ModifierAdjusts the visual representation of a completed step.
stepper-disabled:{tw-utility-class}ModifierAlters the “back” button appearance when the first step is active.
stepper-skipped:{tw-utility-class}ModifierModifies the appearance of a step that has been skipped.
stepper-error:{tw-utility-class}ModifierAdjusts the visual representation of a step with an error. Requires manual addition.
stepper-process:{tw-utility-class}ModifierModifies the appearance of a step that is currently being processed. Requires manual addition.
stepper-completed:{tw-utility-class}ModifierRefines the appearance of all steps that have been completed.

Basic example

Static

A static stepper usage.

Vertical

Vertical navigation example.

Linear

Linear navigation example.

Types

Outlined

Outlined stepper example.

Solid

Solid stepper example.

Shapes

Rounded

Use the rounded-* utility class to make stepper rounded. The default shape of the stepper but can be altered by using TailwindCSS Border Radius utility classes.

Circle (Default)

This is the default stepper.

Illustrations

Alignment center

Navigation align centered.

Utilizing icons and avatars

You can also include extra elements like an avatar image or icons.

Responsive

Static

This stepper navigation example aligns horizontally for screen sizes above the md breakpoint and vertically for smaller screen sizes.

Linear

The linear example is horizontally aligned for resolutions larger than or equal to ‘md’ and vertically aligned for resolutions below that.

Dynamic form

Dynamic linear

An example of a dynamic stepper that walks users through the steps of a task.

The Stepper component is a user interface element designed to guide users through a multi-step process. It features navigation items representing each step and content sections corresponding to these steps. The main data attribute, data-stepper, initializes the stepper component and ensures it functions correctly.

Within the stepper, data-stepper-nav-item and data-stepper-content-item attributes are used to link each step with its respective content, identified by an index. This index uniquely associates each navigation item with its corresponding content section.

Additionally, data-stepper-back-btn and data-stepper-next-btn control the navigation between steps, data-stepper-finish-btn is used to complete the process on the final step, and data-stepper-reset-btn allows users to reset the stepper. These data attributes work together to provide a smooth and guided user experience through the multi-step process.

Non-linear

Featuring a “Complete Step” button, the Stepper component can be enhanced with "mode": "non-linear" in the data-stepper attribute, allowing users to click on navigation items to switch steps. The data-stepper-complete-step-btn attribute is used for the complete button.

Skip

Example of a Step with a Skip Button: To incorporate a skip button, utilize data-stepper-skip-btn to designate the button that allows skipping the step. Specify the index for this button by including data-stepper-nav-item='{ "isOptional": true }'.

Active

Active stepper example.

Success

Example of a Successful Stepper: This example demonstrates what a properly completed stepper should look like.

Error

Error stepper example.

JavaScript behavior

Options

PARAMETERS
DESCRIPTION
OPTIONS
DEFAULT VALUE
data-stepperActivate a Stepper by specifying on an element.--
data-stepper-nav-itemActivate a Stepper Nav Item by specifying on an element.--
data-stepper-content-itemActivate a Stepper Content Item by specifying on an element.--
data-stepper-back-btnEnables the Back button functionality on the specified element.--
data-stepper-next-btnEnables the Next button functionality on the specified element.--
data-stepper-finish-btnEnables the Finish button functionality on the specified element.--
data-stepper-reset-btnEnables the Reset button functionality on the specified element.--
data-stepper-skip-btnEnables the Skip button functionality on the specified element.--
data-stepper-complete-step-btnEnables the Complete button functionality on the specified element.--
:currentIndexIndex of the current step. Must be a number between 1 and the maximum number of steps.number1
:modeMode of the stepper. In “non-linear” mode, users can navigate to any step.“linear” \ “non-linear”“linear”
:isCompletedWhether the stepper is completed.booleanfalse
:indexIndex of the step to which the item belongs. Must be a number between 1 and the maximum steps.--
:isOptionalWhether the step is optional.booleanfalse
:isSkipWhether the step is skipped.booleanfalse
:hasErrorWhether the step has an error.booleanfalse
:indexIndex of the step to which the item belongs. Must be a number between 1 and the maximum steps.--
:isCompletedWhether the step is completed.booleanfalse
:isSkipWhether the step is skipped.booleanfalse
:isFinalWhether the step is final.booleanfalse

Methods

The HSStepper object is contained within the global window object

METHOD
DESCRIPTION
PUBLIC METHODS
setProcessedNavItem(n)Set the nav item as processed. Available parameters:
  • n the index of the step to which the item belongs
setErrorNavItem(n)Set the nav item as error. Available parameters:
  • n the index of the step to which the item belongs
unsetProcessedNavItem(n)Unset the nav item as processed. Available parameters:
  • n the index of the step to which the item belongs
goToNext()Moves to the next step. Returns the index of the next step. If already at the last step, returns the current step’s index.
disableButtons()Disable the “next” and “back” buttons.
enableButtons()Enable the “next” and “back” buttons.
Private METHODS
handleFinishButtonClick()Handles the click event to proceed to the finish.
STATIC METHODS
HSStepper.getInstance(target, isInstance)
Retrieves the associated element. Parameters target.
  • target should be a Node or string (valid selector).
  • isInstance boolean. Returns the instance instead of Node if true.

Randomize an error state (public method).

const stepper = new HSStepper(document.querySelector('#stepper'));
let invalidState = 1;

stepper.on('beforeNext', (index) => {
if (index === 1) {
stepper.setProcessedNavItem(index);

    setTimeout(() => {
      stepper.unsetProcessedNavItem(index);
      stepper.enableButtons();

      if (invalidState) {
        stepper.goToNext();
      } else {
        stepper.setErrorNavItem(index);
      }

      invalidState = !invalidState;
    }, 2000);

}
});

Randomize an error state (mixed).

const stepper = HSStepper.getInstance('#stepper');
let invalidState = 1;

stepper.on('beforeNext', (index) => {
if (index === 2) {
stepper.setProcessedNavItem(index);

    setTimeout(() => {
      stepper.unsetProcessedNavItem(index);
      stepper.enableButtons();

      if (invalidState) {
        stepper.goToNext();
      } else {
        stepper.setErrorNavItem(index);
      }

      invalidState = !invalidState;
    }, 2000);

}
});

Events

METHOD
DESCRIPTION
RETURNING VALUE
on:activeTriggered when the “active” class is set.currentIndex
on:beforeNextTriggered before the “next” button is clicked.currentIndex
on:nextTriggered when the “next” button is clicked.currentIndex
on:backTriggered when the “back” button is clicked.currentIndex
on:completeTriggered when the “complete” button is clicked.currentIndex
on:beforeFinishTriggered before the “finish” button is clicked.currentIndex
on:finishTriggered when the “finish” button is clicked.currentIndex
on:skipTriggered when the “skip” button is clicked.currentIndex
on:resetTriggered when the “reset” button is clicked.currentIndex

Event usage 

const el = HSStepper.getInstance('#stepper');

el.on('next', (currentIndex) => {...});