search results:

    • Standard
    • React
    License Free hosting Learn Services Community
    • + D
    • Light
    • Dark
    • System
    logo Tailwind Elements
    • Getting started
      • Quick start
      • Tutorials
      • Design system
      • Local installation
      • Optimization
      • Dark mode
      • Theming
      • Changelog
      • Contribute
      • Internationalization guide
    • Integrations
      • Angular
      • Django
      • Express
      • Laravel
      • Next
      • Nuxt
      • React
      • Remix
      • Solid
      • Svelte
      • Vue
    • Content & styles
      • Animations
      • Animations Extended
      • Colors
      • Dividers
      • Figures
      • Headings
      • Hover effects
      • Icons
      • Images
      • Mask
      • Shadows
      • Typography
    • Navigation
      • Breadcrumbs
      • Footer
      • Headers
      • Mega menu
      • Navbar
      • Offcanvas
      • Pagination
      • Pills
      • Scrollspy
      • Sidenav
      • Tabs
    • Components
      • Accordion
      • Alerts
      • Avatar
      • Badges
      • Button group
      • Buttons
      • Cards
      • Carousel
      • Chips
      • Collapse
      • Dropdown
      • Gallery
      • Jumbotron
      • Lightbox
      • Link
      • List group
      • Modal
      • Notifications
      • Paragraphs
      • Placeholders
      • Popconfirm
      • Popover
      • Progress
      • Rating
      • Scroll back to top button
      • Social buttons
      • Spinners
      • Stepper
      • Testimonials
      • Timeline
      • Toast
      • Tooltip
      • Video
      • Video carousel
    • Forms
      • Checkbox
      • Datepicker
      • Datetimepicker
      • File input
      • Form templates
      • Input Group
      • Inputs
      • Login form
      • Radio
      • Range
      • Registration form
      • Search
      • Select
      • Switch
      • Textarea
      • Timepicker
      • Validation
    • Data
      • Charts
      • Charts advanced
      • Datatables
      • Tables
    • Methods
      • Clipboard
      • Infinite scroll
      • Lazy loading
      • Loading management
      • Ripple
      • Scrollbar
      • Smooth scroll
      • Sticky
      • Touch
    • Design Blocks
      • Banners
      • Contact
      • Content
      • CTA
      • FAQ
      • Features
      • Headers
      • Hero / Intro sections
      • Logo clouds
      • Mega menu
      • News
      • Newsletter
      • Pricing
      • Projects
      • Stats
      • Team
      • Testimonials
    • Coming Soon
      • Angular
      • Builder
      • Templates
      • Vue
    • ResourcesNew
      • Playground
      • YouTube Channel
      • Private FB Group
      • Newsletter
      • UI Design course New
      • UI / UX tips
    • Overview
    • API

    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 Tailwind Elements ES format then you should pass the required components to the initTE method.

    Basic example

    Use horizontally aligned timeline component to show a series of data in a chronological order.

    • 1 step1
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    • 2 step2
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    • 3 step3
      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    • HTML
    • javascript
            
                
          <ul
            data-te-stepper-init
            class="relative m-0 flex list-none justify-between overflow-hidden p-0 transition-[height] duration-200 ease-in-out">
            <!--First item-->
            <li
              data-te-stepper-step-ref
              data-te-stepper-step-active
              class="w-[4.5rem] flex-auto">
              <div
                data-te-stepper-head-ref
                class="flex cursor-pointer items-center pl-2 leading-[1.3rem] no-underline after:ml-2 after:h-px after:w-full after:flex-1 after:bg-[#e0e0e0] after:content-[''] hover:bg-[#f9f9f9] focus:outline-none dark:after:bg-neutral-600 dark:hover:bg-[#3b3b3b]">
                <span
                  data-te-stepper-head-icon-ref
                  class="my-6 mr-2 flex h-[1.938rem] w-[1.938rem] items-center justify-center rounded-full bg-[#ebedef] text-sm font-medium text-[#40464f]">
                  1
                </span>
                <span
                  data-te-stepper-head-text-ref
                  class="font-medium text-neutral-500 after:flex after:text-[0.8rem] after:content-[data-content] dark:text-neutral-300">
                  step1
                </span>
              </div>
              <div
                data-te-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>
    
            <!--Second item-->
            <li data-te-stepper-step-ref class="w-[4.5rem] flex-auto">
              <div
                data-te-stepper-head-ref
                class="flex cursor-pointer items-center leading-[1.3rem] no-underline before:mr-2 before:h-px before:w-full before:flex-1 before:bg-[#e0e0e0] before:content-[''] after:ml-2 after:h-px after:w-full after:flex-1 after:bg-[#e0e0e0] after:content-[''] hover:bg-[#f9f9f9] focus:outline-none dark:before:bg-neutral-600 dark:after:bg-neutral-600 dark:hover:bg-[#3b3b3b]">
                <span
                  data-te-stepper-head-icon-ref
                  class="my-6 mr-2 flex h-[1.938rem] w-[1.938rem] items-center justify-center rounded-full bg-[#ebedef] text-sm font-medium text-[#40464f]">
                  2
                </span>
                <span
                  data-te-stepper-head-text-ref
                  class="text-neutral-500 after:flex after:text-[0.8rem] after:content-[data-content] dark:text-neutral-300">
                  step2
                </span>
              </div>
              <div
                data-te-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>
    
            <!--Third item-->
            <li data-te-stepper-step-ref class="w-[4.5rem] flex-auto">
              <div
                data-te-stepper-head-ref
                class="flex cursor-pointer items-center pr-2 leading-[1.3rem] no-underline before:mr-2 before:h-px before:w-full before:flex-1 before:bg-[#e0e0e0] before:content-[''] hover:bg-[#f9f9f9] focus:outline-none dark:before:bg-neutral-600 dark:after:bg-neutral-600 dark:hover:bg-[#3b3b3b]">
                <span
                  data-te-stepper-head-icon-ref
                  class="my-6 mr-2 flex h-[1.938rem] w-[1.938rem] items-center justify-center rounded-full bg-[#ebedef] text-sm font-medium text-[#40464f]">
                  3
                </span>
                <span
                  data-te-stepper-head-text-ref
                  class="text-neutral-500 after:flex after:text-[0.8rem] after:content-[data-content] dark:text-neutral-300">
                  step3
                </span>
              </div>
              <div
                data-te-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,
            initTE,
          } from "tw-elements";
          
          initTE({ Stepper });
          
            
        

    Hey there 👋 we want to make Tailwind Elements a community-driven project. It's open source and free, and we would like it to stay that way. If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!

    Share via Dev.to Share via Twitter Share via Facebook Share via Pinterest Share via Reddit Share via StumbleUpon Share via Vkontakte Share via Weibo Share via HackerNews Share via Gmail Share via Email

    Vertical stepper

    Use timeline component to show a series of data entries with a date, title, and description with a vertical line with dots on the left or right side of the wrapper element.

    • 1 step1
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    • 2 step2
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    • 3 step3
      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    • HTML
    • javascript
            
                
          <ul
            class="relative m-0 w-full list-none overflow-hidden p-0 transition-[height] duration-200 ease-in-out"
            data-te-stepper-init
            data-te-stepper-type="vertical">
            <!--First item-->
            <li
              data-te-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-[#e0e0e0] after:content-[''] dark:after:bg-neutral-600">
              <div
                data-te-stepper-head-ref
                class="flex cursor-pointer items-center p-6 leading-[1.3rem] no-underline after:bg-[#e0e0e0] after:content-[''] hover:bg-[#f9f9f9] focus:outline-none dark:after:bg-neutral-600 dark:hover:bg-[#3b3b3b]">
                <span
                  data-te-stepper-head-icon-ref
                  class="mr-3 flex h-[1.938rem] w-[1.938rem] items-center justify-center rounded-full bg-[#ebedef] text-sm font-medium text-[#40464f]">
                  1
                </span>
                <span
                  data-te-stepper-head-text-ref
                  class="text-neutral-500 after:absolute after:flex after:text-[0.8rem] after:content-[data-content] dark:text-neutral-300">
                  step1
                </span>
              </div>
              <div
                data-te-stepper-content-ref
                class="transition-[height, margin-bottom, padding-top, padding-bottom] left-0 overflow-hidden pb-6 pl-[3.75rem] pr-6 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>
    
            <!--Second item-->
            <li
              data-te-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-[#e0e0e0] after:content-[''] dark:after:bg-neutral-600">
              <div
                data-te-stepper-head-ref
                class="flex cursor-pointer items-center p-6 leading-[1.3rem] no-underline after:bg-[#e0e0e0] after:content-[''] hover:bg-[#f9f9f9] focus:outline-none dark:after:bg-neutral-600 dark:hover:bg-[#3b3b3b]">
                <span
                  data-te-stepper-head-icon-ref
                  class="mr-3 flex h-[1.938rem] w-[1.938rem] items-center justify-center rounded-full bg-[#ebedef] text-sm font-medium text-[#40464f]">
                  2
                </span>
                <span
                  data-te-stepper-head-text-ref
                  class="text-neutral-500 after:absolute after:flex after:text-[0.8rem] after:content-[data-content] dark:text-neutral-300">
                  step2
                </span>
              </div>
              <div
                data-te-stepper-content-ref
                class="transition-[height, margin-bottom, padding-top, padding-bottom] left-0 overflow-hidden pb-6 pl-[3.75rem] pr-6 duration-300 ease-in-out">
                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
                nisi ut aliquip ex ea commodo consequat.
              </div>
            </li>
    
            <!--Third item-->
            <li data-te-stepper-step-ref class="relative h-fit">
              <div
                data-te-stepper-head-ref
                class="flex cursor-pointer items-center p-6 leading-[1.3rem] no-underline after:bg-[#e0e0e0] after:content-[''] hover:bg-[#f9f9f9] focus:outline-none dark:after:bg-neutral-600 dark:hover:bg-[#3b3b3b]">
                <span
                  data-te-stepper-head-icon-ref
                  class="mr-3 flex h-[1.938rem] w-[1.938rem] items-center justify-center rounded-full bg-[#ebedef] text-sm font-medium text-[#40464f]">
                  3
                </span>
                <span
                  data-te-stepper-head-text-ref
                  class="text-neutral-500 after:absolute after:flex after:text-[0.8rem] after:content-[data-content] dark:text-neutral-300">
                  step3
                </span>
              </div>
              <div
                data-te-stepper-content-ref
                class="transition-[height, margin-bottom, padding-top, padding-bottom] left-0 overflow-hidden pb-6 pl-[3.75rem] pr-6 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,
            initTE,
          } from "tw-elements";
          
          initTE({ Stepper });
          
            
        

    Related resources

    Tutorials:

    hover state focus active and others dark mode utility first buttons ripple effect lists cards sizing

    Extended Docs:

    animations colors dividers hover effects typography pagination scrollspy accordion buttons collapse dropdown list group progress timeline registration form columns dark theme display flex flexbox icons overflow position spacing visibility hidden z index

    Design System (Figma):

    introduction content should be the star less is more power of visual hierarchy de emphasize with no mercy size matters label overload lowering contrast beyond borders let it breathe user experience do not start with the roof project personality design system plan the process principles tips and tricks
    • Basic example
    • Vertical stepper
    • Related resources

    Stepper - API


    Import

    Importing components depends on how your application works. If you intend to use the Tailwind Elements ES format, you must first import the component and then initialize it with the initTE method. If you are going to use the UMD format, just import the tw-elements package.

    • javascript
    • umd
            
                
            import { Stepper, initTE } from "tw-elements";
            initTE({ Stepper });
            
            
        
            
                
            import "tw-elements";
            
            
        

    Usage

    Via data attributes

    Elements with the data-te-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 the initTE method.

    • HTML
            
                
            <ul
              data-te-stepper-init
              id="stepper"
              class="relative m-0 flex w-3/4 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 the getInstance static method of the Stepper class - it allows making use of all the public methods listed in the Methods section.

    • javascript
    • umd
            
                
                  const stepper = new Stepper(document.getElementById('stepper'));
            
            
        
            
                
                  const stepper = new te.Stepper(document.getElementById('stepper'));
            
            
        

    Options

    Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-te-, as in data-te-stepper-type="vertical".

    Name Type Default Description
    stepperType string 'horizontal' Set stepper view.
    stepperLinear boolean false Set to true to use the linear stepper.
    stepperNoEditable boolean false Set to true to block editing of the completed step.

    Methods

    Method Description Example
    changeStep Switch to the step given as the parameter. Stepper.changeStep()
    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)
    nextStep Switch to the next step. stepper.nextStep()
    previousStep Switch to the previous step. stepper.previousStep()
    • javascript
    • umd
            
                
                const myStepperEl = document.getElementById('stepper');
                const stepper = new Stepper(myStepperEl);
                stepper.nextStep();          
              
            
        
            
                
                const myStepperEl = document.getElementById('stepper');
                const stepper = new te.Stepper(myStepperEl);
                stepper.nextStep();          
              
            
        

    Events

    Event type Description
    onChangeStep.te.stepper Event emitted before the step change.
    onValid.te.stepper Event emitted after successful step validation.
    onInvalid.te.stepper Event emitted after unsuccessful step validation.
    • JavaScript
            
                
                      const stepOne = document.querySelectorAll('[data-te-stepper-step-ref]')[0];
                      stepOne.addEventListener('onChangeStep.mdb.stepper', () => {
                        // do something...
                      }); 
                    
            
        
    • Import
    • Usage
    • Options
    • Methods
    • Events
    Get useful tips & free resources directly to your inbox along with exclusive subscriber-only content.
    Join our mailing list now
    © 2023 Copyright: MDBootstrap.com