Movatterモバイル変換

[0]ホーム
URL:

Stepper

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.

Required ES init: Stepper*
* UMD autoinits are enabled by default. This means that you don't need to initialize the component manually. However if you are using TW ElementsES format then you should pass the required components to theinitTWE method.

Basic example

You can automatically initialize the stepper component usingdata-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 thenextStep andprevStep methods. You can also choose a specific step using thechangeStep 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.
                  <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 theValidation 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 setstepperLinear option.

With Validation component

InitialiaseValidation component on your form, which should wrap all steps, and set options you need. Within thedata-twe-stepper-content-ref div's, include elements for validation supported by the Validation component. Also adddata-twe-validation-styling="false" to elements that are not in the active step on initialization to provide proper styling.

  • 1 step1
  • 2 step2
  • 3 step3
                  <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 setrequired to the elements you want to validate and add your own logic for styling validation elements.

  • 1 step1
  • 2 step2
  • 3 step3
                  <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 setdata-twe-stepper-no-editable="true" to prevent editing a completed step.

  • 1 step1
  • 2 step2
  • 3 step3
                  <ul        data-twe-stepper-init        data-twe-stepper-no-editable="true"        class="relative m-0 flex w-full list-none justify-between overflow-hidden p-0 transition-[height] duration-200 ease-in-out">        <li data-twe-stepper-step-ref class="w-[4.5rem] flex-auto">          <div            data-twe-stepper-head-ref            class="flex cursor-pointer items-center ps-6 leading-[1.3rem] no-underline after:ms-2 after:h-px after:w-full after:flex-1 after:bg-neutral-200 after:content-[''] hover:bg-stone-50 dark:after:bg-white/10 dark:hover:bg-white/[.025]">            <span              data-twe-stepper-head-icon-ref              class="my-6 me-2 flex h-[1.938rem] w-[1.938rem] items-center justify-center rounded-full text-sm">              1            </span>            <span              data-twe-stepper-head-text-ref              class="after:absolute after:flex after:text-[0.8rem] ">              step1            </span>          </div>          <div            data-twe-stepper-content-ref            class="absolute w-full p-4 transition-all duration-500 ease-in-out">            <div class="relative mb-3" data-twe-input-wrapper-init>              <input                type="text"                class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0"                id="exampleFormControlInput1"                placeholder="Example label" />              <label                for="exampleFormControlInput1"                class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"                >step 1              </label>            </div>          </div>        </li>        <li data-twe-stepper-step-ref class="w-[4.5rem] flex-auto">          <div            data-twe-stepper-head-ref            class="flex cursor-pointer items-center leading-[1.3rem] no-underline before:me-2 before:h-px before:w-full before:flex-1 before:bg-neutral-200 before:content-[''] after:ms-2 after:h-px after:w-full after:flex-1 after:bg-neutral-200 after:content-[''] hover:bg-stone-50 dark:before:bg-white/10 dark:after:bg-white/10 dark:hover:bg-white/[.025]">            <span              data-twe-stepper-head-icon-ref              class="my-6 me-2 flex h-[1.938rem] w-[1.938rem] items-center justify-center rounded-full text-sm">              2            </span>            <span              data-twe-stepper-head-text-ref              class="after:absolute after:flex after:text-[0.8rem]">              step2            </span>          </div>          <div            data-twe-stepper-content-ref            class="absolute left-0 w-full translate-x-[150%] p-4 transition-all duration-500 ease-in-out">            <div class="relative mb-3" data-twe-input-wrapper-init>              <input                type="text"                class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0"                id="exampleFormControlInput2"                placeholder="Example label" />              <label                for="exampleFormControlInput2"                class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"                >step 2              </label>            </div>          </div>        </li>        <li data-twe-stepper-step-ref class="w-[4.5rem] flex-auto">          <div            data-twe-stepper-head-ref            class="flex cursor-pointer items-center pe-6 leading-[1.3rem] no-underline before:me-2 before:h-px before:w-full before:flex-1 before:bg-neutral-200 before:content-[''] hover:bg-stone-50 dark:before:bg-white/10 dark:after:bg-white/10 dark:hover:bg-white/[.025]">            <span              data-twe-stepper-head-icon-ref              class="my-6 me-2 flex h-[1.938rem] w-[1.938rem] items-center justify-center rounded-full text-sm">              3            </span>            <span              data-twe-stepper-head-text-ref              class="after:absolute after:flex after:text-[0.8rem]">              step3            </span>          </div>          <div            data-twe-stepper-content-ref            class="absolute left-0 w-full translate-x-[150%] p-4 transition-all duration-500 ease-in-out">            <div class="relative mb-3" data-twe-input-wrapper-init>              <input                type="text"                class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0"                id="exampleFormControlInput3"                placeholder="Example label" />              <label                for="exampleFormControlInput3"                class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"                >step 3              </label>            </div>          </div>        </li>      </ul>
                  // Initialization for ES Users      import {        Stepper,        Input,        initTWE,      } from "tw-elements";            initTWE({ Stepper, Input });

