Tailwind CSS Stepper

Use responsive stepper component with helper examples for stepper ui, stepper form, vertical stepper, progress steps & more. Free download, open-source license.

Basic example

You can automatically initialize the stepper component using data-twe-stepper-init attribute.

1 step1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
2 step2

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
3 step3

Duis 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 });

Hey there 👋 we're excited about TW elements and want to see it grow! If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!

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 step1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
2 step2

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
3 step3

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

HTML
javascript
umd

ES UMD

  <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.

HTML
javascript
umd

ES UMD

  <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

step 1
2 step2

step 2
3 step3

step 3

  <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 step1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
2 step2

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
3 step3

Duis 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 step1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
2 step2

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
3 step3

Duis 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 step1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
2 step2

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
3 step3

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
4 step4

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
5 step4

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
6 step4

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
7 step4

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
8 step4

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
9 step4

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
10 step4

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
11 step4

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
12 step4

Duis 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 step1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
2 step2

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
3 step3

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

HTML
javascript
umd

ES UMD

  <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 step1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
2 step2

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
3 step3

Duis 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 1
step 2

step 2
Loading...
step 3

step3

  <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.

HTML
javascript
umd

ES UMD

  <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 step1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
2 step2

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
3 step3

Duis 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.

HTML
javascript
umd

ES UMD

  <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); });

Name	Type	Default	Description
`stepperAnimationDuration`	number	`800`	Set the animation duration in milliseconds. Should be the same as the duration provided by animation classes.
`stepperHeadClick`	Boolean	`false`	Set to `true` to block the possibility of changing a step by clicking on another step.
`stepperLinear`	boolean	`false`	Set to `true` to use the linear stepper.
`stepperMobileBackBtn`	String	`"BACK"`	Sets custom text for the BACK button.
`stepperMobileBackBtnIcon`	String	`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" /> </svg>`	Sets custom icon for the BACK button.
`stepperMobileBarBreakpoint`	Number	`4`	Sets the step limit after which the progress bar will appear in the mobile view instead of the dots.
`stepperMobileBreakpoint`	Number	`0`	Sets the resolution below which the stepper will switch to mobile.
`stepperMobileNextBtn`	String	`"NEXT"`	Sets custom text for the NEXT button.
`stepperMobileNextBtnIcon`	String	`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" /> </svg>`	Sets custom text for the NEXT button.
`stepperMobileOfTxt`	String	`"of"`	Sets custom `of` value in the mobile stepper head.
`stepperMobileStepTxt`	String	`"step"`	Sets custom `step` value in the mobile stepper head.
`stepperNoEditable`	Boolean	`false`	Set to `true` to block editing of the completed step.
`stepperType`	String	`'horizontal'`	Set stepper view.
`stepperVerticalBreakpoint`	Number	`0`	Sets the resolution below which the stepper will switch to vertical.
`slideInLeftAnimation`	String	`animate-[slide-in-left_0.8s_both]`	Sets the animation class for the slide in left animation.
`slideOutLeftAnimation`	String	`animate-[slide-out-left_0.8s_both]`	Sets the animation class for the slide out left animation.
`slideInRightAnimation`	String	`animate-[slide-in-right_0.8s_both]`	Sets the animation class for the slide in right animation.
`slideOutRightAnimation`	String	`animate-[slide-out-right_0.8s_both]`	Sets the animation class for the slide out right animation.

