- Components
- Stepper
Components
Tailwind CSS Stepper
The Stepper Component offers a clear representation of progress in a multi-step process, such as a wizard or a form with multiple sections. It guides users through each step, providing visual cues about their current position and the remaining steps.
Static
A static stepper usage.
-
1Step
-
2Step
-
3Step
<!-- Stepper -->
<ul class="relative flex flex-row gap-x-2">
<!-- Item -->
<li class="shrink basis-0 flex-1 group">
<div class="min-w-[28px] min-h-[28px] w-full inline-flex items-center text-xs align-middle">
<span class="w-7 h-7 flex justify-center items-center flex-shrink-0 bg-gray-100 font-medium text-gray-800 rounded-full dark:bg-gray-700 dark:text-white">
1
</span>
<div class="ms-2 w-full h-px flex-1 bg-gray-200 group-last:hidden dark:bg-gray-700"></div>
</div>
<div class="mt-3">
<span class="block text-sm font-medium text-gray-800 dark:text-white">
Step
</span>
</div>
</li>
<!-- End Item -->
<!-- Item -->
<li class="shrink basis-0 flex-1 group">
<div class="min-w-[28px] min-h-[28px] w-full inline-flex items-center text-xs align-middle">
<span class="w-7 h-7 flex justify-center items-center flex-shrink-0 bg-gray-100 font-medium text-gray-800 rounded-full dark:bg-gray-700 dark:text-white">
2
</span>
<div class="ms-2 w-full h-px flex-1 bg-gray-200 group-last:hidden dark:bg-gray-700"></div>
</div>
<div class="mt-3">
<span class="block text-sm font-medium text-gray-800 dark:text-white">
Step
</span>
</div>
</li>
<!-- End Item -->
<!-- Item -->
<li class="shrink basis-0 flex-1 group">
<div class="min-w-[28px] min-h-[28px] w-full inline-flex items-center text-xs align-middle">
<span class="w-7 h-7 flex justify-center items-center flex-shrink-0 bg-gray-100 font-medium text-gray-800 rounded-full dark:bg-gray-700 dark:text-white">
3
</span>
<div class="ms-2 w-full h-px flex-1 bg-gray-200 group-last:hidden dark:bg-gray-700"></div>
</div>
<div class="mt-3">
<span class="block text-sm font-medium text-gray-800 dark:text-white">
Step
</span>
</div>
</li>
<!-- End Item -->
</ul>
<!-- End Stepper -->
Linear
Linear stepper example.
-
1 Step
-
2 Step
-
3 Step
<!-- Stepper -->
<ul class="relative flex flex-row gap-x-2">
<!-- Item -->
<li class="flex items-center gap-x-2 shrink basis-0 flex-1 group">
<div class="min-w-[28px] min-h-[28px] inline-flex justify-center items-center text-xs align-middle">
<span class="w-7 h-7 flex justify-center items-center flex-shrink-0 bg-gray-100 font-medium text-gray-800 rounded-full dark:bg-gray-700 dark:text-white">
1
</span>
<span class="ms-2 block text-sm font-medium text-gray-800 dark:text-white">
Step
</span>
</div>
<div class="w-full h-px flex-1 bg-gray-200 group-last:hidden dark:bg-gray-700"></div>
</li>
<!-- End Item -->
<!-- Item -->
<li class="flex items-center gap-x-2 shrink basis-0 flex-1 group">
<div class="min-w-[28px] min-h-[28px] inline-flex justify-center items-center text-xs align-middle">
<span class="w-7 h-7 flex justify-center items-center flex-shrink-0 bg-gray-100 font-medium text-gray-800 rounded-full dark:bg-gray-700 dark:text-white">
2
</span>
<span class="ms-2 block text-sm font-medium text-gray-800 dark:text-white">
Step
</span>
</div>
<div class="w-full h-px flex-1 bg-gray-200 group-last:hidden dark:bg-gray-700"></div>
</li>
<!-- End Item -->
<!-- Item -->
<li class="flex items-center gap-x-2 shrink basis-0 flex-1 group">
<div class="min-w-[28px] min-h-[28px] inline-flex justify-center items-center text-xs align-middle">
<span class="w-7 h-7 flex justify-center items-center flex-shrink-0 bg-gray-100 font-medium text-gray-800 rounded-full dark:bg-gray-700 dark:text-white">
3
</span>
<span class="ms-2 block text-sm font-medium text-gray-800 dark:text-white">
Step
</span>
</div>
<div class="w-full h-px flex-1 bg-gray-200 group-last:hidden dark:bg-gray-700"></div>
</li>
<!-- End Item -->
</ul>
<!-- End Stepper -->
Responsive
This stepper example is horizontally aligned above md resolution and vertically below.
Reduce browser size to see it in action
-
1Step
This is a description text.
-
2Step
This is a description text.
-
3Step
This is a description text.
<!-- Stepper -->
<ul class="relative flex flex-col md:flex-row gap-2">
<!-- Item -->
<li class="md:shrink md:basis-0 flex-1 group flex gap-x-2 md:block">
<div class="min-w-[28px] min-h-[28px] flex flex-col items-center md:w-full md:inline-flex md:flex-wrap md:flex-row text-xs align-middle">
<span class="w-7 h-7 flex justify-center items-center flex-shrink-0 bg-gray-100 font-medium text-gray-800 rounded-full dark:bg-gray-700 dark:text-white">
1
</span>
<div class="mt-2 w-px h-full md:mt-0 md:ms-2 md:w-full md:h-px md:flex-1 bg-gray-200 group-last:hidden dark:bg-gray-700"></div>
</div>
<div class="grow md:grow-0 md:mt-3 pb-5">
<span class="block text-sm font-medium text-gray-800 dark:text-white">
Step
</span>
<p class="text-sm text-gray-500">
This is a description text.
</p>
</div>
</li>
<!-- End Item -->
<!-- Item -->
<li class="md:shrink md:basis-0 flex-1 group flex gap-x-2 md:block">
<div class="min-w-[28px] min-h-[28px] flex flex-col items-center md:w-full md:inline-flex md:flex-wrap md:flex-row text-xs align-middle">
<span class="w-7 h-7 flex justify-center items-center flex-shrink-0 bg-gray-100 font-medium text-gray-800 rounded-full dark:bg-gray-700 dark:text-white">
2
</span>
<div class="mt-2 w-px h-full md:mt-0 md:ms-2 md:w-full md:h-px md:flex-1 bg-gray-200 group-last:hidden dark:bg-gray-700"></div>
</div>
<div class="grow md:grow-0 md:mt-3 pb-5">
<span class="block text-sm font-medium text-gray-800 dark:text-white">
Step
</span>
<p class="text-sm text-gray-500">
This is a description text.
</p>
</div>
</li>
<!-- End Item -->
<!-- Item -->
<li class="md:shrink md:basis-0 flex-1 group flex gap-x-2 md:block">
<div class="min-w-[28px] min-h-[28px] flex flex-col items-center md:w-full md:inline-flex md:flex-wrap md:flex-row text-xs align-middle">
<span class="w-7 h-7 flex justify-center items-center flex-shrink-0 bg-gray-100 font-medium text-gray-800 rounded-full dark:bg-gray-700 dark:text-white">
3
</span>
<div class="mt-2 w-px h-full md:mt-0 md:ms-2 md:w-full md:h-px md:flex-1 bg-gray-200 group-last:hidden dark:bg-gray-700"></div>
</div>
<div class="grow md:grow-0 md:mt-3 pb-5">
<span class="block text-sm font-medium text-gray-800 dark:text-white">
Step
</span>
<p class="text-sm text-gray-500">
This is a description text.
</p>
</div>
</li>
<!-- End Item -->
</ul>
<!-- End Stepper -->
Linear example is also horizontally aligned above md resolution and vertically below.
Reduce browser size to see it in action
-
1 Step
-
2 Step
-
3 Step
<!-- Stepper -->
<ul class="relative flex flex-col md:flex-row gap-2">
<!-- Item -->
<li class="flex flex-col md:flex-row md:items-center gap-x-2 shrink basis-0 flex-1 group">
<div class="min-w-[28px] min-h-[28px] inline-flex items-center text-xs align-middle grow md:grow-0">
<span class="w-7 h-7 flex justify-center items-center flex-shrink-0 bg-gray-100 font-medium text-gray-800 rounded-full dark:bg-gray-700 dark:text-white">
1
</span>
<span class="ms-2 block grow md:grow-0 text-sm font-medium text-gray-800 dark:text-white">
Step
</span>
</div>
<div class="mt-2 w-px h-4 md:mt-0 ms-3.5 md:ms-0 md:w-full md:h-px md:flex-1 bg-gray-200 group-last:hidden dark:bg-gray-700"></div>
</li>
<!-- End Item -->
<!-- Item -->
<li class="flex flex-col md:flex-row md:items-center gap-x-2 shrink basis-0 flex-1 group">
<div class="min-w-[28px] min-h-[28px] inline-flex items-center text-xs align-middle grow md:grow-0">
<span class="w-7 h-7 flex justify-center items-center flex-shrink-0 bg-gray-100 font-medium text-gray-800 rounded-full dark:bg-gray-700 dark:text-white">
2
</span>
<span class="ms-2 block grow md:grow-0 text-sm font-medium text-gray-800 dark:text-white">
Step
</span>
</div>
<div class="mt-2 w-px h-4 md:mt-0 ms-3.5 md:ms-0 md:w-full md:h-px md:flex-1 bg-gray-200 group-last:hidden dark:bg-gray-700"></div>
</li>
<!-- End Item -->
<!-- Item -->
<li class="flex flex-col md:flex-row md:items-center gap-x-2 shrink basis-0 flex-1 group">
<div class="min-w-[28px] min-h-[28px] inline-flex items-center text-xs align-middle grow md:grow-0">
<span class="w-7 h-7 flex justify-center items-center flex-shrink-0 bg-gray-100 font-medium text-gray-800 rounded-full dark:bg-gray-700 dark:text-white">
3
</span>
<span class="ms-2 block grow md:grow-0 text-sm font-medium text-gray-800 dark:text-white">
Step
</span>
</div>
<div class="mt-2 w-px h-4 md:mt-0 ms-3.5 md:ms-0 md:w-full md:h-px md:flex-1 bg-gray-200 group-last:hidden dark:bg-gray-700"></div>
</li>
<!-- End Item -->
</ul>
<!-- End Stepper -->
White
White stepper example.
-
1 Step
-
2 Step
-
3 Step
<!-- Stepper -->
<ul class="relative flex flex-row gap-x-2">
<!-- Item -->
<li class="flex items-center gap-x-2 shrink basis-0 flex-1 group">
<div class="min-w-[28px] min-h-[28px] inline-flex justify-center items-center text-xs align-middle">
<span class="w-7 h-7 flex justify-center items-center flex-shrink-0 bg-white border border-gray-200 font-medium text-gray-800 rounded-full dark:bg-slate-900 dark:border-gray-700 dark:text-white">
1
</span>
<span class="ms-2 block text-sm font-medium text-gray-800 dark:text-white">
Step
</span>
</div>
<div class="w-full h-px flex-1 bg-gray-200 group-last:hidden dark:bg-gray-700"></div>
</li>
<!-- End Item -->
<!-- Item -->
<li class="flex items-center gap-x-2 shrink basis-0 flex-1 group">
<div class="min-w-[28px] min-h-[28px] inline-flex justify-center items-center text-xs align-middle">
<span class="w-7 h-7 flex justify-center items-center flex-shrink-0 bg-white border border-gray-200 font-medium text-gray-800 rounded-full dark:bg-slate-900 dark:border-gray-700 dark:text-white">
2
</span>
<span class="ms-2 block text-sm font-medium text-gray-800 dark:text-white">
Step
</span>
</div>
<div class="w-full h-px flex-1 bg-gray-200 group-last:hidden dark:bg-gray-700"></div>
</li>
<!-- End Item -->
<!-- Item -->
<li class="flex items-center gap-x-2 shrink basis-0 flex-1 group">
<div class="min-w-[28px] min-h-[28px] inline-flex justify-center items-center text-xs align-middle">
<span class="w-7 h-7 flex justify-center items-center flex-shrink-0 bg-white border border-gray-200 font-medium text-gray-800 rounded-full dark:bg-slate-900 dark:border-gray-700 dark:text-white">
3
</span>
<span class="ms-2 block text-sm font-medium text-gray-800 dark:text-white">
Step
</span>
</div>
<div class="w-full h-px flex-1 bg-gray-200 group-last:hidden dark:bg-gray-700"></div>
</li>
<!-- End Item -->
</ul>
<!-- End Stepper -->
Solid
Solid stepper example.
-
1 Step
-
2 Step
-
3 Step
<!-- Stepper -->
<ul class="relative flex flex-row gap-x-2">
<!-- Item -->
<li class="flex items-center gap-x-2 shrink basis-0 flex-1 group">
<div class="min-w-[28px] min-h-[28px] inline-flex justify-center items-center text-xs align-middle">
<span class="w-7 h-7 flex justify-center items-center flex-shrink-0 bg-gray-800 font-medium text-white rounded-full dark:bg-white dark:text-gray-800">
1
</span>
<span class="ms-2 block text-sm font-medium text-gray-800 dark:text-white">
Step
</span>
</div>
<div class="w-full h-px flex-1 bg-gray-200 group-last:hidden dark:bg-gray-700"></div>
</li>
<!-- End Item -->
<!-- Item -->
<li class="flex items-center gap-x-2 shrink basis-0 flex-1 group">
<div class="min-w-[28px] min-h-[28px] inline-flex justify-center items-center text-xs align-middle">
<span class="w-7 h-7 flex justify-center items-center flex-shrink-0 bg-gray-800 font-medium text-white rounded-full dark:bg-white dark:text-gray-800">
2
</span>
<span class="ms-2 block text-sm font-medium text-gray-800 dark:text-white">
Step
</span>
</div>
<div class="w-full h-px flex-1 bg-gray-200 group-last:hidden dark:bg-gray-700"></div>
</li>
<!-- End Item -->
<!-- Item -->
<li class="flex items-center gap-x-2 shrink basis-0 flex-1 group">
<div class="min-w-[28px] min-h-[28px] inline-flex justify-center items-center text-xs align-middle">
<span class="w-7 h-7 flex justify-center items-center flex-shrink-0 bg-gray-800 font-medium text-white rounded-full dark:bg-white dark:text-gray-800">
3
</span>
<span class="ms-2 block text-sm font-medium text-gray-800 dark:text-white">
Step
</span>
</div>
<div class="w-full h-px flex-1 bg-gray-200 group-last:hidden dark:bg-gray-700"></div>
</li>
<!-- End Item -->
</ul>
<!-- End Stepper -->
Center
Center aligned stepper.
-
1
-
2
-
3
<!-- Stepper -->
<ul class="relative flex flex-row gap-x-2 max-w-xs mx-auto">
<!-- Item -->
<li class="shrink basis-0 flex-1 group">
<div class="min-w-[28px] min-h-[28px] w-full inline-flex items-center text-xs align-middle">
<span class="w-7 h-7 flex justify-center items-center flex-shrink-0 bg-gray-100 font-medium text-gray-800 rounded-full dark:bg-gray-700 dark:text-white">
1
</span>
<div class="ms-2 w-full h-px flex-1 bg-gray-200 group-last:hidden dark:bg-gray-700"></div>
</div>
</li>
<!-- End Item -->
<!-- Item -->
<li class="shrink basis-0 flex-1 group">
<div class="min-w-[28px] min-h-[28px] w-full inline-flex items-center text-xs align-middle">
<span class="w-7 h-7 flex justify-center items-center flex-shrink-0 bg-gray-100 font-medium text-gray-800 rounded-full dark:bg-gray-700 dark:text-white">
2
</span>
<div class="ms-2 w-full h-px flex-1 bg-gray-200 group-last:hidden dark:bg-gray-700"></div>
</div>
</li>
<!-- End Item -->
<!-- Item -->
<li class="shrink basis-0 flex-1 group">
<div class="min-w-[28px] min-h-[28px] w-full inline-flex items-center text-xs align-middle">
<span class="w-7 h-7 flex justify-center items-center flex-shrink-0 bg-gray-100 font-medium text-gray-800 rounded-full dark:bg-gray-700 dark:text-white">
3
</span>
<div class="ms-2 w-full h-px flex-1 bg-gray-200 group-last:hidden dark:bg-gray-700"></div>
</div>
</li>
<!-- End Item -->
</ul>
<!-- End Stepper -->
Working with icon and avatar
You can also add additional elements, such as an avatar image or icons.
-
Step
-
Step
-
Loading... Step
<!-- Stepper -->
<ul class="relative flex flex-row gap-x-2">
<!-- Item -->
<li class="flex items-center gap-x-2 shrink basis-0 flex-1 group">
<div class="min-w-[28px] min-h-[28px] inline-flex justify-center items-center text-xs align-middle">
<img class="flex-shrink-0 w-7 h-7 rounded-full" src="https://images.unsplash.com/photo-1659482633369-9fe69af50bfb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8auto=format&fit=facearea&facepad=3&w=320&h=320&q=80" alt="Image Description">
<span class="ms-2 block text-sm font-medium text-gray-800 dark:text-white">
Step
</span>
</div>
<div class="w-full h-px flex-1 bg-gray-200 group-last:hidden dark:bg-gray-700"></div>
</li>
<!-- End Item -->
<!-- Item -->
<li class="flex items-center gap-x-2 shrink basis-0 flex-1 group">
<div class="min-w-[28px] min-h-[28px] inline-flex justify-center items-center text-xs align-middle">
<span class="w-7 h-7 flex justify-center items-center flex-shrink-0 bg-white border border-gray-200 font-medium text-gray-800 rounded-full dark:bg-slate-900 dark:border-gray-700 dark:text-white">
<svg class="flex-shrink-0 w-4 h-4" 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"><path d="M16 3h5v5"/><path d="M8 3H3v5"/><path d="M12 22v-8.3a4 4 0 0 0-1.172-2.872L3 3"/><path d="m15 9 6-6"/></svg>
</span>
<span class="ms-2 block text-sm font-medium text-gray-800 dark:text-white">
Step
</span>
</div>
<div class="w-full h-px flex-1 bg-gray-200 group-last:hidden dark:bg-gray-700"></div>
</li>
<!-- End Item -->
<!-- Item -->
<li class="flex items-center gap-x-2 shrink basis-0 flex-1 group">
<div class="min-w-[28px] min-h-[28px] inline-flex justify-center items-center text-xs align-middle">
<span class="w-7 h-7 flex justify-center items-center flex-shrink-0 bg-white border border-gray-200 font-medium text-gray-800 rounded-full dark:bg-slate-900 dark:border-gray-700 dark:text-white">
<span class="animate-spin inline-block w-4 h-4 border-[3px] border-current border-t-transparent text-blue-600 rounded-full dark:text-blue-500" role="status" aria-label="loading">
<span class="sr-only">Loading...</span>
</span>
</span>
<span class="ms-2 block text-sm font-medium text-gray-800 dark:text-white">
Step
</span>
</div>
<div class="w-full h-px flex-1 bg-gray-200 group-last:hidden dark:bg-gray-700"></div>
</li>
<!-- End Item -->
</ul>
<!-- End Stepper -->
Linear
Requires JS
Note that this component requires the use of our Stepper plugin, else you can skip this message if you are already using Preline UI as a package.
A dynamic stepper example that guides users through the steps of a task.
- 1 Step
- 2 Step
- 3 Step
First content
<!-- Stepper -->
<div data-hs-stepper>
<!-- Stepper Nav -->
<ul class="relative flex flex-row gap-x-2">
<li class="flex items-center gap-x-2 shrink basis-0 flex-1 group" data-hs-stepper-nav-item='{
"index": 1
}'>
<span class="min-w-[28px] min-h-[28px] group inline-flex items-center text-xs align-middle">
<span class="w-7 h-7 flex justify-center items-center flex-shrink-0 bg-gray-100 font-medium text-gray-800 rounded-full group-focus:bg-gray-200 dark:bg-gray-700 dark:text-white dark:group-focus:bg-gray-600 hs-stepper-active:bg-blue-600 hs-stepper-active:text-white hs-stepper-success:bg-blue-600 hs-stepper-success:text-white hs-stepper-completed:bg-teal-500 hs-stepper-completed:group-focus:bg-teal-600">
<span class="hs-stepper-success:hidden hs-stepper-completed:hidden">1</span>
<svg class="hidden flex-shrink-0 h-3 w-3 hs-stepper-success:block" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
</span>
<span class="ms-2 text-sm font-medium text-gray-800">
Step
</span>
</span>
<div class="w-full h-px flex-1 bg-gray-200 group-last:hidden hs-stepper-success:bg-blue-600 hs-stepper-completed:bg-teal-600"></div>
</li>
<li class="flex items-center gap-x-2 shrink basis-0 flex-1 group" data-hs-stepper-nav-item='{
"index": 2
}'>
<span class="min-w-[28px] min-h-[28px] group inline-flex items-center text-xs align-middle">
<span class="w-7 h-7 flex justify-center items-center flex-shrink-0 bg-gray-100 font-medium text-gray-800 rounded-full group-focus:bg-gray-200 dark:bg-gray-700 dark:text-white dark:group-focus:bg-gray-600 hs-stepper-active:bg-blue-600 hs-stepper-active:text-white hs-stepper-success:bg-blue-600 hs-stepper-success:text-white hs-stepper-completed:bg-teal-500 hs-stepper-completed:group-focus:bg-teal-600">
<span class="hs-stepper-success:hidden hs-stepper-completed:hidden">2</span>
<svg class="hidden flex-shrink-0 h-3 w-3 hs-stepper-success:block" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
</span>
<span class="ms-2 text-sm font-medium text-gray-800">
Step
</span>
</span>
<div class="w-full h-px flex-1 bg-gray-200 group-last:hidden hs-stepper-success:bg-blue-600 hs-stepper-completed:bg-teal-600"></div>
</li>
<li class="flex items-center gap-x-2 shrink basis-0 flex-1 group" data-hs-stepper-nav-item='{
"index": 3
}'>
<span class="min-w-[28px] min-h-[28px] group inline-flex items-center text-xs align-middle">
<span class="w-7 h-7 flex justify-center items-center flex-shrink-0 bg-gray-100 font-medium text-gray-800 rounded-full group-focus:bg-gray-200 dark:bg-gray-700 dark:text-white dark:group-focus:bg-gray-600 hs-stepper-active:bg-blue-600 hs-stepper-active:text-white hs-stepper-success:bg-blue-600 hs-stepper-success:text-white hs-stepper-completed:bg-teal-500 hs-stepper-completed:group-focus:bg-teal-600">
<span class="hs-stepper-success:hidden hs-stepper-completed:hidden">3</span>
<svg class="hidden flex-shrink-0 h-3 w-3 hs-stepper-success:block" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
</span>
<span class="ms-2 text-sm font-medium text-gray-800">
Step
</span>
</span>
<div class="w-full h-px flex-1 bg-gray-200 group-last:hidden hs-stepper-success:bg-blue-600 hs-stepper-completed:bg-teal-600"></div>
</li>
<!-- End Item -->
</ul>
<!-- End Stepper Nav -->
<!-- Stepper Content -->
<div class="mt-5 sm:mt-8">
<!-- First Contnet -->
<div data-hs-stepper-content-item='{
"index": 1
}'>
<div class="p-4 h-48 bg-gray-50 flex justify-center items-center border border-dashed border-gray-200 rounded-xl">
<h3 class="text-gray-500">
First content
</h3>
</div>
</div>
<!-- End First Contnet -->
<!-- First Contnet -->
<div data-hs-stepper-content-item='{
"index": 2
}' style="display: none;">
<div class="p-4 h-48 bg-gray-50 flex justify-center items-center border border-dashed border-gray-200 rounded-xl">
<h3 class="text-gray-500">
Second content
</h3>
</div>
</div>
<!-- End First Contnet -->
<!-- First Contnet -->
<div data-hs-stepper-content-item='{
"index": 3
}' style="display: none;">
<div class="p-4 h-48 bg-gray-50 flex justify-center items-center border border-dashed border-gray-200 rounded-xl">
<h3 class="text-gray-500">
Third content
</h3>
</div>
</div>
<!-- End First Contnet -->
<!-- Final Contnet -->
<div data-hs-stepper-content-item='{
"isFinal": true
}' style="display: none;">
<div class="p-4 h-48 bg-gray-50 flex justify-center items-center border border-dashed border-gray-200 rounded-xl">
<h3 class="text-gray-500">
Final content
</h3>
</div>
</div>
<!-- End Final Contnet -->
<!-- Button Group -->
<div class="mt-5 flex justify-between items-center gap-x-2">
<button type="button" class="py-2 px-3 inline-flex items-center gap-x-1 text-sm font-medium rounded-lg border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none" data-hs-stepper-back-btn>
<svg class="flex-shrink-0 w-4 h-4" 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"><path d="m15 18-6-6 6-6"/></svg>
Back
</button>
<button type="button" class="py-2 px-3 inline-flex items-center gap-x-1 text-sm font-semibold rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none" data-hs-stepper-next-btn>
Next
<svg class="flex-shrink-0 w-4 h-4" 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"><path d="m9 18 6-6-6-6"/></svg>
</button>
<button type="button" class="py-2 px-3 inline-flex items-center gap-x-1 text-sm font-semibold rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none" data-hs-stepper-finish-btn style="display: none;">
Finish
</button>
<button type="reset" class="py-2 px-3 inline-flex items-center gap-x-1 text-sm font-semibold rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none" data-hs-stepper-reset-btn style="display: none;">
Reset
</button>
</div>
<!-- End Button Group -->
</div>
<!-- End Stepper Content -->
</div>
<!-- End Stepper -->
Non-linear
With a "Complete Step" button.
- 1 Step
- 2 Step
- 3 Step
Final content
<!-- Stepper -->
<div data-hs-stepper='{
"mode": "non-linear"
}'>
<!-- Stepper Nav -->
<ul class="relative flex flex-row gap-x-2">
<!-- Item -->
<li class="flex items-center gap-x-2 shrink basis-0 flex-1 group active" data-hs-stepper-nav-item='{
"index": 1
}'>
<span class="min-w-[28px] min-h-[28px] group inline-flex items-center text-xs align-middle focus:outline-none disabled:opacity-50 disabled:pointer-events-none">
<span class="w-7 h-7 flex justify-center items-center flex-shrink-0 bg-gray-100 font-medium text-gray-800 rounded-full group-focus:bg-gray-200 dark:bg-gray-700 dark:text-white dark:group-focus:bg-gray-600 hs-stepper-active:bg-blue-600 hs-stepper-active:text-white hs-stepper-success:bg-blue-600 hs-stepper-success:text-white hs-stepper-completed:bg-teal-500 hs-stepper-completed:group-focus:bg-teal-600">
<span class="hs-stepper-success:hidden hs-stepper-completed:hidden">1</span>
<svg class="hidden flex-shrink-0 h-3 w-3 hs-stepper-success:block" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
</span>
<span class="ms-2 text-sm font-medium text-gray-800 group-focus:text-gray-500 dark:text-white dark:group-focus:text-gray-400">
Step
</span>
</span>
<div class="w-full h-px flex-1 bg-gray-200 group-last:hidden dark:bg-blue-500 hs-stepper-success:bg-blue-600 hs-stepper-completed:bg-teal-600"></div>
</li>
<!-- End Item -->
<!-- Item -->
<li class="flex items-center gap-x-2 shrink basis-0 flex-1 group" data-hs-stepper-nav-item='{
"index": 2
}'>
<span class="min-w-[28px] min-h-[28px] group inline-flex items-center text-xs align-middle focus:outline-none disabled:opacity-50 disabled:pointer-events-none">
<span class="w-7 h-7 flex justify-center items-center flex-shrink-0 bg-gray-100 font-medium text-gray-800 rounded-full group-focus:bg-gray-200 dark:bg-gray-700 dark:text-white dark:group-focus:bg-gray-600 hs-stepper-active:bg-blue-600 hs-stepper-active:text-white hs-stepper-success:bg-blue-600 hs-stepper-success:text-white hs-stepper-completed:bg-teal-500 hs-stepper-completed:group-focus:bg-teal-600">
<span class="hs-stepper-success:hidden hs-stepper-completed:hidden">2</span>
<svg class="hidden flex-shrink-0 h-3 w-3 hs-stepper-success:block" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
</span>
<span class="ms-2 text-sm font-medium text-gray-800 group-focus:text-gray-500 dark:text-white dark:group-focus:text-gray-400">
Step
</span>
</span>
<div class="w-full h-px flex-1 bg-gray-200 group-last:hidden dark:bg-gray-700 hs-stepper-success:bg-blue-600 hs-stepper-completed:bg-teal-600"></div>
</li>
<!-- End Item -->
<!-- Item -->
<li class="flex items-center gap-x-2 shrink basis-0 flex-1 group" data-hs-stepper-nav-item='{
"index": 3
}'>
<span class="min-w-[28px] min-h-[28px] group inline-flex items-center text-xs align-middle focus:outline-none disabled:opacity-50 disabled:pointer-events-none">
<span class="w-7 h-7 flex justify-center items-center flex-shrink-0 bg-gray-100 font-medium text-gray-800 rounded-full group-focus:bg-gray-200 dark:bg-gray-700 dark:text-white dark:group-focus:bg-gray-600 hs-stepper-active:bg-blue-600 hs-stepper-active:text-white hs-stepper-success:bg-blue-600 hs-stepper-success:text-white hs-stepper-completed:bg-teal-500 hs-stepper-completed:group-focus:bg-teal-600">
<span class="hs-stepper-success:hidden hs-stepper-completed:hidden">3</span>
<svg class="hidden flex-shrink-0 h-3 w-3 hs-stepper-success:block" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
</span>
<span class="ms-2 text-sm font-medium text-gray-800 group-focus:text-gray-500 dark:text-white dark:group-focus:text-gray-400">
Step
</span>
</span>
<div class="w-full h-px flex-1 bg-gray-200 group-last:hidden dark:bg-gray-700 hs-stepper-success:bg-blue-600 hs-stepper-completed:bg-teal-600"></div>
</li>
<!-- End Item -->
</ul>
<!-- End Stepper Nav -->
<!-- Stepper Content -->
<div class="mt-5 sm:mt-8">
<!-- First Content -->
<div data-hs-stepper-content-item='{
"index": 1
}' style="display: none;">
<div class="p-4 h-48 bg-gray-50 flex justify-center items-center border border-dashed border-gray-200 rounded-xl dark:bg-gray-800 dark:border-gray-700">
<h3 class="text-gray-500">
First content
</h3>
</div>
</div>
<!-- End First Content -->
<!-- Second Content -->
<div data-hs-stepper-content-item='{
"index": 2
}' style="display: none;">
<div class="p-4 h-48 bg-gray-50 flex justify-center items-center border border-dashed border-gray-200 rounded-xl dark:bg-gray-800 dark:border-gray-700">
<h3 class="text-gray-500">
Second content
</h3>
</div>
</div>
<!-- End Second Content -->
<!-- Third Content -->
<div data-hs-stepper-content-item='{
"index": 3
}' style="display: none;">
<div class="p-4 h-48 bg-gray-50 flex justify-center items-center border border-dashed border-gray-200 rounded-xl dark:bg-gray-800 dark:border-gray-700">
<h3 class="text-gray-500">
Third content
</h3>
</div>
</div>
<!-- End Third Content -->
<!-- Final Content -->
<div data-hs-stepper-content-item='{
"isFinal": true
}'>
<div class="p-4 h-48 bg-gray-50 flex justify-center items-center border border-dashed border-gray-200 rounded-xl">
<h3 class="text-gray-500">
Final content
</h3>
</div>
</div>
<!-- End Final Content -->
<div class="mt-5 flex justify-between items-center gap-x-2">
<button type="button" class="py-2 px-3 inline-flex items-center gap-x-1 text-sm font-medium rounded-lg border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none" data-hs-stepper-back-btn>
<svg class="flex-shrink-0 w-4 h-4" 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"><path d="m15 18-6-6 6-6"/></svg>
Back
</button>
<button type="button" class="py-2 px-3 inline-flex items-center gap-x-1 text-sm font-semibold rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none" data-hs-stepper-skip-btn style="display: none;">
Skip
</button>
<button type="button" class="py-2 px-3 inline-flex items-center gap-x-1 text-sm font-semibold rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none" data-hs-stepper-complete-step-btn='{
"completedText": "This step is completed"
}'>
Complete Step
</button>
<button type="button" class="py-2 px-3 inline-flex items-center gap-x-1 text-sm font-semibold rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none" data-hs-stepper-next-btn>
Next
<svg class="flex-shrink-0 w-4 h-4" 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"><path d="m9 18 6-6-6-6"/></svg>
</button>
<button type="button" class="py-2 px-3 inline-flex items-center gap-x-1 text-sm font-semibold rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none" data-hs-stepper-finish-btn style="display: none;">
Finish
</button>
<button type="reset" class="py-2 px-3 inline-flex items-center gap-x-1 text-sm font-semibold rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none" data-hs-stepper-reset-btn style="display: none;">
Reset
</button>
</div>
</div>
<!-- End Stepper Content -->
</div>
<!-- End Stepper -->
Skipped
A skip button step example.
- 1 Step
- 2 Step
- 3 Step
Final content
<!-- Stepper -->
<div data-hs-stepper>
<!-- Stepper Nav -->
<ul class="relative flex flex-row gap-x-2">
<!-- Item -->
<li class="flex items-center gap-x-2 shrink basis-0 flex-1 group active" data-hs-stepper-nav-item='{
"index": 1,
"isOptional": true
}'>
<span class="min-w-[28px] min-h-[28px] group inline-flex items-center text-xs align-middle focus:outline-none disabled:opacity-50 disabled:pointer-events-none">
<span class="w-7 h-7 flex justify-center items-center flex-shrink-0 bg-gray-100 font-medium text-gray-800 rounded-full group-focus:bg-gray-200 dark:bg-gray-700 dark:text-white dark:group-focus:bg-gray-600 hs-stepper-active:bg-blue-600 hs-stepper-active:text-white hs-stepper-success:bg-blue-600 hs-stepper-success:text-white hs-stepper-completed:bg-teal-500 hs-stepper-completed:group-focus:bg-teal-600">
<span class="hs-stepper-success:hidden hs-stepper-completed:hidden">1</span>
<svg class="hidden flex-shrink-0 h-3 w-3 hs-stepper-success:block" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
</span>
<span class="ms-2 text-sm font-medium text-gray-800 group-focus:text-gray-500 dark:text-white dark:group-focus:text-gray-400">
Step
</span>
</span>
<div class="w-full h-px flex-1 bg-gray-200 group-last:hidden dark:bg-blue-500 hs-stepper-success:bg-blue-600 hs-stepper-completed:bg-teal-600"></div>
</li>
<!-- End Item -->
<!-- Item -->
<li class="flex items-center gap-x-2 shrink basis-0 flex-1 group" data-hs-stepper-nav-item='{
"index": 2,
"isOptional": true
}'>
<span class="min-w-[28px] min-h-[28px] group inline-flex items-center text-xs align-middle focus:outline-none disabled:opacity-50 disabled:pointer-events-none">
<span class="w-7 h-7 flex justify-center items-center flex-shrink-0 bg-gray-100 font-medium text-gray-800 rounded-full group-focus:bg-gray-200 dark:bg-gray-700 dark:text-white dark:group-focus:bg-gray-600 hs-stepper-active:bg-blue-600 hs-stepper-active:text-white hs-stepper-success:bg-blue-600 hs-stepper-success:text-white hs-stepper-completed:bg-teal-500 hs-stepper-completed:group-focus:bg-teal-600">
<span class="hs-stepper-success:hidden hs-stepper-completed:hidden">2</span>
<svg class="hidden flex-shrink-0 h-3 w-3 hs-stepper-success:block" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
</span>
<span class="ms-2 text-sm font-medium text-gray-800 group-focus:text-gray-500 dark:text-white dark:group-focus:text-gray-400">
Step
</span>
</span>
<div class="w-full h-px flex-1 bg-gray-200 group-last:hidden dark:bg-gray-700 hs-stepper-success:bg-blue-600 hs-stepper-completed:bg-teal-600"></div>
</li>
<!-- End Item -->
<!-- Item -->
<li class="flex items-center gap-x-2 shrink basis-0 flex-1 group" data-hs-stepper-nav-item='{
"index": 3
}'>
<span class="min-w-[28px] min-h-[28px] group inline-flex items-center text-xs align-middle focus:outline-none disabled:opacity-50 disabled:pointer-events-none">
<span class="w-7 h-7 flex justify-center items-center flex-shrink-0 bg-gray-100 font-medium text-gray-800 rounded-full group-focus:bg-gray-200 dark:bg-gray-700 dark:text-white dark:group-focus:bg-gray-600 hs-stepper-active:bg-blue-600 hs-stepper-active:text-white hs-stepper-success:bg-blue-600 hs-stepper-success:text-white hs-stepper-completed:bg-teal-500 hs-stepper-completed:group-focus:bg-teal-600">
<span class="hs-stepper-success:hidden hs-stepper-completed:hidden">3</span>
<svg class="hidden flex-shrink-0 h-3 w-3 hs-stepper-success:block" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
</span>
<span class="ms-2 text-sm font-medium text-gray-800 group-focus:text-gray-500 dark:text-white dark:group-focus:text-gray-400">
Step
</span>
</span>
<div class="w-full h-px flex-1 bg-gray-200 group-last:hidden dark:bg-gray-700 hs-stepper-success:bg-blue-600 hs-stepper-completed:bg-teal-600"></div>
</li>
<!-- End Item -->
</ul>
<!-- End Stepper Nav -->
<!-- Stepper Content -->
<div class="mt-5 sm:mt-8">
<!-- First Content -->
<div data-hs-stepper-content-item='{
"index": 1
}' style="display: none;">
<div class="p-4 h-48 bg-gray-50 flex justify-center items-center border border-dashed border-gray-200 rounded-xl dark:bg-gray-800 dark:border-gray-700">
<h3 class="text-gray-500">
First content
</h3>
</div>
</div>
<!-- End First Content -->
<!-- Second Content -->
<div data-hs-stepper-content-item='{
"index": 2
}' style="display: none;">
<div class="p-4 h-48 bg-gray-50 flex justify-center items-center border border-dashed border-gray-200 rounded-xl dark:bg-gray-800 dark:border-gray-700">
<h3 class="text-gray-500">
Second content
</h3>
</div>
</div>
<!-- End Second Content -->
<!-- Third Content -->
<div data-hs-stepper-content-item='{
"index": 3
}' style="display: none;">
<div class="p-4 h-48 bg-gray-50 flex justify-center items-center border border-dashed border-gray-200 rounded-xl dark:bg-gray-800 dark:border-gray-700">
<h3 class="text-gray-500">
Third content
</h3>
</div>
</div>
<!-- End Third Content -->
<!-- Final Content -->
<div data-hs-stepper-content-item='{
"isFinal": true
}'>
<div class="p-4 h-48 bg-gray-50 flex justify-center items-center border border-dashed border-gray-200 rounded-xl">
<h3 class="text-gray-500">
Final content
</h3>
</div>
</div>
<!-- End Final Content -->
<div class="mt-5 flex justify-between items-center gap-x-2">
<button type="button" class="py-2 px-3 inline-flex items-center gap-x-1 text-sm font-medium rounded-lg border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none" data-hs-stepper-back-btn>
<svg class="flex-shrink-0 w-4 h-4" 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"><path d="m15 18-6-6 6-6"/></svg>
Back
</button>
<button type="button" class="py-2 px-3 inline-flex items-center gap-x-1 text-sm font-semibold rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none" data-hs-stepper-skip-btn style="display: none;">
Skip
</button>
<button type="button" class="py-2 px-3 inline-flex items-center gap-x-1 text-sm font-semibold rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none" data-hs-stepper-next-btn>
Next
<svg class="flex-shrink-0 w-4 h-4" 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"><path d="m9 18 6-6-6-6"/></svg>
</button>
<button type="button" class="py-2 px-3 inline-flex items-center gap-x-1 text-sm font-semibold rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none" data-hs-stepper-finish-btn style="display: none;">
Finish
</button>
<button type="reset" class="py-2 px-3 inline-flex items-center gap-x-1 text-sm font-semibold rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none" data-hs-stepper-reset-btn style="display: none;">
Reset
</button>
</div>
</div>
<!-- End Stepper Content -->
</div>
<!-- Stepper -->
Active
Active stepper example.
- 1 Step
- 2 Step
- 3 Step
Second content
<!-- Stepper -->
<div data-hs-stepper='{
"currentIndex": 2
}'>
<!-- Stepper Nav -->
<ul class="relative flex flex-row gap-x-2">
<li class="flex items-center gap-x-2 shrink basis-0 flex-1 group success" data-hs-stepper-nav-item='{
"index": 1,
"isCompleted": true
}'>
<span class="min-w-[28px] min-h-[28px] group inline-flex items-center text-xs align-middle">
<span class="w-7 h-7 flex justify-center items-center flex-shrink-0 bg-gray-100 font-medium text-gray-800 rounded-full group-focus:bg-gray-200 dark:bg-gray-700 dark:text-white dark:group-focus:bg-gray-600 hs-stepper-active:bg-blue-600 hs-stepper-active:text-white hs-stepper-success:bg-blue-600 hs-stepper-success:text-white hs-stepper-completed:bg-teal-500 hs-stepper-completed:group-focus:bg-teal-600">
<span class="hs-stepper-success:hidden hs-stepper-completed:hidden">1</span>
<svg class="hidden flex-shrink-0 h-3 w-3 hs-stepper-success:block" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
</span>
<span class="ms-2 text-sm font-medium text-gray-800">
Step
</span>
</span>
<div class="w-full h-px flex-1 bg-gray-200 group-last:hidden hs-stepper-success:bg-blue-600 hs-stepper-completed:bg-teal-600"></div>
</li>
<li class="flex items-center gap-x-2 shrink basis-0 flex-1 group active" data-hs-stepper-nav-item='{
"index": 2
}'>
<span class="min-w-[28px] min-h-[28px] group inline-flex items-center text-xs align-middle">
<span class="w-7 h-7 flex justify-center items-center flex-shrink-0 bg-gray-100 font-medium text-gray-800 rounded-full group-focus:bg-gray-200 dark:bg-gray-700 dark:text-white dark:group-focus:bg-gray-600 hs-stepper-active:bg-blue-600 hs-stepper-active:text-white hs-stepper-success:bg-blue-600 hs-stepper-success:text-white hs-stepper-completed:bg-teal-500 hs-stepper-completed:group-focus:bg-teal-600">
<span class="hs-stepper-success:hidden hs-stepper-completed:hidden">2</span>
<svg class="hidden flex-shrink-0 h-3 w-3 hs-stepper-success:block" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
</span>
<span class="ms-2 text-sm font-medium text-gray-800">
Step
</span>
</span>
<div class="w-full h-px flex-1 bg-gray-200 group-last:hidden hs-stepper-success:bg-blue-600 hs-stepper-completed:bg-teal-600"></div>
</li>
<li class="flex items-center gap-x-2 shrink basis-0 flex-1 group" data-hs-stepper-nav-item='{
"index": 3
}'>
<span class="min-w-[28px] min-h-[28px] group inline-flex items-center text-xs align-middle">
<span class="w-7 h-7 flex justify-center items-center flex-shrink-0 bg-gray-100 font-medium text-gray-800 rounded-full group-focus:bg-gray-200 dark:bg-gray-700 dark:text-white dark:group-focus:bg-gray-600 hs-stepper-active:bg-blue-600 hs-stepper-active:text-white hs-stepper-success:bg-blue-600 hs-stepper-success:text-white hs-stepper-completed:bg-teal-500 hs-stepper-completed:group-focus:bg-teal-600">
<span class="hs-stepper-success:hidden hs-stepper-completed:hidden">3</span>
<svg class="hidden flex-shrink-0 h-3 w-3 hs-stepper-success:block" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
</span>
<span class="ms-2 text-sm font-medium text-gray-800">
Step
</span>
</span>
<div class="w-full h-px flex-1 bg-gray-200 group-last:hidden hs-stepper-success:bg-blue-600 hs-stepper-completed:bg-teal-600"></div>
</li>
<!-- End Item -->
</ul>
<!-- End Stepper Nav -->
<!-- Stepper Content -->
<div class="mt-5 sm:mt-8">
<!-- First Content -->
<div data-hs-stepper-content-item='{
"index": 1,
"isCompleted": true
}' class="success" style="display: none;">
<div class="p-4 h-48 bg-gray-50 flex justify-center items-center border border-dashed border-gray-200 rounded-xl">
<h3 class="text-gray-500">
First content
</h3>
</div>
</div>
<!-- End First Content -->
<!-- First Content -->
<div data-hs-stepper-content-item='{
"index": 2
}' class="active">
<div class="p-4 h-48 bg-gray-50 flex justify-center items-center border border-dashed border-gray-200 rounded-xl">
<h3 class="text-gray-500">
Second content
</h3>
</div>
</div>
<!-- End First Content -->
<!-- First Content -->
<div data-hs-stepper-content-item='{
"index": 3
}' style="display: none;">
<div class="p-4 h-48 bg-gray-50 flex justify-center items-center border border-dashed border-gray-200 rounded-xl">
<h3 class="text-gray-500">
Third content
</h3>
</div>
</div>
<!-- End First Content -->
<!-- Final Content -->
<div data-hs-stepper-content-item='{
"isFinal": true
}' style="display: none;">
<div class="p-4 h-48 bg-gray-50 flex justify-center items-center border border-dashed border-gray-200 rounded-xl">
<h3 class="text-gray-500">
Final content
</h3>
</div>
</div>
<!-- End Final Content -->
<!-- Button Group -->
<div class="mt-5 flex justify-between items-center gap-x-2">
<button type="button" class="py-2 px-3 inline-flex items-center gap-x-1 text-sm font-medium rounded-lg border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none" data-hs-stepper-back-btn>
<svg class="flex-shrink-0 w-4 h-4" 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"><path d="m15 18-6-6 6-6"/></svg>
Back
</button>
<button type="button" class="py-2 px-3 inline-flex items-center gap-x-1 text-sm font-semibold rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none" data-hs-stepper-next-btn>
Next
<svg class="flex-shrink-0 w-4 h-4" 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"><path d="m9 18 6-6-6-6"/></svg>
</button>
<button type="button" class="py-2 px-3 inline-flex items-center gap-x-1 text-sm font-semibold rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none" data-hs-stepper-finish-btn style="display: none;">
Finish
</button>
<button type="reset" class="py-2 px-3 inline-flex items-center gap-x-1 text-sm font-semibold rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none" data-hs-stepper-reset-btn style="display: none;">
Reset
</button>
</div>
<!-- End Button Group -->
</div>
<!-- End Stepper Content -->
</div>
<!-- End Stepper -->
Error
Error stepper example.
- 1 Loading... Step
- 2 Loading... Step
- 3 Loading... Step
Second content
<!-- Stepper -->
<div data-hs-stepper='{
"currentIndex": 2
}'>
<!-- Stepper Nav -->
<ul class="relative flex flex-row gap-x-2">
<!-- Item -->
<li class="flex items-center gap-x-2 shrink basis-0 flex-1 group success" data-hs-stepper-nav-item='{
"index": 1,
"isCompleted": true
}'>
<span class="min-w-[28px] min-h-[28px] group inline-flex items-center text-xs align-middle focus:outline-none disabled:opacity-50 disabled:pointer-events-none">
<span class="w-7 h-7 flex justify-center items-center flex-shrink-0 bg-gray-100 font-medium text-gray-800 rounded-full group-focus:bg-gray-200 dark:bg-gray-700 dark:text-white dark:group-focus:bg-gray-600 hs-stepper-active:bg-blue-600 hs-stepper-success:bg-blue-600 hs-stepper-completed:bg-teal-500 hs-stepper-completed:group-focus:bg-teal-600 hs-stepper-error:bg-red-500 hs-stepper-active:text-white hs-stepper-success:text-white hs-stepper-processed:bg-white hs-stepper-processed:border hs-stepper-processed:border-gray-200 hs-stepper-processed:dark:border-gray-700">
<span class="hs-stepper-success:hidden hs-stepper-completed:hidden hs-stepper-error:hidden hs-stepper-processed:hidden">1</span>
<svg class="hidden flex-shrink-0 h-3 w-3 hs-stepper-success:block" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
<svg class="hidden flex-shrink-0 h-3 w-3 hs-stepper-error:block" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
<span class="hidden animate-spin w-4 h-4 border-[3px] border-current border-t-transparent text-blue-600 rounded-full dark:text-blue-500 hs-stepper-processed:inline-block" role="status" aria-label="loading">
<span class="sr-only">Loading...</span>
</span>
</span>
<span class="ms-2 text-sm font-medium text-gray-800 group-focus:text-gray-500 dark:text-white dark:group-focus:text-gray-400">
Step
</span>
</span>
<div class="w-full h-px flex-1 bg-gray-200 group-last:hidden dark:bg-blue-500 hs-stepper-success:bg-blue-600 hs-stepper-completed:bg-teal-600"></div>
</li>
<!-- End Item -->
<!-- Item -->
<li class="flex items-center gap-x-2 shrink basis-0 flex-1 group error" data-hs-stepper-nav-item='{
"index": 2,
"hasError": true
}'>
<span class="min-w-[28px] min-h-[28px] group inline-flex items-center text-xs align-middle focus:outline-none disabled:opacity-50 disabled:pointer-events-none">
<span class="w-7 h-7 flex justify-center items-center flex-shrink-0 bg-gray-100 font-medium text-gray-800 rounded-full group-focus:bg-gray-200 dark:bg-gray-700 dark:text-white dark:group-focus:bg-gray-600 hs-stepper-active:bg-blue-600 hs-stepper-success:bg-blue-600 hs-stepper-completed:bg-teal-500 hs-stepper-completed:group-focus:bg-teal-600 hs-stepper-error:bg-red-500 hs-stepper-active:text-white hs-stepper-success:text-white hs-stepper-processed:bg-white hs-stepper-processed:border hs-stepper-processed:border-gray-200 hs-stepper-processed:dark:border-gray-700">
<span class="hs-stepper-success:hidden hs-stepper-completed:hidden hs-stepper-error:hidden hs-stepper-processed:hidden">2</span>
<svg class="hidden flex-shrink-0 h-3 w-3 hs-stepper-success:block" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
<svg class="hidden flex-shrink-0 h-3 w-3 hs-stepper-error:block" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
<span class="hidden animate-spin w-4 h-4 border-[3px] border-current border-t-transparent text-blue-600 rounded-full dark:text-blue-500 hs-stepper-processed:inline-block" role="status" aria-label="loading">
<span class="sr-only">Loading...</span>
</span>
</span>
<span class="ms-2 text-sm font-medium text-gray-800 group-focus:text-gray-500 dark:text-white dark:group-focus:text-gray-400">
Step
</span>
</span>
<div class="w-full h-px flex-1 bg-gray-200 group-last:hidden dark:bg-gray-700 hs-stepper-success:bg-blue-600 hs-stepper-completed:bg-teal-600"></div>
</li>
<!-- End Item -->
<!-- Item -->
<li class="flex items-center gap-x-2 shrink basis-0 flex-1 group" data-hs-stepper-nav-item='{
"index": 3
}'>
<span class="min-w-[28px] min-h-[28px] group inline-flex items-center text-xs align-middle focus:outline-none disabled:opacity-50 disabled:pointer-events-none">
<span class="w-7 h-7 flex justify-center items-center flex-shrink-0 bg-gray-100 font-medium text-gray-800 rounded-full group-focus:bg-gray-200 dark:bg-gray-700 dark:text-white dark:group-focus:bg-gray-600 hs-stepper-active:bg-blue-600 hs-stepper-success:bg-blue-600 hs-stepper-completed:bg-teal-500 hs-stepper-completed:group-focus:bg-teal-600 hs-stepper-error:bg-red-500 hs-stepper-active:text-white hs-stepper-success:text-white hs-stepper-processed:bg-white hs-stepper-processed:border hs-stepper-processed:border-gray-200 hs-stepper-processed:dark:border-gray-700">
<span class="hs-stepper-success:hidden hs-stepper-completed:hidden hs-stepper-error:hidden hs-stepper-processed:hidden">3</span>
<svg class="hidden flex-shrink-0 h-3 w-3 hs-stepper-success:block" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
<svg class="hidden flex-shrink-0 h-3 w-3 hs-stepper-error:block" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
<span class="hidden animate-spin w-4 h-4 border-[3px] border-current border-t-transparent text-blue-600 rounded-full dark:text-blue-500 hs-stepper-processed:inline-block" role="status" aria-label="loading">
<span class="sr-only">Loading...</span>
</span>
</span>
<span class="ms-2 text-sm font-medium text-gray-800 group-focus:text-gray-500 dark:text-white dark:group-focus:text-gray-400">
Step
</span>
</span>
<div class="w-full h-px flex-1 bg-gray-200 group-last:hidden dark:bg-gray-700 hs-stepper-success:bg-blue-600 hs-stepper-completed:bg-teal-600"></div>
</li>
<!-- End Item -->
</ul>
<!-- End Stepper Nav -->
<!-- Stepper Content -->
<div class="mt-5 sm:mt-8">
<!-- First Content -->
<div data-hs-stepper-content-item='{
"index": 1,
"isCompleted": true
}' style="display: none;">
<div class="p-4 h-48 bg-gray-50 flex justify-center items-center border border-dashed border-gray-200 rounded-xl dark:bg-gray-800 dark:border-gray-700">
<h3 class="text-gray-500">
First content
</h3>
</div>
</div>
<!-- End First Content -->
<!-- Second Content -->
<div data-hs-stepper-content-item='{
"index": 2
}'>
<div class="p-4 h-48 bg-gray-50 flex justify-center items-center border border-dashed border-gray-200 rounded-xl dark:bg-gray-800 dark:border-gray-700">
<h3 class="text-gray-500">
Second content
</h3>
</div>
</div>
<!-- End Second Content -->
<!-- Third Content -->
<div data-hs-stepper-content-item='{
"index": 3
}' style="display: none;">
<div class="p-4 h-48 bg-gray-50 flex justify-center items-center border border-dashed border-gray-200 rounded-xl dark:bg-gray-800 dark:border-gray-700">
<h3 class="text-gray-500">
Third content
</h3>
</div>
</div>
<!-- End Third Content -->
<!-- Final Content -->
<div data-hs-stepper-content-item='{
"isFinal": true
}' style="display: none;">
<div class="p-4 h-48 bg-gray-50 flex justify-center items-center border border-dashed border-gray-200 rounded-xl">
<h3 class="text-gray-500">
Final content
</h3>
</div>
</div>
<!-- End Final Content -->
<div class="mt-5 flex justify-between items-center gap-x-2">
<button type="button" class="py-2 px-3 inline-flex items-center gap-x-1 text-sm font-medium rounded-lg border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none" data-hs-stepper-back-btn>
<svg class="flex-shrink-0 w-4 h-4" 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"><path d="m15 18-6-6 6-6"/></svg>
Back
</button>
<button type="button" class="py-2 px-3 inline-flex items-center gap-x-1 text-sm font-semibold rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none" data-hs-stepper-next-btn>
Next
<svg class="flex-shrink-0 w-4 h-4" 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"><path d="m9 18 6-6-6-6"/></svg>
</button>
<button type="button" class="py-2 px-3 inline-flex items-center gap-x-1 text-sm font-semibold rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none" data-hs-stepper-finish-btn style="display: none;">
Finish
</button>
<button type="reset" class="py-2 px-3 inline-flex items-center gap-x-1 text-sm font-semibold rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none" data-hs-stepper-reset-btn style="display: none;">
Reset
</button>
</div>
</div>
<!-- End Stepper Content -->
</div>
<!-- End Stepper -->
<script>
(function () {
window.addEventListener('load', () => {
const errorStepper = HSStepper.getInstance('#ctc-component-7-tab-1 [data-hs-stepper]');
let errorSuccessState = 1;
errorStepper.on('beforeNext', (ind) => {
if (ind === 2) {
errorStepper.setProcessedNavItem(ind);
setTimeout(() => {
errorStepper.unsetProcessedNavItem(ind);
errorStepper.enableButtons();
if (errorSuccessState) {
errorStepper.goToNext();
} else {
errorStepper.setErrorNavItem(ind);
}
errorSuccessState = !errorSuccessState;
}, 2000);
}
});
});
})();
</script>
Success
Success stepper example.
- 1 Step
- 2 Step
- 3 Step
Final content
<!-- Stepper -->
<div data-hs-stepper='{
"isCompleted": true
}' class="completed">
<!-- Stepper Nav -->
<ul class="relative flex flex-row gap-x-2">
<!-- Item -->
<li class="flex items-center gap-x-2 shrink basis-0 flex-1 group success" data-hs-stepper-nav-item='{
"index": 1,
"isCompleted": true
}'>
<span class="min-w-[28px] min-h-[28px] group inline-flex items-center text-xs align-middle focus:outline-none disabled:opacity-50 disabled:pointer-events-none">
<span class="w-7 h-7 flex justify-center items-center flex-shrink-0 bg-gray-100 font-medium text-gray-800 rounded-full group-focus:bg-gray-200 dark:bg-gray-700 dark:text-white dark:group-focus:bg-gray-600 hs-stepper-active:bg-blue-600 hs-stepper-active:text-white hs-stepper-success:bg-blue-600 hs-stepper-success:text-white hs-stepper-completed:bg-teal-500 hs-stepper-completed:group-focus:bg-teal-600">
<span class="hs-stepper-success:hidden hs-stepper-completed:hidden">1</span>
<svg class="hidden flex-shrink-0 h-3 w-3 hs-stepper-success:block" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
</span>
<span class="ms-2 text-sm font-medium text-gray-800 group-focus:text-gray-500 dark:text-white dark:group-focus:text-gray-400">
Step
</span>
</span>
<div class="w-full h-px flex-1 bg-gray-200 group-last:hidden dark:bg-blue-500 hs-stepper-success:bg-blue-600 hs-stepper-completed:bg-teal-600"></div>
</li>
<!-- End Item -->
<!-- Item -->
<li class="flex items-center gap-x-2 shrink basis-0 flex-1 group success" data-hs-stepper-nav-item='{
"index": 2,
"isCompleted": true
}'>
<span class="min-w-[28px] min-h-[28px] group inline-flex items-center text-xs align-middle focus:outline-none disabled:opacity-50 disabled:pointer-events-none">
<span class="w-7 h-7 flex justify-center items-center flex-shrink-0 bg-gray-100 font-medium text-gray-800 rounded-full group-focus:bg-gray-200 dark:bg-gray-700 dark:text-white dark:group-focus:bg-gray-600 hs-stepper-active:bg-blue-600 hs-stepper-active:text-white hs-stepper-success:bg-blue-600 hs-stepper-success:text-white hs-stepper-completed:bg-teal-500 hs-stepper-completed:group-focus:bg-teal-600">
<span class="hs-stepper-success:hidden hs-stepper-completed:hidden">2</span>
<svg class="hidden flex-shrink-0 h-3 w-3 hs-stepper-success:block" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
</span>
<span class="ms-2 text-sm font-medium text-gray-800 group-focus:text-gray-500 dark:text-white dark:group-focus:text-gray-400">
Step
</span>
</span>
<div class="w-full h-px flex-1 bg-gray-200 group-last:hidden dark:bg-gray-700 hs-stepper-success:bg-blue-600 hs-stepper-completed:bg-teal-600"></div>
</li>
<!-- End Item -->
<!-- Item -->
<li class="flex items-center gap-x-2 shrink basis-0 flex-1 group active success" data-hs-stepper-nav-item='{
"index": 3,
"isCompleted": true
}'>
<span class="min-w-[28px] min-h-[28px] group inline-flex items-center text-xs align-middle focus:outline-none disabled:opacity-50 disabled:pointer-events-none">
<span class="w-7 h-7 flex justify-center items-center flex-shrink-0 bg-gray-100 font-medium text-gray-800 rounded-full group-focus:bg-gray-200 dark:bg-gray-700 dark:text-white dark:group-focus:bg-gray-600 hs-stepper-active:bg-blue-600 hs-stepper-active:text-white hs-stepper-success:bg-blue-600 hs-stepper-success:text-white hs-stepper-completed:bg-teal-500 hs-stepper-completed:group-focus:bg-teal-600">
<span class="hs-stepper-success:hidden hs-stepper-completed:hidden">3</span>
<svg class="hidden flex-shrink-0 h-3 w-3 hs-stepper-success:block" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
</span>
<span class="ms-2 text-sm font-medium text-gray-800 group-focus:text-gray-500 dark:text-white dark:group-focus:text-gray-400">
Step
</span>
</span>
<div class="w-full h-px flex-1 bg-gray-200 group-last:hidden dark:bg-gray-700 hs-stepper-success:bg-blue-600 hs-stepper-completed:bg-teal-600"></div>
</li>
<!-- End Item -->
</ul>
<!-- End Stepper Nav -->
<!-- Stepper Content -->
<div class="mt-5 sm:mt-8">
<!-- First Content -->
<div data-hs-stepper-content-item='{
"index": 1,
"isCompleted": true
}' style="display: none;">
<div class="p-4 h-48 bg-gray-50 flex justify-center items-center border border-dashed border-gray-200 rounded-xl dark:bg-gray-800 dark:border-gray-700">
<h3 class="text-gray-500">
First content
</h3>
</div>
</div>
<!-- End First Content -->
<!-- Second Content -->
<div data-hs-stepper-content-item='{
"index": 2,
"isCompleted": true
}' style="display: none;">
<div class="p-4 h-48 bg-gray-50 flex justify-center items-center border border-dashed border-gray-200 rounded-xl dark:bg-gray-800 dark:border-gray-700">
<h3 class="text-gray-500">
Second content
</h3>
</div>
</div>
<!-- End Second Content -->
<!-- Third Content -->
<div data-hs-stepper-content-item='{
"index": 3,
"isCompleted": true
}' style="display: none;">
<div class="p-4 h-48 bg-gray-50 flex justify-center items-center border border-dashed border-gray-200 rounded-xl dark:bg-gray-800 dark:border-gray-700">
<h3 class="text-gray-500">
Third content
</h3>
</div>
</div>
<!-- End Third Content -->
<!-- Final Content -->
<div data-hs-stepper-content-item='{
"isFinal": true
}'>
<div class="p-4 h-48 bg-gray-50 flex justify-center items-center border border-dashed border-gray-200 rounded-xl">
<h3 class="text-gray-500">
Final content
</h3>
</div>
</div>
<!-- End Final Content -->
<div class="mt-5 flex justify-between items-center gap-x-2">
<button type="button" class="py-2 px-3 inline-flex items-center gap-x-1 text-sm font-medium rounded-lg border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none" data-hs-stepper-back-btn style="display: none;">
<svg class="flex-shrink-0 w-4 h-4" 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"><path d="m15 18-6-6 6-6"/></svg>
Back
</button>
<button type="button" class="py-2 px-3 inline-flex items-center gap-x-1 text-sm font-semibold rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none" data-hs-stepper-next-btn style="display: none;">
Next
<svg class="flex-shrink-0 w-4 h-4" 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"><path d="m9 18 6-6-6-6"/></svg>
</button>
<button type="button" class="py-2 px-3 inline-flex items-center gap-x-1 text-sm font-semibold rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none" data-hs-stepper-finish-btn style="display: none;">
Finish
</button>
<button type="reset" class="py-2 px-3 inline-flex items-center gap-x-1 text-sm font-semibold rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none" data-hs-stepper-reset-btn>
Reset
</button>
</div>
</div>
<!-- End Stepper Content -->
</div>
<!-- End Stepper -->