Vertical stepper

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

Setdata-twe-stepper-type="mobile" and add properly styles, like in this example, to use mobile view.

  • 1step1
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • 2step2
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  • 3step3
    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 thestepperMobileBarBreakpoint option.

  • 1step1
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
  • 2step2
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  • 3step3
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
  • 4step4
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
  • 5step4
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
  • 6step4
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
  • 7step4
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
  • 8step4
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
  • 9step4
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
  • 10step4
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
  • 11step4
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
  • 12step4
    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

AddingTouch 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.
                  <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 addingdata-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 insidedata-twe-stepper-head-icon-ref element.

  • step1
  • step 2
  • Loading...
     step 3
                  <ul        data-twe-stepper-init        class="relative m-0 flex w-full list-none justify-between overflow-hidden p-0 transition-[height] duration-200 ease-in-out">        <li data-twe-stepper-step-ref class="w-[4.5rem] flex-auto">          <div            data-twe-stepper-head-ref            class="flex cursor-pointer items-center ps-6 leading-[1.3rem] no-underline after:ms-2 after:h-px after:w-full after:flex-1 after:bg-neutral-200 after:content-[''] hover:bg-stone-50 dark:after:bg-white/10 dark:hover:bg-white/[.025]">            <span              data-twe-stepper-head-icon-ref              class="my-6 me-2 flex h-[1.938rem] w-[1.938rem] items-center justify-center rounded-full text-sm">              <span class="[&>svg]:h-5 [&>svg]:w-5">                <svg                  xmlns="http://www.w3.org/2000/svg"                  viewBox="0 0 24 24"                  fill="currentColor">                  <path                    fill-rule="evenodd"                    d="M7.5 6a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM3.751 20.105a8.25 8.25 0 0 1 16.498 0 .75.75 0 0 1-.437.695A18.683 18.683 0 0 1 12 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 0 1-.437-.695Z"                    clip-rule="evenodd" />                </svg>              </span>            </span>            <span              data-twe-stepper-head-text-ref              class="after:absolute after:flex after:text-[0.8rem]">              step1            </span>          </div>          <div            data-twe-stepper-content-ref            class="absolute w-full p-4 transition-all duration-500 ease-in-out">            <div class="relative mb-3" data-twe-input-wrapper-init>              <input                type="text"                class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0"                id="exampleFormControlInput1" />              <label                for="exampleFormControlInput1"                class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"                >step 1              </label>            </div>          </div>        </li>        <li data-twe-stepper-step-ref class="w-[4.5rem] flex-auto">          <div            data-twe-stepper-head-ref            class="flex cursor-pointer items-center leading-[1.3rem] no-underline before:me-2 before:h-px before:w-full before:flex-1 before:bg-neutral-200 before:content-[''] after:ms-2 after:h-px after:w-full after:flex-1 after:bg-neutral-200 after:content-[''] hover:bg-stone-50 dark:before:bg-white/10 dark:after:bg-white/10 dark:hover:bg-white/[.025]">            <span              data-twe-stepper-head-icon-ref              class="my-6 me-2 flex h-[1.938rem] w-[1.938rem] items-center justify-center rounded-full text-sm">              <span class="[&>svg]:h-5 [&>svg]:w-5">                <svg                  xmlns="http://www.w3.org/2000/svg"                  viewBox="0 0 24 24"                  fill="currentColor">                  <path                    d="M1.5 8.67v8.58a3 3 0 0 0 3 3h15a3 3 0 0 0 3-3V8.67l-8.928 5.493a3 3 0 0 1-3.144 0L1.5 8.67Z" />                  <path                    d="M22.5 6.908V6.75a3 3 0 0 0-3-3h-15a3 3 0 0 0-3 3v.158l9.714 5.978a1.5 1.5 0 0 0 1.572 0L22.5 6.908Z" />                </svg>              </span>            </span>            <span              data-twe-stepper-head-text-ref              class="after:absolute after:flex after:text-[0.8rem]">              step 2            </span>          </div>          <div            data-twe-stepper-content-ref            class="absolute left-0 w-full translate-x-[150%] p-4 transition-all duration-500 ease-in-out">            <div class="relative mb-3" data-twe-input-wrapper-init>              <input                type="text"                class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0"                id="exampleFormControlInput2" />              <label                for="exampleFormControlInput2"                class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"                >step 2              </label>            </div>          </div>        </li>        <li data-twe-stepper-step-ref class="w-[4.5rem] flex-auto">          <div            data-twe-stepper-head-ref            class="flex cursor-pointer items-center pe-6 leading-[1.3rem] no-underline before:me-2 before:h-px before:w-full before:flex-1 before:bg-neutral-200 before:content-[''] hover:bg-stone-50 dark:before:bg-white/10 dark:after:bg-white/10 dark:hover:bg-white/[.025]">            <span              data-twe-stepper-head-icon-ref              class="my-6 me-2 flex h-[1.938rem] w-[1.938rem] items-center justify-center rounded-full text-sm">              <div                class="inline-block h-5 w-5 animate-spin rounded-full border-[3px] border-solid border-current border-e-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]"                role="status">                <span                  class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]"                  >Loading...</span                >              </div>            </span>            <span              data-twe-stepper-head-text-ref              class="after:absolute after:flex after:text-[0.8rem]">              step 3            </span>          </div>          <div            data-twe-stepper-content-ref            class="absolute left-0 w-full translate-x-[150%] p-4 transition-all duration-500 ease-in-out">            <div class="relative mb-3" data-twe-input-wrapper-init>              <input                type="text"                class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0"                id="exampleFormControlInput3" />              <label                for="exampleFormControlInput3"                class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"                >step3              </label>            </div>          </div>        </li>      </ul>
                  // Initialization for ES Users      import {        Stepper,        Input,        initTWE,      } from "tw-elements";            initTWE({ Stepper, Input });

