Basic example
You can automatically initialize the stepper component using
data-twe-stepper-init attribute.
-
1 step1Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-
2 step2Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-
3 step3Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
<ul
data-twe-stepper-init
class="relative m-0 flex w-full list-none justify-between overflow-hidden p-0 transition-[height] duration-200 ease-in-out">
<li data-twe-stepper-step-ref class="w-[4.5rem] flex-auto">
<div
data-twe-stepper-head-ref
class="flex cursor-pointer items-center ps-6 leading-[1.3rem] no-underline after:ms-2 after:h-px after:w-full after:flex-1 after:bg-neutral-200 after:content-[''] hover:bg-stone-50 dark:after:bg-white/10 dark:hover:bg-white/[.025]">
<span
data-twe-stepper-head-icon-ref
class="my-6 me-2 flex h-[1.938rem] w-[1.938rem] items-center justify-center rounded-full text-sm">
1
</span>
<span
data-twe-stepper-head-text-ref
class="after:absolute after:flex after:text-[0.8rem]">
step1
</span>
</div>
<div
data-twe-stepper-content-ref
class="absolute w-full p-4 transition-all duration-500 ease-in-out">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</li>
<li data-twe-stepper-step-ref class="w-[4.5rem] flex-auto">
<div
data-twe-stepper-head-ref
class="flex cursor-pointer items-center leading-[1.3rem] no-underline before:me-2 before:h-px before:w-full before:flex-1 before:bg-neutral-200 before:content-[''] after:ms-2 after:h-px after:w-full after:flex-1 after:bg-neutral-200 after:content-[''] hover:bg-stone-50 dark:before:bg-white/10 dark:after:bg-white/10 dark:hover:bg-white/[.025]">
<span
data-twe-stepper-head-icon-ref
class="my-6 me-2 flex h-[1.938rem] w-[1.938rem] items-center justify-center rounded-full text-sm">
2
</span>
<span
data-twe-stepper-head-text-ref
class="after:absolute after:flex after:text-[0.8rem]">
step2
</span>
</div>
<div
data-twe-stepper-content-ref
class="absolute left-0 w-full translate-x-[150%] p-4 transition-all duration-500 ease-in-out">
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</div>
</li>
<li data-twe-stepper-step-ref class="w-[4.5rem] flex-auto">
<div
data-twe-stepper-head-ref
class="flex cursor-pointer items-center pe-6 leading-[1.3rem] no-underline before:me-2 before:h-px before:w-full before:flex-1 before:bg-neutral-200 before:content-[''] hover:bg-stone-50 dark:before:bg-white/10 dark:after:bg-white/10 dark:hover:bg-white/[.025]">
<span
data-twe-stepper-head-icon-ref
class="my-6 me-2 flex h-[1.938rem] w-[1.938rem] items-center justify-center rounded-full text-sm">
3
</span>
<span
data-twe-stepper-head-text-ref
class="after:absolute after:flex after:text-[0.8rem]">
step3
</span>
</div>
<div
data-twe-stepper-content-ref
class="absolute left-0 w-full translate-x-[150%] p-4 transition-all duration-500 ease-in-out">
Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur.
</div>
</li>
</ul>
// Initialization for ES Users
import {
Stepper,
initTWE,
} from "tw-elements";
initTWE({ Stepper });
Change steps using external elements
To go to the next or previous step, you can use the
nextStep and prevStep methods. You can also choose
a specific step using the changeStep method by entering the
step index.
-
1 step1Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-
2 step2Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-
3 step3Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
<div class="mb-5 space-x-1">
<button
id="prev-step"
type="button"
data-twe-ripple-init
data-twe-ripple-color="light"
class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong">
Prev</button
><button
id="step-1"
D
type="button"
data-twe-ripple-init
data-twe-ripple-color="light"
class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong">
Step 1</button
><button
id="step-2"
type="button"
data-twe-ripple-init
data-twe-ripple-color="light"
class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong">
Step 2</button
><button
id="step-3"
type="button"
data-twe-ripple-init
data-twe-ripple-color="light"
class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong">
Step 3
</button>
<button
id="next-step"
type="button"
data-twe-ripple-init
data-twe-ripple-color="light"
class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong">
Next
</button>
</div>
<ul
id="stepper-buttons"
data-twe-stepper-init
class="relative m-0 flex w-full list-none justify-between overflow-hidden p-0 transition-[height] duration-200 ease-in-out">
<li data-twe-stepper-step-ref class="w-[4.5rem] flex-auto">
<div
data-twe-stepper-head-ref
class="flex cursor-pointer items-center ps-6 leading-[1.3rem] no-underline after:ms-2 after:h-px after:w-full after:flex-1 after:bg-neutral-200 after:content-[''] hover:bg-stone-50 dark:after:bg-white/10 dark:hover:bg-white/[.025]">
<span
data-twe-stepper-head-icon-ref
class="my-6 me-2 flex h-[1.938rem] w-[1.938rem] items-center justify-center rounded-full text-sm">
1
</span>
<span
data-twe-stepper-head-text-ref
class="after:absolute after:flex after:text-[0.8rem] ">
step1
</span>
</div>
<div
data-twe-stepper-content-ref
class="absolute w-full p-4 transition-all duration-500 ease-in-out">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</li>
<li data-twe-stepper-step-ref class="w-[4.5rem] flex-auto">
<div
data-twe-stepper-head-ref
class="flex cursor-pointer items-center leading-[1.3rem] no-underline before:me-2 before:h-px before:w-full before:flex-1 before:bg-neutral-200 before:content-[''] after:ms-2 after:h-px after:w-full after:flex-1 after:bg-neutral-200 after:content-[''] hover:bg-stone-50 dark:before:bg-white/10 dark:after:bg-white/10 dark:hover:bg-white/[.025]">
<span
data-twe-stepper-head-icon-ref
class="my-6 me-2 flex h-[1.938rem] w-[1.938rem] items-center justify-center rounded-full text-sm">
2
</span>
<span
data-twe-stepper-head-text-ref
class="after:absolute after:flex after:text-[0.8rem]">
step2
</span>
</div>
<div
data-twe-stepper-content-ref
class="absolute left-0 w-full translate-x-[150%] p-4 transition-all duration-500 ease-in-out">
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</div>
</li>
<li data-twe-stepper-step-ref class="w-[4.5rem] flex-auto">
<div
data-twe-stepper-head-ref
class="flex cursor-pointer items-center pe-6 leading-[1.3rem] no-underline before:me-2 before:h-px before:w-full before:flex-1 before:bg-neutral-200 before:content-[''] hover:bg-stone-50 dark:before:bg-white/10 dark:after:bg-white/10 dark:hover:bg-white/[.025]">
<span
data-twe-stepper-head-icon-ref
class="my-6 me-2 flex h-[1.938rem] w-[1.938rem] items-center justify-center rounded-full text-sm">
3
</span>
<span
data-twe-stepper-head-text-ref
class="after:absolute after:flex after:text-[0.8rem]">
step3
</span>
</div>
<div
data-twe-stepper-content-ref
class="absolute left-0 w-full translate-x-[150%] p-4 transition-all duration-500 ease-in-out">
Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur.
</div>
</li>
</ul>
import {
Stepper,
Ripple,
initTWE,
} from "tw-elements";
initTWE({ Stepper, Ripple });
const stepperButtons = document.getElementById("stepper-buttons");
const stepperButtonsInstance = Stepper.getInstance(stepperButtons);
document.getElementById("next-step").addEventListener("click", () => {
stepperButtonsInstance.nextStep();
});
document.getElementById("prev-step").addEventListener("click", () => {
stepperButtonsInstance.prevStep();
});
document.getElementById("step-1").addEventListener("click", () => {
stepperButtonsInstance.changeStep(0);
});
document.getElementById("step-2").addEventListener("click", () => {
stepperButtonsInstance.changeStep(1);
});
document.getElementById("step-3").addEventListener("click", () => {
stepperButtonsInstance.changeStep(2);
});
const stepperButtons = document.getElementById("stepper-buttons");
const stepperButtonsInstance = twe.Stepper.getInstance(stepperButtons);
document.getElementById("next-step").addEventListener("click", () => {
stepperButtonsInstance.nextStep();
});
document.getElementById("prev-step").addEventListener("click", () => {
stepperButtonsInstance.prevStep();
});
document.getElementById("step-1").addEventListener("click", () => {
stepperButtonsInstance.changeStep(0);
});
document.getElementById("step-2").addEventListener("click", () => {
stepperButtonsInstance.changeStep(1);
});
document.getElementById("step-3").addEventListener("click", () => {
stepperButtonsInstance.changeStep(2);
});
Linear stepper
In our TWE stepper component we support two ways of validation. The first one is using the Validation component and the second one is using the default HTML validation.
To make stepper linear and make way to set up validation you have to set
stepperLinear option.
With Validation component
Initialiase Validation component on your form, which should
wrap all steps, and set options you need. Within the
data-twe-stepper-content-ref div's, include elements for
validation supported by the Validation component. Also add
data-twe-validation-styling="false" to elements that are not in
the active step on initialization to provide proper styling.
<ul
data-twe-stepper-init
data-twe-stepper-linear="true"
class="relative m-0 flex w-full list-none justify-between overflow-hidden p-0 transition-[height] duration-200 ease-in-out">
<form
id="form-1"
novalidate
data-twe-validation-init
data-twe-active-validation="true"
class="relative h-full w-full"
style="display: inherit;">
<li data-twe-stepper-step-ref class="w-[4.5rem] flex-auto">
<div
data-twe-stepper-head-ref
class="flex cursor-pointer items-center ps-6 leading-[1.3rem] no-underline after:ms-2 after:h-px after:w-full after:flex-1 after:bg-neutral-200 after:content-[''] hover:bg-stone-50 dark:after:bg-white/10 dark:hover:bg-white/[.025]">
<span
data-twe-stepper-head-icon-ref
class="my-6 me-2 flex h-[1.938rem] w-[1.938rem] items-center justify-center rounded-full text-sm">
1
</span>
<span
data-twe-stepper-head-text-ref
class="after:absolute after:flex after:text-[0.8rem] ">
step1
</span>
</div>
<div
data-twe-stepper-content-ref
class="absolute w-full p-4 transition-all duration-500 ease-in-out">
<div
class="relative mb-3"
data-twe-input-wrapper-init
data-twe-validate="input"
data-twe-validation-ruleset="isRequired">
<input
type="text"
class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0"
id="exampleFormControlInput1"
placeholder="Example label" />
<label
for="exampleFormControlInput1"
class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"
>step 1
</label>
</div>
</div>
</li>
<li data-twe-stepper-step-ref class="w-[4.5rem] flex-auto">
<div
data-twe-stepper-head-ref
class="flex cursor-pointer items-center leading-[1.3rem] no-underline before:me-2 before:h-px before:w-full before:flex-1 before:bg-neutral-200 before:content-[''] after:ms-2 after:h-px after:w-full after:flex-1 after:bg-neutral-200 after:content-[''] hover:bg-stone-50 dark:before:bg-white/10 dark:after:bg-white/10 dark:hover:bg-white/[.025]">
<span
data-twe-stepper-head-icon-ref
class="my-6 me-2 flex h-[1.938rem] w-[1.938rem] items-center justify-center rounded-full text-sm">
2
</span>
<span
data-twe-stepper-head-text-ref
class="after:absolute after:flex after:text-[0.8rem]">
step2
</span>
</div>
<div
data-twe-stepper-content-ref
class="absolute left-0 w-full translate-x-[150%] p-4 transition-all duration-500 ease-in-out">
<div
class="relative mb-3"
data-twe-input-wrapper-init
data-twe-validate="input"
data-twe-validation-ruleset="isRequired"
data-twe-validation-styling="false">
<input
type="text"
class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0"
id="exampleFormControlInput2"
placeholder="Example label" />
<label
for="exampleFormControlInput2"
class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"
>step 2
</label>
</div>
</div>
</li>
<li data-twe-stepper-step-ref class="w-[4.5rem] flex-auto">
<div
data-twe-stepper-head-ref
class="flex cursor-pointer items-center pe-6 leading-[1.3rem] no-underline before:me-2 before:h-px before:w-full before:flex-1 before:bg-neutral-200 before:content-[''] hover:bg-stone-50 dark:before:bg-white/10 dark:after:bg-white/10 dark:hover:bg-white/[.025]">
<span
data-twe-stepper-head-icon-ref
class="my-6 me-2 flex h-[1.938rem] w-[1.938rem] items-center justify-center rounded-full text-sm">
3
</span>
<span
data-twe-stepper-head-text-ref
class="after:absolute after:flex after:text-[0.8rem]">
step3
</span>
</div>
<div
data-twe-stepper-content-ref
class="absolute left-0 w-full translate-x-[150%] p-4 transition-all duration-500 ease-in-out">
<div
class="relative mb-3"
data-twe-input-wrapper-init
data-twe-validate="input"
data-twe-validation-ruleset="isRequired"
data-twe-validation-styling="false">
<input
type="text"
class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0"
id="exampleFormControlInput3"
placeholder="Example label" />
<label
for="exampleFormControlInput3"
class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"
>step 3
</label>
</div>
<button
type="submit"
data-twe-submit-btn-ref
data-twe-ripple-init
data-twe-ripple-color="light"
class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong">
Click me
</button>
</div>
</li>
</form>
</ul>
// Initialization for ES Users
import {
Stepper,
Validation,
Input,
initTWE,
} from "tw-elements";
initTWE({ Stepper, Validation, Input });
With default HMTL validation
To use default HTML validation you have to set required to the
elements you want to validate and add your own logic for styling validation
elements.
<ul
id="default-validation"
data-twe-stepper-init
data-twe-stepper-linear="true"
class="relative m-0 flex w-full list-none justify-between overflow-hidden p-0 transition-[height] duration-200 ease-in-out">
<form class="relative h-full w-full" style="display: inherit;">
<li data-twe-stepper-step-ref class="w-[4.5rem] flex-auto">
<div
data-twe-stepper-head-ref
class="flex cursor-pointer items-center ps-6 leading-[1.3rem] no-underline after:ms-2 after:h-px after:w-full after:flex-1 after:bg-neutral-200 after:content-[''] hover:bg-stone-50 dark:after:bg-white/10 dark:hover:bg-white/[.025]">
<span
data-twe-stepper-head-icon-ref
class="my-6 me-2 flex h-[1.938rem] w-[1.938rem] items-center justify-center rounded-full text-sm">
1
</span>
<span
data-twe-stepper-head-text-ref
class="after:absolute after:flex after:text-[0.8rem] ">
step1
</span>
</div>
<div
data-twe-stepper-content-ref
class="absolute w-full p-4 transition-all duration-500 ease-in-out">
<div class="relative mb-3 w-full">
<input
type="text"
class="peer relative m-0 block w-full min-w-0 flex-auto rounded border border-solid border-neutral-300 bg-transparent bg-clip-padding px-3 py-[0.25rem] text-base font-normal leading-[1.6] text-neutral-700 outline-none transition duration-200 ease-in-out focus:z-[3] focus:border-primary focus:text-neutral-700 focus:shadow-[inset_0_0_0_1px_rgb(59,113,202)] focus:outline-none dark:border-neutral-600 dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:autofill:shadow-autofill dark:focus:border-primary"
placeholder="step 1"
aria-label="Input"
required />
</div>
</div>
</li>
<li data-twe-stepper-step-ref class="w-[4.5rem] flex-auto">
<div
data-twe-stepper-head-ref
class="flex cursor-pointer items-center leading-[1.3rem] no-underline before:me-2 before:h-px before:w-full before:flex-1 before:bg-neutral-200 before:content-[''] after:ms-2 after:h-px after:w-full after:flex-1 after:bg-neutral-200 after:content-[''] hover:bg-stone-50 dark:before:bg-white/10 dark:after:bg-white/10 dark:hover:bg-white/[.025]">
<span
data-twe-stepper-head-icon-ref
class="my-6 me-2 flex h-[1.938rem] w-[1.938rem] items-center justify-center rounded-full text-sm">
2
</span>
<span
data-twe-stepper-head-text-ref
class="after:absolute after:flex after:text-[0.8rem]">
step2
</span>
</div>
<div
data-twe-stepper-content-ref
class="absolute left-0 w-full translate-x-[150%] p-4 transition-all duration-500 ease-in-out">
<div class="relative mb-3 w-full">
<input
type="text"
class="peer relative m-0 block w-full min-w-0 flex-auto rounded border border-solid border-neutral-300 bg-transparent bg-clip-padding px-3 py-[0.25rem] text-base font-normal leading-[1.6] text-neutral-700 outline-none transition duration-200 ease-in-out focus:z-[3] focus:border-primary focus:text-neutral-700 focus:shadow-[inset_0_0_0_1px_rgb(59,113,202)] focus:outline-none dark:border-neutral-600 dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:autofill:shadow-autofill dark:focus:border-primary"
placeholder="step 2"
aria-label="Input"
required />
</div>
</div>
</li>
<li data-twe-stepper-step-ref class="w-[4.5rem] flex-auto">
<div
data-twe-stepper-head-ref
class="flex cursor-pointer items-center pe-6 leading-[1.3rem] no-underline before:me-2 before:h-px before:w-full before:flex-1 before:bg-neutral-200 before:content-[''] hover:bg-stone-50 dark:before:bg-white/10 dark:after:bg-white/10 dark:hover:bg-white/[.025]">
<span
data-twe-stepper-head-icon-ref
class="my-6 me-2 flex h-[1.938rem] w-[1.938rem] items-center justify-center rounded-full text-sm">
3
</span>
<span
data-twe-stepper-head-text-ref
class="after:absolute after:flex after:text-[0.8rem]">
step3
</span>
</div>
<div
data-twe-stepper-content-ref
class="absolute left-0 w-full translate-x-[150%] p-4 transition-all duration-500 ease-in-out">
<div class="relative mb-3 w-full">
<input
type="text"
class="peer relative m-0 block w-full min-w-0 flex-auto rounded border border-solid border-neutral-300 bg-transparent bg-clip-padding px-3 py-[0.25rem] text-base font-normal leading-[1.6] text-neutral-700 outline-none transition duration-200 ease-in-out focus:z-[3] focus:border-primary focus:text-neutral-700 focus:shadow-[inset_0_0_0_1px_rgb(59,113,202)] focus:outline-none dark:border-neutral-600 dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:autofill:shadow-autofill dark:focus:border-primary"
placeholder="step 3"
aria-label="Input"
required />
</div>
<button
type="submit"
data-twe-submit-btn-ref
data-twe-ripple-init
data-twe-ripple-color="light"
class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong">
Click me
</button>
</div>
</li>
</form>
</ul>
import {
Stepper,
Input,
initTWE,
} from "tw-elements";
initTWE({ Stepper, Input });
const defaultValidationStepper =
document.getElementById("default-validation");
const steps = defaultValidationStepper.querySelectorAll(
"[data-twe-stepper-step-ref]"
);
const validClasses =
"!border-[#14a44d] focus:!border-[#14a44d] focus:!shadow-[inset_0_0_0_1px_#14a44d]";
const invalidClasses =
"!border-[#dc4c64] focus:!border-[#dc4c64] focus:!shadow-[inset_0_0_0_1px_#dc4c64]";
steps.forEach((step, index) => {
const inputs = step.querySelectorAll("[required]");
step.addEventListener("stepValid.twe.stepper", (e) => {
inputs.forEach((input) => {
validClasses.split(" ").forEach((validClass) => {
input.classList.add(validClass);
});
invalidClasses.split(" ").forEach((invalidClass) => {
input.classList.remove(invalidClass);
});
});
});
step.addEventListener("stepInvalid.twe.stepper", (e) => {
inputs.forEach((input) => {
validClasses.split(" ").forEach((validClass) => {
input.classList.remove(validClass);
});
invalidClasses.split(" ").forEach((invalidClass) => {
input.classList.add(invalidClass);
});
});
});
});
const defaultValidationStepper =
document.getElementById("default-validation");
const steps = defaultValidationStepper.querySelectorAll(
"[data-twe-stepper-step-ref]"
);
const validClasses =
"!border-[#14a44d] focus:!border-[#14a44d] focus:!shadow-[inset_0_0_0_1px_#14a44d]";
const invalidClasses =
"!border-[#dc4c64] focus:!border-[#dc4c64] focus:!shadow-[inset_0_0_0_1px_#dc4c64]";
steps.forEach((step, index) => {
const inputs = step.querySelectorAll("[required]");
step.addEventListener("stepValid.twe.stepper", (e) => {
inputs.forEach((input) => {
validClasses.split(" ").forEach((validClass) => {
input.classList.add(validClass);
});
invalidClasses.split(" ").forEach((invalidClass) => {
input.classList.remove(invalidClass);
});
});
});
step.addEventListener("stepInvalid.twe.stepper", (e) => {
inputs.forEach((input) => {
validClasses.split(" ").forEach((validClass) => {
input.classList.remove(validClass);
});
invalidClasses.split(" ").forEach((invalidClass) => {
input.classList.add(invalidClass);
});
});
});
});
No editable stepper
You can set data-twe-stepper-no-editable="true" to prevent
editing a completed step.
-
1 step1
-
2 step2
-
3 step3
<ul
data-twe-stepper-init
data-twe-stepper-no-editable="true"
class="relative m-0 flex w-full list-none justify-between overflow-hidden p-0 transition-[height] duration-200 ease-in-out">
<li data-twe-stepper-step-ref class="w-[4.5rem] flex-auto">
<div
data-twe-stepper-head-ref
class="flex cursor-pointer items-center ps-6 leading-[1.3rem] no-underline after:ms-2 after:h-px after:w-full after:flex-1 after:bg-neutral-200 after:content-[''] hover:bg-stone-50 dark:after:bg-white/10 dark:hover:bg-white/[.025]">
<span
data-twe-stepper-head-icon-ref
class="my-6 me-2 flex h-[1.938rem] w-[1.938rem] items-center justify-center rounded-full text-sm">
1
</span>
<span
data-twe-stepper-head-text-ref
class="after:absolute after:flex after:text-[0.8rem] ">
step1
</span>
</div>
<div
data-twe-stepper-content-ref
class="absolute w-full p-4 transition-all duration-500 ease-in-out">
<div class="relative mb-3" data-twe-input-wrapper-init>
<input
type="text"
class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0"
id="exampleFormControlInput1"
placeholder="Example label" />
<label
for="exampleFormControlInput1"
class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"
>step 1
</label>
</div>
</div>
</li>
<li data-twe-stepper-step-ref class="w-[4.5rem] flex-auto">
<div
data-twe-stepper-head-ref
class="flex cursor-pointer items-center leading-[1.3rem] no-underline before:me-2 before:h-px before:w-full before:flex-1 before:bg-neutral-200 before:content-[''] after:ms-2 after:h-px after:w-full after:flex-1 after:bg-neutral-200 after:content-[''] hover:bg-stone-50 dark:before:bg-white/10 dark:after:bg-white/10 dark:hover:bg-white/[.025]">
<span
data-twe-stepper-head-icon-ref
class="my-6 me-2 flex h-[1.938rem] w-[1.938rem] items-center justify-center rounded-full text-sm">
2
</span>
<span
data-twe-stepper-head-text-ref
class="after:absolute after:flex after:text-[0.8rem]">
step2
</span>
</div>
<div
data-twe-stepper-content-ref
class="absolute left-0 w-full translate-x-[150%] p-4 transition-all duration-500 ease-in-out">
<div class="relative mb-3" data-twe-input-wrapper-init>
<input
type="text"
class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0"
id="exampleFormControlInput2"
placeholder="Example label" />
<label
for="exampleFormControlInput2"
class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"
>step 2
</label>
</div>
</div>
</li>
<li data-twe-stepper-step-ref class="w-[4.5rem] flex-auto">
<div
data-twe-stepper-head-ref
class="flex cursor-pointer items-center pe-6 leading-[1.3rem] no-underline before:me-2 before:h-px before:w-full before:flex-1 before:bg-neutral-200 before:content-[''] hover:bg-stone-50 dark:before:bg-white/10 dark:after:bg-white/10 dark:hover:bg-white/[.025]">
<span
data-twe-stepper-head-icon-ref
class="my-6 me-2 flex h-[1.938rem] w-[1.938rem] items-center justify-center rounded-full text-sm">
3
</span>
<span
data-twe-stepper-head-text-ref
class="after:absolute after:flex after:text-[0.8rem]">
step3
</span>
</div>
<div
data-twe-stepper-content-ref
class="absolute left-0 w-full translate-x-[150%] p-4 transition-all duration-500 ease-in-out">
<div class="relative mb-3" data-twe-input-wrapper-init>
<input
type="text"
class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0"
id="exampleFormControlInput3"
placeholder="Example label" />
<label
for="exampleFormControlInput3"
class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"
>step 3
</label>
</div>
</div>
</li>
</ul>
// Initialization for ES Users
import {
Stepper,
Input,
initTWE,
} from "tw-elements";
initTWE({ Stepper, Input });
Vertical stepper
Set data-twe-stepper-type="vertical" and add properly styles,
like in the example below, to use the vertical view.
-
1 step1Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-
2 step2Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-
3 step3Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
<ul
class="relative m-0 w-full list-none overflow-hidden p-0 transition-[height] duration-200 ease-in-out"
data-twe-stepper-init
data-twe-stepper-type="vertical">
<li
data-twe-stepper-step-ref
class="relative h-fit after:absolute after:left-[2.45rem] after:top-[3.6rem] after:mt-px after:h-[calc(100%-2.45rem)] after:w-px after:bg-neutral-200 after:content-[''] dark:after:bg-white/10">
<div
data-twe-stepper-head-ref
class="flex cursor-pointer items-center p-6 leading-[1.3rem] no-underline hover:bg-stone-50 dark:hover:bg-white/[.025]">
<span
data-twe-stepper-head-icon-ref
class="me-3 flex h-[1.938rem] w-[1.938rem] items-center justify-center rounded-full text-sm">
1
</span>
<span
data-twe-stepper-head-text-ref
class="after:absolute after:flex after:text-[0.8rem]">
step1
</span>
</div>
<div
data-twe-stepper-content-ref
class="transition-[height, margin-bottom, padding-top, padding-bottom] left-0 overflow-hidden pb-6 pe-6 ps-[3.75rem] duration-300 ease-in-out">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</li>
<li
data-twe-stepper-step-ref
class="relative h-fit after:absolute after:left-[2.45rem] after:top-[3.6rem] after:mt-px after:h-[calc(100%-2.45rem)] after:w-px after:bg-neutral-200 after:content-[''] dark:after:bg-white/10">
<div
data-twe-stepper-head-ref
class="flex cursor-pointer items-center p-6 leading-[1.3rem] no-underline hover:bg-stone-50 dark:hover:bg-white/[.025]">
<span
data-twe-stepper-head-icon-ref
class="me-3 flex h-[1.938rem] w-[1.938rem] items-center justify-center rounded-full text-sm">
2
</span>
<span
data-twe-stepper-head-text-ref
class="after:absolute after:flex after:text-[0.8rem]">
step2
</span>
</div>
<div
data-twe-stepper-content-ref
class="transition-[height, margin-bottom, padding-top, padding-bottom] left-0 overflow-hidden pb-6 pe-6 ps-[3.75rem] duration-300 ease-in-out">
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</div>
</li>
<li data-twe-stepper-step-ref class="relative h-fit">
<div
data-twe-stepper-head-ref
class="flex cursor-pointer items-center p-6 leading-[1.3rem] no-underline after:bg-neutral-200 after:content-[''] hover:bg-stone-50 dark:after:bg-white/10 dark:hover:bg-white/[.025]">
<span
data-twe-stepper-head-icon-ref
class="me-3 flex h-[1.938rem] w-[1.938rem] items-center justify-center rounded-full text-sm">
3
</span>
<span
data-twe-stepper-head-text-ref
class="after:absolute after:flex after:text-[0.8rem]">
step3
</span>
</div>
<div
data-twe-stepper-content-ref
class="transition-[height, margin-bottom, padding-top, padding-bottom] left-0 overflow-hidden pb-6 pe-6 ps-[3.75rem] duration-300 ease-in-out">
Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur.
</div>
</li>
</ul>
// Initialization for ES Users
import {
Stepper,
initTWE,
} from "tw-elements";
initTWE({ Stepper });
Mobile stepper
Set data-twe-stepper-type="mobile" and add properly styles,
like in this example, to use mobile view.
-
1 step1Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-
2 step2Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-
3 step3Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
<ul
data-twe-stepper-init
data-twe-stepper-type="mobile"
class="relative m-0 flex w-full list-none items-end justify-center overflow-hidden p-0 transition-[height] duration-200 ease-in-out">
<li data-twe-stepper-step-ref class="mx-1 my-4 h-full">
<div
data-twe-stepper-head-ref
class="z-10 flex h-full cursor-pointer items-end justify-center leading-[1.3rem] no-underline">
<span
data-twe-stepper-head-icon-ref
class="z-10 flex h-2 w-2 items-center justify-center rounded-full text-[0px]">
1
</span>
<span data-twe-stepper-head-text-ref class="hidden">step1</span>
</div>
<div
data-twe-stepper-content-ref
class="absolute left-0 top-[40px] w-full p-4 transition-all duration-500 ease-in-out">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</li>
<li data-twe-stepper-step-ref class="mx-1 my-4 h-full">
<div
data-twe-stepper-head-ref
class="z-10 flex h-full cursor-pointer items-end justify-center leading-[1.3rem] no-underline">
<span
data-twe-stepper-head-icon-ref
class="z-10 flex h-2 w-2 items-center rounded-full text-[0px]">
2
</span>
<span data-twe-stepper-head-text-ref class="hidden">step2</span>
</div>
<div
data-twe-stepper-content-ref
class="absolute left-0 top-[40px] w-full translate-x-[150%] p-4 transition-all duration-500 ease-in-out">
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</div>
</li>
<li data-twe-stepper-step-ref class="mx-1 my-4 h-full">
<div
data-twe-stepper-head-ref
class="flex h-full cursor-pointer items-end justify-center leading-[1.3rem] no-underline">
<span
data-twe-stepper-head-icon-ref
class="z-10 flex h-2 w-2 items-center justify-center rounded-full text-[0px]">
3
</span>
<span data-twe-stepper-head-text-ref class="hidden">step3</span>
</div>
<div
data-twe-stepper-content-ref
class="absolute left-0 top-[40px] w-full translate-x-[150%] p-4 transition-all duration-500 ease-in-out">
Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur.
</div>
</li>
</ul>
// Initialization for ES Users
import {
Stepper,
initTWE,
} from "tw-elements";
initTWE({ Stepper });
Mobile stepper progress bar
If the stepper contains more than 4 steps, the progress bar will be
displayed by default instead of dots. You can edit the step limit with the
stepperMobileBarBreakpoint option.
-
1 step1Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
-
2 step2Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-
3 step3Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
-
4 step4Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
-
5 step4Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
-
6 step4Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
-
7 step4Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
-
8 step4Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
-
9 step4Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
-
10 step4Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
-
11 step4Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
-
12 step4Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
<ul
data-twe-stepper-init
data-twe-stepper-type="mobile"
class="relative m-0 flex w-full list-none items-end justify-center overflow-hidden p-0 transition-[height] duration-200 ease-in-out">
<li data-twe-stepper-step-ref class="mx-1 my-4 h-full">
<div
data-twe-stepper-head-ref
class="z-10 flex h-full cursor-pointer items-end justify-center leading-[1.3rem] no-underline">
<span
data-twe-stepper-head-icon-ref
class="z-10 flex h-2 w-2 items-center justify-center rounded-full text-[0px]">
1
</span>
<span data-twe-stepper-head-text-ref class="hidden">step1</span>
</div>
<div
data-twe-stepper-content-ref
class="absolute left-0 top-[40px] w-full p-4 transition-all duration-500 ease-in-out">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua
</div>
</li>
<li data-twe-stepper-step-ref class="mx-1 my-4 h-full">
<div
data-twe-stepper-head-ref
class="z-10 flex h-full cursor-pointer items-end justify-center leading-[1.3rem] no-underline">
<span
data-twe-stepper-head-icon-ref
class="z-10 flex h-2 w-2 items-center rounded-full text-[0px]">
2
</span>
<span data-twe-stepper-head-text-ref class="hidden">step2</span>
</div>
<div
data-twe-stepper-content-ref
class="absolute left-0 top-[40px] w-full translate-x-[150%] p-4 transition-all duration-500 ease-in-out">
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</div>
</li>
<li data-twe-stepper-step-ref class="mx-1 my-4 h-full">
<div
data-twe-stepper-head-ref
class="flex h-full cursor-pointer items-end justify-center leading-[1.3rem] no-underline">
<span
data-twe-stepper-head-icon-ref
class="z-10 flex h-2 w-2 items-center justify-center rounded-full text-[0px]">
3
</span>
<span data-twe-stepper-head-text-ref class="hidden">step3</span>
</div>
<div
data-twe-stepper-content-ref
class="absolute left-0 top-[40px] w-full translate-x-[150%] p-4 transition-all duration-500 ease-in-out">
Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur
</div>
</li>
<li data-twe-stepper-step-ref class="mx-1 my-4 h-full">
<div
data-twe-stepper-head-ref
class="flex h-full cursor-pointer items-end justify-center leading-[1.3rem] no-underline">
<span
data-twe-stepper-head-icon-ref
class="z-10 flex h-2 w-2 items-center justify-center rounded-full text-[0px]">
4
</span>
<span data-twe-stepper-head-text-ref class="hidden">step4</span>
</div>
<div
data-twe-stepper-content-ref
class="absolute left-0 top-[40px] w-full translate-x-[150%] p-4 transition-all duration-500 ease-in-out">
Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur
</div>
</li>
<li data-twe-stepper-step-ref class="mx-1 my-4 h-full">
<div
data-twe-stepper-head-ref
class="flex h-full cursor-pointer items-end justify-center leading-[1.3rem] no-underline">
<span
data-twe-stepper-head-icon-ref
class="z-10 flex h-2 w-2 items-center justify-center rounded-full text-[0px]">
5
</span>
<span data-twe-stepper-head-text-ref class="hidden">step4</span>
</div>
<div
data-twe-stepper-content-ref
class="absolute left-0 top-[40px] w-full translate-x-[150%] p-4 transition-all duration-500 ease-in-out">
Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur
</div>
</li>
<li data-twe-stepper-step-ref class="mx-1 my-4 h-full">
<div
data-twe-stepper-head-ref
class="flex h-full cursor-pointer items-end justify-center leading-[1.3rem] no-underline">
<span
data-twe-stepper-head-icon-ref
class="z-10 flex h-2 w-2 items-center justify-center rounded-full text-[0px]">
6
</span>
<span data-twe-stepper-head-text-ref class="hidden">step4</span>
</div>
<div
data-twe-stepper-content-ref
class="absolute left-0 top-[40px] w-full translate-x-[150%] p-4 transition-all duration-500 ease-in-out">
Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur
</div>
</li>
<li data-twe-stepper-step-ref class="mx-1 my-4 h-full">
<div
data-twe-stepper-head-ref
class="flex h-full cursor-pointer items-end justify-center leading-[1.3rem] no-underline">
<span
data-twe-stepper-head-icon-ref
class="z-10 flex h-2 w-2 items-center justify-center rounded-full text-[0px]">
7
</span>
<span data-twe-stepper-head-text-ref class="hidden">step4</span>
</div>
<div
data-twe-stepper-content-ref
class="absolute left-0 top-[40px] w-full translate-x-[150%] p-4 transition-all duration-500 ease-in-out">
Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur
</div>
</li>
<li data-twe-stepper-step-ref class="mx-1 my-4 h-full">
<div
data-twe-stepper-head-ref
class="flex h-full cursor-pointer items-end justify-center leading-[1.3rem] no-underline">
<span
data-twe-stepper-head-icon-ref
class="z-10 flex h-2 w-2 items-center justify-center rounded-full text-[0px]">
8
</span>
<span data-twe-stepper-head-text-ref class="hidden">step4</span>
</div>
<div
data-twe-stepper-content-ref
class="absolute left-0 top-[40px] w-full translate-x-[150%] p-4 transition-all duration-500 ease-in-out">
Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur
</div>
</li>
<li data-twe-stepper-step-ref class="mx-1 my-4 h-full">
<div
data-twe-stepper-head-ref
class="flex h-full cursor-pointer items-end justify-center leading-[1.3rem] no-underline">
<span
data-twe-stepper-head-icon-ref
class="z-10 flex h-2 w-2 items-center justify-center rounded-full text-[0px]">
9
</span>
<span data-twe-stepper-head-text-ref class="hidden">step4</span>
</div>
<div
data-twe-stepper-content-ref
class="absolute left-0 top-[40px] w-full translate-x-[150%] p-4 transition-all duration-500 ease-in-out">
Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur
</div>
</li>
<li data-twe-stepper-step-ref class="mx-1 my-4 h-full">
<div
data-twe-stepper-head-ref
class="flex h-full cursor-pointer items-end justify-center leading-[1.3rem] no-underline">
<span
data-twe-stepper-head-icon-ref
class="z-10 flex h-2 w-2 items-center justify-center rounded-full text-[0px]">
10
</span>
<span data-twe-stepper-head-text-ref class="hidden">step4</span>
</div>
<div
data-twe-stepper-content-ref
class="absolute left-0 top-[40px] w-full translate-x-[150%] p-4 transition-all duration-500 ease-in-out">
Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur
</div>
</li>
<li data-twe-stepper-step-ref class="mx-1 my-4 h-full">
<div
data-twe-stepper-head-ref
class="flex h-full cursor-pointer items-end justify-center leading-[1.3rem] no-underline">
<span
data-twe-stepper-head-icon-ref
class="z-10 flex h-2 w-2 items-center justify-center rounded-full text-[0px]">
11
</span>
<span data-twe-stepper-head-text-ref class="hidden">step4</span>
</div>
<div
data-twe-stepper-content-ref
class="absolute left-0 top-[40px] w-full translate-x-[150%] p-4 transition-all duration-500 ease-in-out">
Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur
</div>
</li>
<li data-twe-stepper-step-ref class="mx-1 my-4 h-full">
<div
data-twe-stepper-head-ref
class="flex h-full cursor-pointer items-end justify-center leading-[1.3rem] no-underline">
<span
data-twe-stepper-head-icon-ref
class="z-10 flex h-2 w-2 items-center justify-center rounded-full text-[0px]">
12
</span>
<span data-twe-stepper-head-text-ref class="hidden">step4</span>
</div>
<div
data-twe-stepper-content-ref
class="absolute left-0 top-[40px] w-full translate-x-[150%] p-4 transition-all duration-500 ease-in-out">
Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur
</div>
</li>
</ul>
// Initialization for ES Users
import {
Stepper,
initTWE,
} from "tw-elements";
initTWE({ Stepper });
Stepper with gesture support
Adding Touch Swipe utils to the stepper enables changing the
stepper step using gestures.
-
1 step1Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-
2 step2Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-
3 step3Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
<ul
id="stepper-gesture"
data-twe-stepper-init
class="relative m-0 flex w-full list-none justify-between overflow-hidden p-0 transition-[height] duration-200 ease-in-out">
<li data-twe-stepper-step-ref class="w-[4.5rem] flex-auto">
<div
data-twe-stepper-head-ref
class="flex cursor-pointer items-center ps-6 leading-[1.3rem] no-underline after:ms-2 after:h-px after:w-full after:flex-1 after:bg-neutral-200 after:content-[''] hover:bg-stone-50 dark:after:bg-white/10 dark:hover:bg-white/[.025]">
<span
data-twe-stepper-head-icon-ref
class="my-6 me-2 flex h-[1.938rem] w-[1.938rem] items-center justify-center rounded-full text-sm">
1
</span>
<span
data-twe-stepper-head-text-ref
class="after:absolute after:flex after:text-[0.8rem]">
step1
</span>
</div>
<div
data-twe-stepper-content-ref
class="absolute w-full p-4 transition-all duration-500 ease-in-out">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</li>
<li data-twe-stepper-step-ref class="w-[4.5rem] flex-auto">
<div
data-twe-stepper-head-ref
class="flex cursor-pointer items-center leading-[1.3rem] no-underline before:me-2 before:h-px before:w-full before:flex-1 before:bg-neutral-200 before:content-[''] after:ms-2 after:h-px after:w-full after:flex-1 after:bg-neutral-200 after:content-[''] hover:bg-stone-50 dark:before:bg-white/10 dark:after:bg-white/10 dark:hover:bg-white/[.025]">
<span
data-twe-stepper-head-icon-ref
class="my-6 me-2 flex h-[1.938rem] w-[1.938rem] items-center justify-center rounded-full text-sm">
2
</span>
<span
data-twe-stepper-head-text-ref
class="after:absolute after:flex after:text-[0.8rem]">
step2
</span>
</div>
<div
data-twe-stepper-content-ref
class="absolute left-0 w-full translate-x-[150%] p-4 transition-all duration-500 ease-in-out">
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</div>
</li>
<li data-twe-stepper-step-ref class="w-[4.5rem] flex-auto">
<div
data-twe-stepper-head-ref
class="flex cursor-pointer items-center pe-6 leading-[1.3rem] no-underline before:me-2 before:h-px before:w-full before:flex-1 before:bg-neutral-200 before:content-[''] hover:bg-stone-50 dark:before:bg-white/10 dark:after:bg-white/10 dark:hover:bg-white/[.025]">
<span
data-twe-stepper-head-icon-ref
class="my-6 me-2 flex h-[1.938rem] w-[1.938rem] items-center justify-center rounded-full text-sm">
3
</span>
<span
data-twe-stepper-head-text-ref
class="after:absolute after:flex after:text-[0.8rem]">
step3
</span>
</div>
<div
data-twe-stepper-content-ref
class="absolute left-0 w-full translate-x-[150%] p-4 transition-all duration-500 ease-in-out">
Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur.
</div>
</li>
</ul>
import {
Stepper,
Touch,
initTWE,
} from "tw-elements";
initTWE({ Stepper });
const stepperGesture = document.getElementById("stepper-gesture");
const stepperGestureInstance = Stepper.getInstance(stepperGesture);
const touchSwipeLeftRight = new Touch(stepperGesture, "swipe", {
threshold: 100,
});
stepperGesture.addEventListener("swipeleft", () => {
stepperGestureInstance.nextStep();
});
stepperGesture.addEventListener("swiperight", () => {
stepperGestureInstance.prevStep();
});
const stepperGesture = document.getElementById("stepper-gesture");
const stepperGestureInstance = twe.Stepper.getInstance(stepperGesture);
const touchSwipeLeftRight = new twe.Touch(stepperGesture, "swipe", {
threshold: 100,
});
stepperGesture.addEventListener("swipeleft", () => {
stepperGestureInstance.nextStep();
});
stepperGesture.addEventListener("swiperight", () => {
stepperGestureInstance.prevStep();
});
Optional step
You can mark a step as optional by adding
data-twe-stepper-optional="true" to it.
-
1 step1Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-
2 step2Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-
3 step3Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
<ul
data-twe-stepper-init
class="relative m-0 flex w-full list-none justify-between overflow-hidden p-0 transition-[height] duration-200 ease-in-out">
<li data-twe-stepper-step-ref class="w-[4.5rem] flex-auto">
<div
data-twe-stepper-head-ref
class="flex cursor-pointer items-center ps-6 leading-[1.3rem] no-underline after:ms-2 after:h-px after:w-full after:flex-1 after:bg-neutral-200 after:content-[''] hover:bg-stone-50 dark:after:bg-white/10 dark:hover:bg-white/[.025]">
<span
data-twe-stepper-head-icon-ref
class="my-6 me-2 flex h-[1.938rem] w-[1.938rem] items-center justify-center rounded-full text-sm">
1
</span>
<span
data-twe-stepper-head-text-ref
class="after:absolute after:flex after:text-[0.8rem]">
step1
</span>
</div>
<div
data-twe-stepper-content-ref
class="absolute w-full p-4 transition-all duration-500 ease-in-out">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</li>
<li
data-twe-stepper-step-ref
data-twe-stepper-optional="true"
class="w-[4.5rem] flex-auto">
<div
data-twe-stepper-head-ref
class="flex cursor-pointer items-center leading-[1.3rem] no-underline before:me-2 before:h-px before:w-full before:flex-1 before:bg-neutral-200 before:content-[''] after:ms-2 after:h-px after:w-full after:flex-1 after:bg-neutral-200 after:content-[''] hover:bg-stone-50 dark:before:bg-white/10 dark:after:bg-white/10 dark:hover:bg-white/[.025]">
<span
data-twe-stepper-head-icon-ref
class="my-6 me-2 flex h-[1.938rem] w-[1.938rem] items-center justify-center rounded-full text-sm">
2
</span>
<span
data-twe-stepper-head-text-ref
class="after:absolute after:flex after:text-[0.8rem]">
step2
</span>
</div>
<div
data-twe-stepper-content-ref
class="absolute left-0 w-full translate-x-[150%] p-4 transition-all duration-500 ease-in-out">
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</div>
</li>
<li data-twe-stepper-step-ref class="w-[4.5rem] flex-auto">
<div
data-twe-stepper-head-ref
class="flex cursor-pointer items-center pe-6 leading-[1.3rem] no-underline before:me-2 before:h-px before:w-full before:flex-1 before:bg-neutral-200 before:content-[''] hover:bg-stone-50 dark:before:bg-white/10 dark:after:bg-white/10 dark:hover:bg-white/[.025]">
<span
data-twe-stepper-head-icon-ref
class="my-6 me-2 flex h-[1.938rem] w-[1.938rem] items-center justify-center rounded-full text-sm">
3
</span>
<span
data-twe-stepper-head-text-ref
class="after:absolute after:flex after:text-[0.8rem]">
step3
</span>
</div>
<div
data-twe-stepper-content-ref
class="absolute left-0 w-full translate-x-[150%] p-4 transition-all duration-500 ease-in-out">
Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur.
</div>
</li>
</ul>
// Initialization for ES Users
import {
Stepper,
initTWE,
} from "tw-elements";
initTWE({ Stepper });
Custom icons
Add custom icons inside data-twe-stepper-head-icon-ref element.
-
step1
-
step 2
-
Loading...step 3
<ul
data-twe-stepper-init
class="relative m-0 flex w-full list-none justify-between overflow-hidden p-0 transition-[height] duration-200 ease-in-out">
<li data-twe-stepper-step-ref class="w-[4.5rem] flex-auto">
<div
data-twe-stepper-head-ref
class="flex cursor-pointer items-center ps-6 leading-[1.3rem] no-underline after:ms-2 after:h-px after:w-full after:flex-1 after:bg-neutral-200 after:content-[''] hover:bg-stone-50 dark:after:bg-white/10 dark:hover:bg-white/[.025]">
<span
data-twe-stepper-head-icon-ref
class="my-6 me-2 flex h-[1.938rem] w-[1.938rem] items-center justify-center rounded-full text-sm">
<span class="[&>svg]:h-5 [&>svg]:w-5">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor">
<path
fill-rule="evenodd"
d="M7.5 6a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM3.751 20.105a8.25 8.25 0 0 1 16.498 0 .75.75 0 0 1-.437.695A18.683 18.683 0 0 1 12 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 0 1-.437-.695Z"
clip-rule="evenodd" />
</svg>
</span>
</span>
<span
data-twe-stepper-head-text-ref
class="after:absolute after:flex after:text-[0.8rem]">
step1
</span>
</div>
<div
data-twe-stepper-content-ref
class="absolute w-full p-4 transition-all duration-500 ease-in-out">
<div class="relative mb-3" data-twe-input-wrapper-init>
<input
type="text"
class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0"
id="exampleFormControlInput1" />
<label
for="exampleFormControlInput1"
class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"
>step 1
</label>
</div>
</div>
</li>
<li data-twe-stepper-step-ref class="w-[4.5rem] flex-auto">
<div
data-twe-stepper-head-ref
class="flex cursor-pointer items-center leading-[1.3rem] no-underline before:me-2 before:h-px before:w-full before:flex-1 before:bg-neutral-200 before:content-[''] after:ms-2 after:h-px after:w-full after:flex-1 after:bg-neutral-200 after:content-[''] hover:bg-stone-50 dark:before:bg-white/10 dark:after:bg-white/10 dark:hover:bg-white/[.025]">
<span
data-twe-stepper-head-icon-ref
class="my-6 me-2 flex h-[1.938rem] w-[1.938rem] items-center justify-center rounded-full text-sm">
<span class="[&>svg]:h-5 [&>svg]:w-5">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor">
<path
d="M1.5 8.67v8.58a3 3 0 0 0 3 3h15a3 3 0 0 0 3-3V8.67l-8.928 5.493a3 3 0 0 1-3.144 0L1.5 8.67Z" />
<path
d="M22.5 6.908V6.75a3 3 0 0 0-3-3h-15a3 3 0 0 0-3 3v.158l9.714 5.978a1.5 1.5 0 0 0 1.572 0L22.5 6.908Z" />
</svg>
</span>
</span>
<span
data-twe-stepper-head-text-ref
class="after:absolute after:flex after:text-[0.8rem]">
step 2
</span>
</div>
<div
data-twe-stepper-content-ref
class="absolute left-0 w-full translate-x-[150%] p-4 transition-all duration-500 ease-in-out">
<div class="relative mb-3" data-twe-input-wrapper-init>
<input
type="text"
class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0"
id="exampleFormControlInput2" />
<label
for="exampleFormControlInput2"
class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"
>step 2
</label>
</div>
</div>
</li>
<li data-twe-stepper-step-ref class="w-[4.5rem] flex-auto">
<div
data-twe-stepper-head-ref
class="flex cursor-pointer items-center pe-6 leading-[1.3rem] no-underline before:me-2 before:h-px before:w-full before:flex-1 before:bg-neutral-200 before:content-[''] hover:bg-stone-50 dark:before:bg-white/10 dark:after:bg-white/10 dark:hover:bg-white/[.025]">
<span
data-twe-stepper-head-icon-ref
class="my-6 me-2 flex h-[1.938rem] w-[1.938rem] items-center justify-center rounded-full text-sm">
<div
class="inline-block h-5 w-5 animate-spin rounded-full border-[3px] border-solid border-current border-e-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]"
role="status">
<span
class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]"
>Loading...</span
>
</div>
</span>
<span
data-twe-stepper-head-text-ref
class="after:absolute after:flex after:text-[0.8rem]">
step 3
</span>
</div>
<div
data-twe-stepper-content-ref
class="absolute left-0 w-full translate-x-[150%] p-4 transition-all duration-500 ease-in-out">
<div class="relative mb-3" data-twe-input-wrapper-init>
<input
type="text"
class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0"
id="exampleFormControlInput3" />
<label
for="exampleFormControlInput3"
class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"
>step3
</label>
</div>
</div>
</li>
</ul>
// Initialization for ES Users
import {
Stepper,
Input,
initTWE,
} from "tw-elements";
initTWE({ Stepper, Input });
Form wizard
An example of so-called Form wizard with multiple inputs on
each step.
<ul
id="stepper-form"
data-twe-stepper-init
data-twe-stepper-linear="true"
class="relative m-0 flex w-full list-none justify-between overflow-hidden p-0 transition-[height] duration-200 ease-in-out">
<form
id="form-1"
novalidate
data-twe-validation-init
data-twe-active-validation="true"
class="relative h-full w-full"
style="display: inherit;">
<li data-twe-stepper-step-ref class="w-[4.5rem] flex-auto">
<div
data-twe-stepper-head-ref
class="flex cursor-pointer items-center ps-6 leading-[1.3rem] no-underline after:ms-2 after:h-px after:w-full after:flex-1 after:bg-neutral-200 after:content-[''] hover:bg-stone-50 dark:after:bg-white/10 dark:hover:bg-white/[.025]">
<span
data-twe-stepper-head-icon-ref
class="my-6 me-2 flex h-[1.938rem] w-[1.938rem] items-center justify-center rounded-full text-sm">
1
</span>
<span
data-twe-stepper-head-text-ref
class="after:absolute after:flex after:text-[0.8rem] ">
step1
</span>
</div>
<div
data-twe-stepper-content-ref
class="absolute w-full p-4 transition-all duration-500 ease-in-out">
<div
class="relative mb-3"
data-twe-input-wrapper-init
data-twe-validate="input"
data-twe-validation-ruleset="isRequired">
<input
type="text"
class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0"
id="exampleFormControlInput1"
placeholder="Example label" />
<label
for="exampleFormControlInput1"
class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"
>First name (required)
</label>
</div>
<div
class="relative mb-3"
data-twe-input-wrapper-init
data-twe-validate="input"
data-twe-validation-ruleset="isRequired">
<input
type="text"
class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0"
id="exampleFormControlInput2"
placeholder="Example label" />
<label
for="exampleFormControlInput2"
class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"
>Last name (required)
</label>
</div>
<div
class="relative mb-3"
data-twe-input-wrapper-init
data-twe-validate="input"
data-twe-validation-optional>
<input
type="text"
class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0"
id="exampleFormControlInput3"
placeholder="Example label" />
<label
for="exampleFormControlInput3"
class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"
>Nickname (optional)
</label>
</div>
</div>
</li>
<li data-twe-stepper-step-ref class="w-[4.5rem] flex-auto">
<div
data-twe-stepper-head-ref
class="flex cursor-pointer items-center leading-[1.3rem] no-underline before:me-2 before:h-px before:w-full before:flex-1 before:bg-neutral-200 before:content-[''] after:ms-2 after:h-px after:w-full after:flex-1 after:bg-neutral-200 after:content-[''] hover:bg-stone-50 dark:before:bg-white/10 dark:after:bg-white/10 dark:hover:bg-white/[.025]">
<span
data-twe-stepper-head-icon-ref
class="my-6 me-2 flex h-[1.938rem] w-[1.938rem] items-center justify-center rounded-full text-sm">
2
</span>
<span
data-twe-stepper-head-text-ref
class="after:absolute after:flex after:text-[0.8rem]">
step2
</span>
</div>
<div
data-twe-stepper-content-ref
class="absolute left-0 w-full translate-x-[150%] p-4 transition-all duration-500 ease-in-out">
<div
class="relative mb-3"
data-twe-input-wrapper-init
data-twe-validate="input"
data-twe-validation-ruleset="isRequired"
data-twe-validation-styling="false">
<input
type="text"
class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0"
id="exampleFormControlInput4"
placeholder="Example label" />
<label
for="exampleFormControlInput4"
class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"
>Company name (required)
</label>
</div>
<div
class="relative mb-3"
data-twe-input-wrapper-init
data-twe-validate="input"
data-twe-validation-ruleset="isRequired"
data-twe-validation-styling="false">
<input
type="text"
class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0"
id="exampleFormControlInput5"
placeholder="Example label" />
<label
for="exampleFormControlInput5"
class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"
>Address (required)
</label>
</div>
<div
class="relative mb-3"
data-twe-input-wrapper-init
data-twe-validate="input"
data-twe-validation-ruleset="isEmail"
data-twe-validation-styling="false">
<input
type="text"
class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0"
id="exampleFormControlInput6"
placeholder="Example label" />
<label
for="exampleFormControlInput6"
class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"
>Email (required)
</label>
</div>
<div
class="relative mb-3"
data-twe-input-wrapper-init
data-twe-validate="input"
data-twe-validation-ruleset="isPhone"
data-twe-validation-optional
data-twe-validation-styling="false">
<input
type="text"
class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0"
id="exampleFormControlInput7"
placeholder="Example label" />
<label
for="exampleFormControlInput7"
class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"
>Phone (optional)
</label>
</div>
</div>
</li>
<li data-twe-stepper-step-ref class="w-[4.5rem] flex-auto">
<div
data-twe-stepper-head-ref
class="flex cursor-pointer items-center pe-6 leading-[1.3rem] no-underline before:me-2 before:h-px before:w-full before:flex-1 before:bg-neutral-200 before:content-[''] hover:bg-stone-50 dark:before:bg-white/10 dark:after:bg-white/10 dark:hover:bg-white/[.025]">
<span
data-twe-stepper-head-icon-ref
class="my-6 me-2 flex h-[1.938rem] w-[1.938rem] items-center justify-center rounded-full text-sm">
3
</span>
<span
data-twe-stepper-head-text-ref
class="after:absolute after:flex after:text-[0.8rem]">
step3
</span>
</div>
<div
data-twe-stepper-content-ref
class="absolute left-0 flex w-full translate-x-[150%] p-4 text-center transition-all duration-500 ease-in-out">
<div
class="relative mb-4 flex items-stretch"
data-twe-input-wrapper-init
data-twe-validate="input"
data-twe-validation-optional
data-twe-validation-styling="false">
<textarea
class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 data-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0"
id="exampleFormControlTextarea1"
rows="3"
placeholder="Your message"></textarea>
<label
for="exampleFormControlTextarea1"
class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"
>Additional information</label
>
</div>
<div class="flex justify-center">
<div
class="relative min-h-[1.5rem] ps-[1.5rem]"
data-twe-validate="checkbox"
data-twe-validation-ruleset="isChecked"
data-twe-validation-styling="false">
<input
class="relative float-left -ms-[1.5rem] me-[6px] mt-[0.15rem] h-[1.125rem] w-[1.125rem] appearance-none rounded-[0.25rem] border-[0.125rem] border-solid border-neutral-300 outline-none before:pointer-events-none before:absolute before:h-[0.875rem] before:w-[0.875rem] before:scale-0 before:rounded-full before:bg-transparent before:opacity-0 before:shadow-[0px_0px_0px_13px_transparent] before:content-[''] checked:border-primary checked:bg-primary checked:before:opacity-[0.16] checked:after:absolute checked:after:-mt-px checked:after:ms-[0.25rem] checked:after:block checked:after:h-[0.8125rem] checked:after:w-[0.375rem] checked:after:rotate-45 checked:after:border-[0.125rem] checked:after:border-s-0 checked:after:border-t-0 checked:after:border-solid checked:after:border-white checked:after:bg-transparent checked:after:content-[''] hover:cursor-pointer hover:before:opacity-[0.04] hover:before:shadow-[0px_0px_0px_13px_rgba(0,0,0,0.6)] focus:shadow-none focus:transition-[border-color_0.2s] focus:before:scale-100 focus:before:opacity-[0.12] focus:before:shadow-[0px_0px_0px_13px_rgba(0,0,0,0.6)] focus:before:transition-[box-shadow_0.2s,transform_0.2s] focus:after:absolute focus:after:z-[1] focus:after:block focus:after:h-[0.875rem] focus:after:w-[0.875rem] focus:after:rounded-[0.125rem] focus:after:content-[''] checked:focus:before:scale-100 checked:focus:before:shadow-[0px_0px_0px_13px_#3b71ca] checked:focus:before:transition-[box-shadow_0.2s,transform_0.2s] checked:focus:after:-mt-px checked:focus:after:ms-[0.25rem] checked:focus:after:h-[0.8125rem] checked:focus:after:w-[0.375rem] checked:focus:after:rotate-45 checked:focus:after:rounded-none checked:focus:after:border-[0.125rem] checked:focus:after:border-s-0 checked:focus:after:border-t-0 checked:focus:after:border-solid checked:focus:after:border-white checked:focus:after:bg-transparent dark:border-neutral-600 dark:checked:border-primary dark:checked:bg-primary dark:focus:before:shadow-[0px_0px_0px_13px_rgba(255,255,255,0.4)] dark:checked:focus:before:shadow-[0px_0px_0px_13px_#3b71ca]"
type="checkbox"
value=""
id="checkboxChecked"
checked />
<label
class="inline-block ps-[0.15rem] hover:cursor-pointer"
for="checkboxChecked">
Create an account?
</label>
</div>
</div>
<button
type="submit"
data-twe-submit-btn-ref
class="mt-3 inline-block w-full rounded bg-success px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#14a44d] transition duration-150 ease-in-out hover:bg-success-600 hover:shadow-[0_8px_9px_-4px_rgba(20,164,77,0.3),0_4px_18px_0_rgba(20,164,77,0.2)] focus:bg-success-600 focus:shadow-[0_8px_9px_-4px_rgba(20,164,77,0.3),0_4px_18px_0_rgba(20,164,77,0.2)] focus:outline-none focus:ring-0 active:bg-success-700 active:shadow-[0_8px_9px_-4px_rgba(20,164,77,0.3),0_4px_18px_0_rgba(20,164,77,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(20,164,77,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(20,164,77,0.2),0_4px_18px_0_rgba(20,164,77,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(20,164,77,0.2),0_4px_18px_0_rgba(20,164,77,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(20,164,77,0.2),0_4px_18px_0_rgba(20,164,77,0.1)]">
Place and older
</button>
</div>
</li>
</form>
</ul>
<div class="flex justify-center space-x-2">
<button
id="prev-btn"
type="button"
data-twe-ripple-init
data-twe-ripple-color="light"
class="w-full rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong">
Previous step
</button>
<button
id="next-btn"
type="button"
data-twe-ripple-init
data-twe-ripple-color="light"
class="w-full rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong">
Next step
</button>
</div>
import {
Stepper,
initTWE,
} from "tw-elements";
initTWE({ Stepper });
const stepperForm = document.getElementById("stepper-form");
const stepperFormInstance = Stepper.getInstance(stepperForm);
const prevBtn = document.getElementById("prev-btn");
const nextBtn = document.getElementById("next-btn");
prevBtn.addEventListener("click", () => {
stepperFormInstance.prevStep();
});
nextBtn.addEventListener("click", () => {
stepperFormInstance.nextStep();
});
const stepperForm = document.getElementById("stepper-form");
const stepperFormInstance = twe.Stepper.getInstance(stepperForm);
const prevBtn = document.getElementById("prev-btn");
const nextBtn = document.getElementById("next-btn");
prevBtn.addEventListener("click", () => {
stepperFormInstance.prevStep();
});
nextBtn.addEventListener("click", () => {
stepperFormInstance.nextStep();
});
Toggle to vertical or mobile on smaller screens
To switch between horizontal and vertical views, utilize the attributes
data-twe-stepper-vertical-breakpoint and
data-twe-stepper-mobile-breakpoint to specify pixel thresholds
for the transition. Assign appropriate classes based on the current stepper
view, using Tailwind CSS breakpoints. Resize the browser window to test it.
-
1 step1Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-
2 step2Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-
3 step3Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
<ul
data-twe-stepper-init
data-twe-stepper-vertical-breakpoint="768"
data-twe-stepper-mobile-breakpoint="400"
class="relative m-0 flex w-full list-none items-end justify-center overflow-hidden p-0 transition-[height] duration-200 ease-in-out min-[400px]:max-md:block md:items-start md:justify-between">
<li
data-twe-stepper-step-ref
class="mx-1 my-4 h-full min-[400px]:m-0 min-[400px]:h-fit min-[400px]:max-md:relative min-[400px]:max-md:after:absolute min-[400px]:max-md:after:left-[2.45rem] min-[400px]:max-md:after:top-[3.6rem] min-[400px]:max-md:after:mt-px min-[400px]:max-md:after:h-[calc(100%-2.45rem)] min-[400px]:max-md:after:w-px min-[400px]:max-md:after:bg-neutral-200 min-[400px]:max-md:after:content-[''] min-[400px]:max-md:dark:after:bg-white/10 md:w-[4.5rem] md:flex-auto">
<div
data-twe-stepper-head-ref
class="z-10 flex h-full cursor-pointer items-end justify-center leading-[1.3rem] no-underline after:content-[''] dark:after:bg-white/10 min-[400px]:items-center min-[400px]:hover:bg-stone-50 min-[400px]:dark:hover:bg-white/[.025] min-[400px]:max-md:justify-normal min-[400px]:max-md:p-6 md:py-6 md:ps-6 md:after:ms-2 md:after:h-px md:after:w-full md:after:flex-1 md:after:bg-neutral-200">
<span
data-twe-stepper-head-icon-ref
class="z-10 flex h-2 w-2 items-center justify-center rounded-full text-[0px] min-[400px]:h-[1.938rem] min-[400px]:w-[1.938rem] min-[400px]:text-sm min-[400px]:max-md:me-3 md:me-2">
1
</span>
<span
data-twe-stepper-head-text-ref
class="min-[400px] hidden min-[400px]:block min-[400px]:after:absolute min-[400px]:after:flex min-[400px]:after:text-[0.8rem]">
step1
</span>
</div>
<div
data-twe-stepper-content-ref
class="absolute left-0 top-[40px] w-full p-4 transition-all duration-500 ease-in-out min-[400px]:top-auto min-[400px]:max-md:relative min-[400px]:max-md:overflow-hidden min-[400px]:max-md:pb-6 min-[400px]:max-md:pe-6 min-[400px]:max-md:ps-[3.75rem]">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</li>
<li
data-twe-stepper-step-ref
class="mx-1 my-4 h-full min-[400px]:m-0 min-[400px]:h-fit min-[400px]:max-md:relative min-[400px]:max-md:after:absolute min-[400px]:max-md:after:left-[2.45rem] min-[400px]:max-md:after:top-[3.6rem] min-[400px]:max-md:after:mt-px min-[400px]:max-md:after:h-[calc(100%-2.45rem)] min-[400px]:max-md:after:w-px min-[400px]:max-md:after:bg-neutral-200 min-[400px]:max-md:after:content-[''] min-[400px]:max-md:dark:after:bg-white/10 md:w-[4.5rem] md:flex-auto">
<div
data-twe-stepper-head-ref
class="z-10 flex h-full cursor-pointer items-end justify-center leading-[1.3rem] no-underline min-[400px]:items-center min-[400px]:justify-normal min-[400px]:hover:bg-stone-50 min-[400px]:dark:hover:bg-white/[.025] min-[400px]:max-md:p-6 md:py-6 md:before:me-2 md:before:h-px md:before:w-full md:before:flex-1 md:before:bg-neutral-200 md:before:content-[''] md:after:ms-2 md:after:h-px md:after:w-full md:after:flex-1 md:after:bg-neutral-200 md:after:content-[''] md:dark:before:bg-white/10 md:dark:after:bg-white/10">
<span
data-twe-stepper-head-icon-ref
class="z-10 flex h-2 w-2 items-center justify-center rounded-full text-[0px] min-[400px]:h-[1.938rem] min-[400px]:w-[1.938rem] min-[400px]:text-sm min-[400px]:max-md:me-3 md:me-2">
2
</span>
<span
data-twe-stepper-head-text-ref
class="min-[400px] hidden min-[400px]:block min-[400px]:after:absolute min-[400px]:after:flex min-[400px]:after:text-[0.8rem]">
step2
</span>
</div>
<div
data-twe-stepper-content-ref
class="absolute left-0 top-[40px] w-full translate-x-[150%] p-4 transition-all duration-500 ease-in-out min-[400px]:top-auto min-[400px]:overflow-hidden min-[400px]:max-md:relative min-[400px]:max-md:translate-x-0 min-[400px]:max-md:pb-6 min-[400px]:max-md:pe-6 min-[400px]:max-md:ps-[3.75rem]">
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</div>
</li>
<li
data-twe-stepper-step-ref
class="mx-1 my-4 h-full min-[400px]:m-0 min-[400px]:h-fit min-[400px]:max-md:relative md:w-[4.5rem] md:flex-auto">
<div
data-twe-stepper-head-ref
class="z-10 flex h-full cursor-pointer items-end justify-center leading-[1.3rem] no-underline min-[400px]:items-center min-[400px]:hover:bg-stone-50 min-[400px]:dark:hover:bg-white/[.025] min-[400px]:max-md:justify-normal min-[400px]:max-md:p-6 md:py-6 md:pe-6 md:before:me-2 md:before:h-px md:before:w-full md:before:flex-1 md:before:bg-neutral-200 md:before:content-[''] md:dark:before:bg-white/10 md:dark:after:bg-white/10">
<span
data-twe-stepper-head-icon-ref
class="z-10 flex h-2 w-2 items-center justify-center rounded-full text-[0px] min-[400px]:h-[1.938rem] min-[400px]:w-[1.938rem] min-[400px]:text-sm min-[400px]:max-md:me-3 md:me-2">
3
</span>
<span
data-twe-stepper-head-text-ref
class="min-[400px] hidden min-[400px]:block min-[400px]:after:absolute min-[400px]:after:flex min-[400px]:after:text-[0.8rem]">
step3
</span>
</div>
<div
data-twe-stepper-content-ref
class="absolute left-0 top-[40px] w-full translate-x-[150%] p-4 transition-all duration-500 ease-in-out min-[400px]:top-auto min-[400px]:max-md:relative min-[400px]:max-md:translate-x-0 min-[400px]:max-md:overflow-hidden min-[400px]:max-md:pb-6 min-[400px]:max-md:pe-6 min-[400px]:max-md:ps-[3.75rem]">
Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur.
</div>
</li>
</ul>
// Initialization for ES Users
import {
Stepper,
initTWE,
} from "tw-elements";
initTWE({ Stepper });
Events
Stepper emits events after successful step validation, failed step validation, before and after changing to another step. Check the browser console and try to change the step to see the result.
<ul
id="stepper-events"
data-twe-stepper-init
data-twe-stepper-linear="true"
class="relative m-0 flex w-full list-none justify-between overflow-hidden p-0 transition-[height] duration-200 ease-in-out">
<form
id="form-1"
novalidate
data-twe-validation-init
data-twe-active-validation="true"
class="relative h-full w-full"
style="display: inherit;">
<li data-twe-stepper-step-ref class="w-[4.5rem] flex-auto">
<div
data-twe-stepper-head-ref
class="flex cursor-pointer items-center ps-6 leading-[1.3rem] no-underline after:ms-2 after:h-px after:w-full after:flex-1 after:bg-neutral-200 after:content-[''] hover:bg-stone-50 dark:after:bg-white/10 dark:hover:bg-white/[.025]">
<span
data-twe-stepper-head-icon-ref
class="my-6 me-2 flex h-[1.938rem] w-[1.938rem] items-center justify-center rounded-full text-sm">
1
</span>
<span
data-twe-stepper-head-text-ref
class="after:absolute after:flex after:text-[0.8rem] ">
step1
</span>
</div>
<div
data-twe-stepper-content-ref
class="absolute w-full p-4 transition-all duration-500 ease-in-out">
<div
class="relative mb-3"
data-twe-input-wrapper-init
data-twe-validate="input"
data-twe-validation-ruleset="isRequired">
<input
type="text"
class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0"
id="exampleFormControlInput1"
placeholder="Example label" />
<label
for="exampleFormControlInput1"
class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"
>step 1
</label>
</div>
</div>
</li>
<li data-twe-stepper-step-ref class="w-[4.5rem] flex-auto">
<div
data-twe-stepper-head-ref
class="flex cursor-pointer items-center leading-[1.3rem] no-underline before:me-2 before:h-px before:w-full before:flex-1 before:bg-neutral-200 before:content-[''] after:ms-2 after:h-px after:w-full after:flex-1 after:bg-neutral-200 after:content-[''] hover:bg-stone-50 dark:before:bg-white/10 dark:after:bg-white/10 dark:hover:bg-white/[.025]">
<span
data-twe-stepper-head-icon-ref
class="my-6 me-2 flex h-[1.938rem] w-[1.938rem] items-center justify-center rounded-full text-sm">
2
</span>
<span
data-twe-stepper-head-text-ref
class="after:absolute after:flex after:text-[0.8rem]">
step2
</span>
</div>
<div
data-twe-stepper-content-ref
class="absolute left-0 w-full translate-x-[150%] p-4 transition-all duration-500 ease-in-out">
<div
class="relative mb-3"
data-twe-input-wrapper-init
data-twe-validate="input"
data-twe-validation-ruleset="isRequired"
data-twe-validation-styling="false">
<input
type="text"
class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0"
id="exampleFormControlInput2"
placeholder="Example label" />
<label
for="exampleFormControlInput2"
class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"
>step 2
</label>
</div>
</div>
</li>
<li data-twe-stepper-step-ref class="w-[4.5rem] flex-auto">
<div
data-twe-stepper-head-ref
class="flex cursor-pointer items-center pe-6 leading-[1.3rem] no-underline before:me-2 before:h-px before:w-full before:flex-1 before:bg-neutral-200 before:content-[''] hover:bg-stone-50 dark:before:bg-white/10 dark:after:bg-white/10 dark:hover:bg-white/[.025]">
<span
data-twe-stepper-head-icon-ref
class="my-6 me-2 flex h-[1.938rem] w-[1.938rem] items-center justify-center rounded-full text-sm">
3
</span>
<span
data-twe-stepper-head-text-ref
class="after:absolute after:flex after:text-[0.8rem]">
step3
</span>
</div>
<div
data-twe-stepper-content-ref
class="absolute left-0 flex w-full translate-x-[150%] p-4 text-center transition-all duration-500 ease-in-out">
<div
class="relative mb-3"
data-twe-input-wrapper-init
data-twe-validate="input"
data-twe-validation-ruleset="isRequired"
data-twe-validation-styling="false">
<input
type="text"
class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0"
id="exampleFormControlInput3"
placeholder="Example label" />
<label
for="exampleFormControlInput3"
class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"
>step 3
</label>
</div>
</div>
</li>
</form>
</ul>
import {
Stepper,
Input,
initTWE,
} from "tw-elements";
initTWE({ Stepper, Input });
const stepperEvents = document.getElementById("stepper-events");
stepperEvents.addEventListener("stepValid.twe.stepper", (e) => {
console.log("stepValid", e);
});
stepperEvents.addEventListener("stepInvalid.twe.stepper", (e) => {
console.log("stepInvalid", e);
});
stepperEvents.addEventListener("stepChange.twe.stepper", (e) => {
console.log("stepChange", e);
});
stepperEvents.addEventListener("stepChanged.twe.stepper", (e) => {
console.log("stepChanged", e);
});
const stepperEvents = document.getElementById("stepper-events");
stepperEvents.addEventListener("stepValid.twe.stepper", (e) => {
console.log("stepValid", e);
});
stepperEvents.addEventListener("stepInvalid.twe.stepper", (e) => {
console.log("stepInvalid", e);
});
stepperEvents.addEventListener("stepChange.twe.stepper", (e) => {
console.log("stepChange", e);
});
stepperEvents.addEventListener("stepChanged.twe.stepper", (e) => {
console.log("stepChanged", e);
});
Related resources
Tutorials:
hover state
focus active and others
dark mode
utility first
buttons
ripple effect
lists
cards
sizing
Extended Docs:
animations
colors
dividers
hover effects
typography
pagination
scrollspy
accordion
buttons
collapse
dropdown
list group
progress
timeline
registration form
Validation
columns
dark theme
display flex
flexbox
icons
overflow
position
spacing
visibility hidden
z index
Generators and builders:
Design System (Figma):
introduction
content should be the star
less is more
power of visual hierarchy
de emphasize with no mercy
size matters
label overload
lowering contrast
beyond borders
let it breathe
user experience
do not start with the roof
project personality
design system
plan the process
principles
tips and tricks