Form Wizard
Multi-step form with progress indicators, step panels, and navigation actions.
Basic Form Wizard
Preview
Account
2
Profile
3
Review
Profile Information
Fill in your personal details
Step 2 of 3
<div class="form-wizard" style="border: 1px solid var(--color-base-300);">
<div class="form-wizard-steps">
<div style="position: absolute; top: calc(1.5rem + 18px); left: calc(2rem + 18px); right: calc(2rem + 18px); height: 2px; background: var(--color-base-300); z-index: 0;"></div>
<div class="form-wizard-step form-wizard-step-completed">
<div class="form-wizard-step-indicator">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg>
</div>
<div class="form-wizard-step-label">Account</div>
</div>
<div class="form-wizard-step form-wizard-step-active">
<div class="form-wizard-step-indicator">2</div>
<div class="form-wizard-step-label">Profile</div>
</div>
<div class="form-wizard-step">
<div class="form-wizard-step-indicator">3</div>
<div class="form-wizard-step-label">Review</div>
</div>
</div>
<div class="form-wizard-content">
<div class="form-wizard-panel form-wizard-panel-active">
<div class="form-wizard-panel-title">Profile Information</div>
<div class="form-wizard-panel-subtitle">Fill in your personal details</div>
<div style="display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem;">
<input class="input" type="text" placeholder="Full name" />
<input class="input" type="email" placeholder="Email address" />
</div>
</div>
</div>
<div class="form-wizard-actions">
<div class="form-wizard-actions-start">
<button class="btn">Back</button>
</div>
<div class="form-wizard-progress-text">Step 2 of 3</div>
<div class="form-wizard-actions-end">
<button class="btn color-primary">Continue</button>
</div>
</div>
</div>Requires: ux.min.css
<div class="flex flex-col w-full bg-base-100 rounded-box border border-base-300">
<!-- Steps header -->
<div class="flex items-start justify-between relative px-8 py-6 bg-base-200 border-b border-base-300 rounded-t-box">
<div style="position: absolute; top: calc(1.5rem + 18px); left: calc(2rem + 18px); right: calc(2rem + 18px); height: 2px; background: var(--color-base-300); z-index: 0;"></div>
<div class="flex flex-col items-center relative z-2 flex-1">
<div class="flex items-center justify-center w-9 h-9 rounded-full bg-success text-success-content text-sm font-semibold">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg>
</div>
<div class="text-sm font-medium text-center mt-2 text-success">Account</div>
</div>
<div class="flex flex-col items-center relative z-2 flex-1">
<div class="flex items-center justify-center w-9 h-9 rounded-full bg-primary text-primary-content text-sm font-semibold shadow-[0_2px_8px_color-mix(in_oklch,var(--color-primary)_35%,transparent)]">2</div>
<div class="text-sm font-semibold text-center mt-2 text-primary">Profile</div>
</div>
<div class="flex flex-col items-center relative z-2 flex-1">
<div class="flex items-center justify-center w-9 h-9 rounded-full bg-base-100 border-2 border-base-300 text-sm font-semibold text-base-content/60">3</div>
<div class="text-sm font-medium text-center mt-2 text-base-content/60">Review</div>
</div>
</div>
<!-- Content -->
<div class="flex-1 p-8 min-h-50">
<div class="text-xl font-semibold text-base-content mb-1">Profile Information</div>
<div class="text-sm text-base-content/60 mb-6">Fill in your personal details</div>
<div class="flex flex-col gap-4">
<input class="input" type="text" placeholder="Full name" />
<input class="input" type="email" placeholder="Email address" />
</div>
</div>
<!-- Actions -->
<div class="flex justify-between items-center gap-4 px-8 py-4 border-t border-base-300 bg-base-200 rounded-b-box">
<div class="flex gap-2"><button class="btn">Back</button></div>
<div class="text-sm text-base-content/60 mx-auto">Step 2 of 3</div>
<div class="flex gap-2"><button class="btn color-primary">Continue</button></div>
</div>
</div>Requires: tw.min.css
// Step navigation:
// 1. Toggle form-wizard-step-completed/active classes
// 2. Toggle form-wizard-panel-active on content panels
// 3. Update progress text
const steps = document.querySelectorAll('.form-wizard-step');
const panels = document.querySelectorAll('.form-wizard-panel');
function goToStep(index) {
steps.forEach((step, i) => {
step.classList.toggle('form-wizard-step-active', i === index);
step.classList.toggle('form-wizard-step-completed', i < index);
});
panels.forEach((panel, i) => {
panel.classList.toggle('form-wizard-panel-active', i === index);
});
}Step States
Preview
Completed
2
Active
!
Error
4
Disabled
Step indicators show completed, active, error, and disabled states
<div class="form-wizard" style="border: 1px solid var(--color-base-300);">
<div class="form-wizard-steps">
<div style="position: absolute; top: calc(1.5rem + 18px); left: calc(2rem + 18px); right: calc(2rem + 18px); height: 2px; background: var(--color-base-300); z-index: 0;"></div>
<div class="form-wizard-step form-wizard-step-completed">
<div class="form-wizard-step-indicator">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg>
</div>
<div class="form-wizard-step-label">Completed</div>
</div>
<div class="form-wizard-step form-wizard-step-active">
<div class="form-wizard-step-indicator">2</div>
<div class="form-wizard-step-label">Active</div>
</div>
<div class="form-wizard-step form-wizard-step-error">
<div class="form-wizard-step-indicator">!</div>
<div class="form-wizard-step-label">Error</div>
</div>
<div class="form-wizard-step form-wizard-step-disabled">
<div class="form-wizard-step-indicator">4</div>
<div class="form-wizard-step-label">Disabled</div>
</div>
</div>
<div class="form-wizard-content" style="min-height: 80px; display: flex; align-items: center; justify-content: center;">
<p class="text-base-content/60">Step indicators show completed, active, error, and disabled states</p>
</div>
</div>Requires: ux.min.css
<div class="flex flex-col w-full bg-base-100 rounded-box border border-base-300">
<div class="flex items-start justify-between relative px-8 py-6 bg-base-200 border-b border-base-300 rounded-t-box">
<div style="position: absolute; top: calc(1.5rem + 18px); left: calc(2rem + 18px); right: calc(2rem + 18px); height: 2px; background: var(--color-base-300); z-index: 0;"></div>
<!-- Completed -->
<div class="flex flex-col items-center relative z-2 flex-1 cursor-pointer">
<div class="flex items-center justify-center w-9 h-9 rounded-full bg-success text-success-content text-sm font-semibold">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg>
</div>
<div class="text-sm font-medium text-center mt-2 text-success">Completed</div>
</div>
<!-- Active -->
<div class="flex flex-col items-center relative z-2 flex-1 cursor-pointer">
<div class="flex items-center justify-center w-9 h-9 rounded-full bg-primary text-primary-content text-sm font-semibold shadow-[0_2px_8px_color-mix(in_oklch,var(--color-primary)_35%,transparent)]">2</div>
<div class="text-sm font-semibold text-center mt-2 text-primary">Active</div>
</div>
<!-- Error -->
<div class="flex flex-col items-center relative z-2 flex-1 cursor-pointer">
<div class="flex items-center justify-center w-9 h-9 rounded-full bg-error text-error-content text-sm font-semibold">!</div>
<div class="text-sm font-medium text-center mt-2 text-error">Error</div>
</div>
<!-- Disabled -->
<div class="flex flex-col items-center relative z-2 flex-1 cursor-not-allowed pointer-events-none opacity-50">
<div class="flex items-center justify-center w-9 h-9 rounded-full bg-base-100 border-2 border-base-300 text-sm font-semibold text-base-content/60">4</div>
<div class="text-sm font-medium text-center mt-2 text-base-content/60">Disabled</div>
</div>
</div>
<div class="flex-1 p-8 min-h-20 flex items-center justify-center">
<p class="text-base-content/60">Step indicators show completed, active, error, and disabled states</p>
</div>
</div>Requires: tw.min.css
// No JavaScript required for visual states — add classes to control stateGlass Variant
Preview
Done
2
Current
3
Next
Glass wizard on gradient background
<div class="p-6 rounded-box" style="background: linear-gradient(135deg, var(--color-primary), var(--color-info));">
<div class="form-wizard glass">
<div class="form-wizard-steps">
<div class="form-wizard-step form-wizard-step-completed">
<div class="form-wizard-step-indicator">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg>
</div>
<div class="form-wizard-step-label" style="color: white;">Done</div>
</div>
<div class="form-wizard-step form-wizard-step-active">
<div class="form-wizard-step-indicator">2</div>
<div class="form-wizard-step-label" style="color: white;">Current</div>
</div>
<div class="form-wizard-step">
<div class="form-wizard-step-indicator">3</div>
<div class="form-wizard-step-label" style="color: rgba(255,255,255,0.7);">Next</div>
</div>
</div>
<div class="form-wizard-content" style="min-height: 80px; color: white; display: flex; align-items: center; justify-content: center;">
Glass wizard on gradient background
</div>
<div class="form-wizard-actions">
<button class="btn" style="color: white;">Back</button>
<button class="btn color-primary">Next</button>
</div>
</div>
</div>Requires: ux.min.css
<div class="p-6 rounded-box" style="background: linear-gradient(135deg, var(--color-primary), var(--color-info));">
<div class="flex flex-col w-full glass rounded-box">
<div class="flex items-start justify-between relative px-8 py-6 border-b" style="border-color: rgba(255,255,255,0.18);">
<div class="flex flex-col items-center relative z-2 flex-1">
<div class="flex items-center justify-center w-9 h-9 rounded-full bg-success text-success-content text-sm font-semibold">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg>
</div>
<div class="text-sm font-medium text-center mt-2 text-white">Done</div>
</div>
<div class="flex flex-col items-center relative z-2 flex-1">
<div class="flex items-center justify-center w-9 h-9 rounded-full bg-primary text-primary-content text-sm font-semibold shadow-[0_2px_8px_color-mix(in_oklch,var(--color-primary)_35%,transparent)]">2</div>
<div class="text-sm font-semibold text-center mt-2 text-white">Current</div>
</div>
<div class="flex flex-col items-center relative z-2 flex-1">
<div class="flex items-center justify-center w-9 h-9 rounded-full bg-base-100 border-2 border-base-300 text-sm font-semibold text-base-content/60">3</div>
<div class="text-sm font-medium text-center mt-2 text-white/70">Next</div>
</div>
</div>
<div class="flex-1 p-8 min-h-20 flex items-center justify-center text-white">
Glass wizard on gradient background
</div>
<div class="flex justify-between items-center gap-4 px-8 py-4 border-t" style="border-color: rgba(255,255,255,0.18);">
<button class="btn" style="color: white;">Back</button>
<button class="btn color-primary">Next</button>
</div>
</div>
</div>Requires: tw.min.css
// No JavaScript required