Form wizard

An example of so-calledForm wizard with multiple inputs on each step.

  • 1 step1
  • 2 step2
  • 3 step3
                  <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 attributesdata-twe-stepper-vertical-breakpoint anddata-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.

  • 1 step1
  • 2 step2
  • 3 step3
                  <ul        id="stepper-events"        data-twe-stepper-init        data-twe-stepper-linear="true"        class="relative m-0 flex w-full list-none justify-between overflow-hidden p-0 transition-[height] duration-200 ease-in-out">        <form          id="form-1"          novalidate          data-twe-validation-init          data-twe-active-validation="true"          class="relative h-full w-full"          style="display: inherit;">          <li data-twe-stepper-step-ref class="w-[4.5rem] flex-auto">            <div              data-twe-stepper-head-ref              class="flex cursor-pointer items-center ps-6 leading-[1.3rem] no-underline after:ms-2 after:h-px after:w-full after:flex-1 after:bg-neutral-200 after:content-[''] hover:bg-stone-50 dark:after:bg-white/10 dark:hover:bg-white/[.025]">              <span                data-twe-stepper-head-icon-ref                class="my-6 me-2 flex h-[1.938rem] w-[1.938rem] items-center justify-center rounded-full text-sm">                1              </span>              <span                data-twe-stepper-head-text-ref                class="after:absolute after:flex after:text-[0.8rem] ">                step1              </span>            </div>            <div              data-twe-stepper-content-ref              class="absolute w-full p-4 transition-all duration-500 ease-in-out">              <div                class="relative mb-3"                data-twe-input-wrapper-init                data-twe-validate="input"                data-twe-validation-ruleset="isRequired">                <input                  type="text"                  class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0"                  id="exampleFormControlInput1"                  placeholder="Example label" />                <label                  for="exampleFormControlInput1"                  class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"                  >step 1                </label>              </div>            </div>          </li>          <li data-twe-stepper-step-ref class="w-[4.5rem] flex-auto">            <div              data-twe-stepper-head-ref              class="flex cursor-pointer items-center leading-[1.3rem] no-underline before:me-2 before:h-px before:w-full before:flex-1 before:bg-neutral-200 before:content-[''] after:ms-2 after:h-px after:w-full after:flex-1 after:bg-neutral-200 after:content-[''] hover:bg-stone-50 dark:before:bg-white/10 dark:after:bg-white/10 dark:hover:bg-white/[.025]">              <span                data-twe-stepper-head-icon-ref                class="my-6 me-2 flex h-[1.938rem] w-[1.938rem] items-center justify-center rounded-full text-sm">                2              </span>              <span                data-twe-stepper-head-text-ref                class="after:absolute after:flex after:text-[0.8rem]">                step2              </span>            </div>            <div              data-twe-stepper-content-ref              class="absolute left-0 w-full translate-x-[150%] p-4 transition-all duration-500 ease-in-out">              <div                class="relative mb-3"                data-twe-input-wrapper-init                data-twe-validate="input"                data-twe-validation-ruleset="isRequired"                data-twe-validation-styling="false">                <input                  type="text"                  class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0"                  id="exampleFormControlInput2"                  placeholder="Example label" />                <label                  for="exampleFormControlInput2"                  class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"                  >step 2                </label>              </div>            </div>          </li>          <li data-twe-stepper-step-ref class="w-[4.5rem] flex-auto">            <div              data-twe-stepper-head-ref              class="flex cursor-pointer items-center pe-6 leading-[1.3rem] no-underline before:me-2 before:h-px before:w-full before:flex-1 before:bg-neutral-200 before:content-[''] hover:bg-stone-50 dark:before:bg-white/10 dark:after:bg-white/10 dark:hover:bg-white/[.025]">              <span                data-twe-stepper-head-icon-ref                class="my-6 me-2 flex h-[1.938rem] w-[1.938rem] items-center justify-center rounded-full text-sm">                3              </span>              <span                data-twe-stepper-head-text-ref                class="after:absolute after:flex after:text-[0.8rem]">                step3              </span>            </div>            <div              data-twe-stepper-content-ref              class="absolute left-0 flex w-full translate-x-[150%] p-4 text-center transition-all duration-500 ease-in-out">              <div                class="relative mb-3"                data-twe-input-wrapper-init                data-twe-validate="input"                data-twe-validation-ruleset="isRequired"                data-twe-validation-styling="false">                <input                  type="text"                  class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0"                  id="exampleFormControlInput3"                  placeholder="Example label" />                <label                  for="exampleFormControlInput3"                  class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"                  >step 3                </label>              </div>            </div>          </li>        </form>      </ul>
                  import {        Stepper,        Input,        initTWE,      } from "tw-elements";            initTWE({ Stepper, Input });      const stepperEvents = document.getElementById("stepper-events");      stepperEvents.addEventListener("stepValid.twe.stepper", (e) => {        console.log("stepValid", e);      });          stepperEvents.addEventListener("stepInvalid.twe.stepper", (e) => {        console.log("stepInvalid", e);      });          stepperEvents.addEventListener("stepChange.twe.stepper", (e) => {        console.log("stepChange", e);      });          stepperEvents.addEventListener("stepChanged.twe.stepper", (e) => {        console.log("stepChanged", e);      });
                  const stepperEvents = document.getElementById("stepper-events");      stepperEvents.addEventListener("stepValid.twe.stepper", (e) => {        console.log("stepValid", e);      });          stepperEvents.addEventListener("stepInvalid.twe.stepper", (e) => {        console.log("stepInvalid", e);      });          stepperEvents.addEventListener("stepChange.twe.stepper", (e) => {        console.log("stepChange", e);      });          stepperEvents.addEventListener("stepChanged.twe.stepper", (e) => {        console.log("stepChanged", e);      });

