Navigation

Stepper

The Stepper Component visually guides users through multi-step processes, such as wizards or forms, displaying their current position and remaining steps.

Basic example

Static

A static stepper usage.

  • 1
    Step
  • 2
    Step
  • 3
    Step

Vertical

Vertical navigation example.

  • 1
    Step
  • 2
    Step
  • 3
    Step

Linear

Linear navigation example.

  • 1 Step
  • 2 Step
  • 3 Step

Types

Outlined

Outlined stepper example.

  • 1
    Step
  • 2
    Step
  • 3
    Step

Solid

Solid stepper example.

  • 1
    Step
  • 2
    Step
  • 3
    Step

Shapes

Rounded

Use the `rounded-*` utility class to make stepper rounded. The default shape of the stepper but can be altered by using TailwindCSS <a href="https://tailwindcss.com/docs/border-radius" target="_blank" class="link link-primary">Border Radius</a> utility classes.

  • 1
    Step
  • 2
    Step
  • 3
    Step

Circle (Default)

This is the default stepper.

  • 1
    Step
  • 2
    Step
  • 3
    Step

Illustrations

Alignment center

Navigation align centered.

  • 1
    Step
  • 2
    Step
  • 3
    Step

Utilizing icons and avatars

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

  • Image Description Step
  • Step
  • Loading... Step

Responsive

Static

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

  • 1
    Step

    This is a description text.

  • 2
    Step

    This is a description text.

  • 3
    Step

    This is a description text.

Linear

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

  • 1 Step
  • 2 Step
  • 3 Step

Dynamic form

Dynamic linear

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

  • 1 Step
  • 2 Step
  • 3 Step

First content

Second content

Third content

Final content

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.

  • 1 Step
  • 2 Step
  • 3 Step

First content

Second content

Third content

Final content

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 }'`.

  • 1 Step
  • 2 Step
  • 3 Step

First content

Second content

Third content

Final content

Active

Active stepper example.

  • 1 Step
  • 2 Step
  • 3 Step

First content

Second content

Third content

Final content

Success

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

  • 1 Step
  • 2 Step
  • 3 Step

First content

Second content

Third content

Final content

Error

Error stepper example.

  • 1 Step
  • 2 Step
  • 3 Step

First content

Second content

Third content

Final content

Destroy/Reinitialize

The `destroy` <a href="#destroy-method" class="link link-primary">method</a> is provided to facilitate the destruction of a stepper element.

  • 1 Step
  • 2 Step
  • 3 Step

First content

Second content

Third content

Final content

Class referenceThe component, style, color, state, size and modifier classes available for this component.
ClassTypeDescription
stepper-active:{tw-utility-class}variantRefines the appearance of the active step.
stepper-success:{tw-utility-class}variantAdjusts the visual representation of a completed step.
stepper-disabled:{tw-utility-class}variantAlters the "back" button appearance when the first step is active.
stepper-skipped:{tw-utility-class}variantModifies the appearance of a step that has been skipped.
stepper-error:{tw-utility-class}variantAdjusts the visual representation of a step with an error. Requires manual addition.
stepper-process:{tw-utility-class}variantModifies the appearance of a step that is currently being processed. Requires manual addition.
stepper-completed:{tw-utility-class}variantRefines the appearance of all steps that have been completed.