Free Component

Interactive Form Stepper

A sleek multi-step wizard stepper with active state rings, connecting progress fill, step labels, and animated Next/Back buttons.

dark
stepper
form
wizard
progress
navigation

The code

Plain HTML, CSS and JavaScript with no dependencies. Copy a single file, or choose "Full file" for a complete page you can save as index.html and open in a browser.

<div class="stepper-card">
  <div class="stepper-header">
    <div class="stepper-track">
      <div class="stepper-fill" id="stepFill"></div>
    </div>
    <div class="step-nodes">
      <div class="step-node is-active" data-step="1">
        <span class="step-circle"><span class="step-num">1</span></span>
        <span class="step-label">Account</span>
      </div>
      <div class="step-node" data-step="2">
        <span class="step-circle"><span class="step-num">2</span></span>
        <span class="step-label">Profile</span>
      </div>
      <div class="step-node" data-step="3">
        <span class="step-circle"><span class="step-num">3</span></span>
        <span class="step-label">Security</span>
      </div>
      <div class="step-node" data-step="4">
        <span class="step-circle"><span class="step-num">4</span></span>
        <span class="step-label">Confirm</span>
      </div>
    </div>
  </div>

  <div class="stepper-body">
    <div class="step-panel is-active" id="panel1">
      <h4>Create your account</h4>
      <p>Enter your primary work email and choose a secure password.</p>
      <input type="email" placeholder="alex@company.com" class="step-input" />
    </div>
    <div class="step-panel" id="panel2">
      <h4>Personal profile</h4>
      <p>Tell us your job title and how you plan to use the platform.</p>
      <input type="text" placeholder="Full name / Display name" class="step-input" />
    </div>
    <div class="step-panel" id="panel3">
      <h4>Security preferences</h4>
      <p>Configure two-factor authentication and alert settings.</p>
      <input type="text" placeholder="Mobile phone for SMS 2FA" class="step-input" />
    </div>
    <div class="step-panel" id="panel4">
      <h4>All set!</h4>
      <p>Review details and launch your workspace immediately.</p>
      <div class="step-summary">Ready to submit workspace setup.</div>
    </div>
  </div>

  <div class="stepper-footer">
    <button class="step-btn step-prev" id="prevBtn" disabled>Back</button>
    <button class="step-btn step-next" id="nextBtn">Continue &rarr;</button>
  </div>
</div>

The AI prompt

Paste this into an AI coding tool to generate the same component, then ask it to adapt the colours, text or framework to your project.

Works with Claude · ChatGPT · Cursor · v0 · Bolt · Gemini

Create an interactive multi-step wizard stepper using HTML, CSS and vanilla JavaScript.

Requirements:
- A modern dark card container with 20px radius and soft shadow.
- Header showing 4 circular numbered steps connected by a horizontal progress bar that fills dynamically.
- Steps transition through states: upcoming, active (purple glow), and completed (checked/solid blue).
- Body section that swaps visible panels with a subtle fade-and-slide animation.
- Footer with Back and Continue buttons; Back is disabled on step 1, Continue changes to 'Finish' on the final step.
- Clicking any previous step node allows jumping back.

Return one HTML file with <style> and <script> tags.

How to build it, step by step

1
Create the step progress header with an absolute line track and a dynamically sized fill bar.
2
Position step circles above the track with z-index and flexbox space-between.
3
Toggle is-active and is-done classes based on the current step integer.
4
Calculate the progress fill percentage: ((current - 1) / (total - 1)) * 100.
5
Display the corresponding step panel while hiding all others.

Customisation tips

Use CSS transitions on the progress fill width to make navigation feel continuous and smooth.
Add form validation on each panel before advancing to the next step in production forms.
Include keyboard Enter key listener to advance steps conveniently.