Related resources

Tutorials:

Extended Docs:

Generators and builders:

Design System (Figma):

Stepper - API

Import

Importing components depends on how your application works. If you intend to use the TW elementsES format, you must first import the component and then initialize it with theinitTWE method. If you are going to use theUMD format, just import thetw-elements package.

                    import { Stepper, initTWE } from "tw-elements";        initTWE({ Stepper });
                    import "tw-elements";

Usage

Via data attributes

Elements with thedata-twe-stepper-init attribute will be automatically initialized - you can set all available options with data attributes. For ES format, you must first import and call theinitTWE method.

                    <ul          id="stepper"          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">          ...        </ul>

Via JavaScript

You can access an instance from your Javascript code, by using thegetInstance static method of the Stepper class - it allows making use of all the public methods listed in theMethods section.

                          const stepper = new Stepper(document.getElementById('stepper'));
                          const stepper = new twe.Stepper(document.getElementById('stepper'));

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name todata-twe-, as indata-twe-stepper-type="vertical".

Name Type DefaultDescription
stepperAnimationDuration number800 Set the animation duration in milliseconds. Should be the same as the duration provided by animation classes.
stepperHeadClick Booleanfalse Set totrue to block the possibility of changing a step by clicking on another step.
stepperLinear booleanfalse Set totrue 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 customof value in the mobile stepper head.
stepperMobileStepTxt String "step" Sets customstep value in the mobile stepper head.
stepperNoEditable Booleanfalse Set totrue to block editing of the completed step.
stepperType String'horizontal' Set stepper view.
stepperVerticalBreakpoint Number0 Sets the resolution below which the stepper will switch to vertical.
slideInLeftAnimation Stringanimate-[slide-in-left_0.8s_both] Sets the animation class for the slide in left animation.
slideOutLeftAnimation Stringanimate-[slide-out-left_0.8s_both] Sets the animation class for the slide out left animation.
slideInRightAnimation Stringanimate-[slide-in-right_0.8s_both] Sets the animation class for the slide in right animation.
slideOutRightAnimation Stringanimate-[slide-out-right_0.8s_both] Sets the animation class for the slide out right animation.

Classes

Custom classes can be passed via data attributes or JavaScript. For data attributes, append the class name todata-twe-class, as indata-twe-class-mobile-footer="".

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

Methods

Method DescriptionExample
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)
                        const myStepperEl = document.getElementById('stepper');            const stepper = new Stepper(myStepperEl);            stepper.nextStep();
                        const myStepperEl = document.getElementById('stepper');            const stepper = new twe.Stepper(myStepperEl);            stepper.nextStep();

Events

Event typeDescription
stepChange.twe.stepper This event is emitted before the step change takes place. By usinge.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 ande.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 ande.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 ande.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 ande.nextStep.
                        const stepperEvents = document.getElementById("stepper-events");            stepperEvents.addEventListener("stepValid.twe.stepper", (e) => {              console.log("stepValid", e);            });
[8]ページ先頭
©2009-2025 Movatter.jp