Name	Default	Description
`activeStepHeadIcon`	!bg-primary-100 !text-primary-700 dark:!bg-slate-900 dark:!text-primary-500	Sets active styles for the step head icon. Color classes should be marked as important to properly being applied.
`activeStepHeadText`	font-medium !text-black/50 dark:!text-white/50	Sets active styles for the step head text. Color classes should be marked as important to properly being applied.
`completedStepHeadIcon`	bg-success-100 text-success-700 dark:bg-green-950 dark:text-success-500/80	Sets completed styles for the step head icon.
`completedStepHeadText`	-	Sets completed styles for the step head text.
`defaultStepHeadIcon`	bg-neutral-500 text-white	Sets default styles for the step head icon.
`defaultStepHeadText`	text-black/50 dark:text-white/50	Sets default styles for the step head text.
`disabledStepHead`	!cursor-default	Sets disabled styles for the step head.
`disabledStepHeadIcon`	bg-neutral-500 text-neutral-300 dark:text-white/50	Sets disabled styles for the step head icon.
`disabledStepHeadText`	text-black/30 dark:text-white/30	Sets disabled styles for the step head text.
`invalidStepHeadIcon`	bg-danger-100 text-danger-700 dark:bg-[#2c0f14] dark:text-danger-500	Sets invalid styles for the step head icon.
`invalidStepHeadText`	-	Sets invalid styles for the step head text.
`mobileActiveStepHeadIcon`	!bg-primary	Sets active styles for the mobile step head icon. Color classes should be marked as important to properly being applied.
`mobileBtnBack`	flex h-[40px] items-center justify-center rounded ps-4 pe-5 text-xs font-medium uppercase leading-normal text-neutral-600 transition duration-150 ease-in-out focus:text-primary-600 hover:bg-neutral-100 focus:outline-none focus:ring-0 dark:text-white dark:focus:text-neutral-300 dark:hover:bg-zinc-600 dark:hover:bg-opacity-70	Sets styles for the mobile back button.
`mobileBtnBackIcon`	pe-2 [&>svg]:h-[18px] [&>svg]:w-[18px]	Sets styles for the mobile back button icon.
`mobileBtnNext`	flex h-[40px] items-center justify-center rounded ps-5 pe-4 text-xs font-medium uppercase leading-normal text-neutral-600 transition duration-150 ease-in-out focus:text-primary-600 hover:bg-neutral-100 focus:outline-none focus:ring-0 dark:text-white dark:focus:text-neutral-300 dark:hover:bg-zinc-600 dark:hover:bg-opacity-70	Sets styles for the mobile next button.
`mobileBtnNextIcon`	ps-2 [&>svg]:h-[18px] [&>svg]:w-[18px]	Sets styles for the mobile next button icon.
`mobileCompletedStepHeadIcon`	bg-success	Sets completed styles for the mobile step head icon.
`mobileDefaultStepHeadIcon`	bg-neutral-500	Sets default styles for the mobile step head icon.
`mobileDisabledStepHeadIcon`	bg-neutral-500	Sets disabled styles for the mobile step head icon.
`mobileFooter`	absolute flex h-[40px] w-full items-center justify-between bg-zinc-50 dark:bg-neutral-700	Sets styles for the mobile stepper footer. The footer contains the back and next buttons.
`mobileHeader`	absolute top-0 h-fit w-full bg-zinc-50 px-4 py-2 dark:bg-neutral-700	Sets styles for the mobile stepper header.
`mobileHeaderText`	text-base text-neutral-600 dark:text-white	Sets styles for the mobile stepper header text.
`mobileInvalidStepHeadIcon`	bg-danger	Sets invalid styles for the mobile step head icon.
`mobileProgressBar`	h-1 bg-primary-600	Sets styles for the mobile progress bar.
`mobileProgressBarWrapper`	h-1 w-full bg-zinc-100 dark:bg-neutral-600	Sets styles for the mobile progress bar wrapper.
`hideVerticalContent`	!my-0 !py-0 !h-0	Sets styles to hide the content of the vertical stepper.

Method	Description	Example
`changeStep`	Switch to the step given as the parameter.	`Stepper.changeStep()`
`nextStep`	Switch to the next step.	`stepper.nextStep()`
`prevStep`	Switch to the previous step.	`stepper.previousStep()`
`resizeStepper`	Reset the height and view of the stepper.	`stepper.resizeStepper()`
`getInstance`	Static method which allows you to get the stepper instance associated to a DOM element.	`Stepper.getInstance(myStepperEl)`
`getOrCreateInstance`	Static method which returns the stepper instance associated to a DOM element or create a new one in case it wasn't initialized.	`Stepper.getOrCreateInstance(myStepperEl)`

Event type	Description
`stepChange.twe.stepper`	This event is emitted before the step change takes place. By using `e.preventDefault()` you can implement custom validation. Information about the current and next steps can be accessed through the following properties of the emitted event: `e.currentStep` and `e.nextStep`.
`stepChanged.twe.stepper`	This event is emitted after the step change takes place. Information about the current and previous steps can be accessed through the following properties of the emitted event: `e.currentStep` and `e.prevStep`.
`stepValid.twe.stepper`	This event is emitted after successful step validation. Information about the current and next steps can be accessed through the following properties of the emitted event: `e.currentStep` and `e.nextStep`.
`stepInvalid.twe.stepper`	This event is emitted after unsuccessful step validation. Information about the current and next steps can be accessed through the following properties of the emitted event: `e.currentStep` and `e.nextStep`.

Stepper

Basic example

Change steps using external elements

Linear stepper

With Validation component

With default HMTL validation

No editable stepper

Vertical stepper

Mobile stepper

Mobile stepper progress bar

Stepper with gesture support

Optional step

Custom icons

Form wizard

Toggle to vertical or mobile on smaller screens

Events

Stepper - API

Import

Usage

Via data attributes

Via JavaScript

Options

Classes

Methods

Events

Access restricted

To view this section you must have an active PRO account

Stepper

Tailwind CSS Stepper

Basic example

Change steps using external elements

Linear stepper

With Validation component

With default HMTL validation

No editable stepper

Vertical stepper

Mobile stepper

Mobile stepper progress bar

Stepper with gesture support

Optional step

Custom icons

Form wizard

Toggle to vertical or mobile on smaller screens

Events

Related resources

Tutorials:

Extended Docs:

Generators and builders:

Design System (Figma):

Stepper - API

Import

Usage

Via data attributes

Via JavaScript

Options

Classes

Methods

Events