Multi-Step Wizard Dialog

Bootstrap 6 Dialog wizard with three steps, a Stepper and progress bar, back/next buttons, per-step validation, Chips email invites and a review screen.

Also known as: multi step modal, wizard modal, step by step popup form, onboarding wizard dialog

Bootstrap 6 Modals Responsive #dialog #form #modal #stepper #wizard

Multi-Step Wizard Dialog live demo

Open in new tab

Bootstrap 6 code (HTML, CSS, JS)

Beautify

A three-step "Create a project" wizard inside a Bootstrap 6 Dialog. It combines the new Stepper, a progress bar, Back/Next buttons, per-step validation, a Chips input for team invites and a review screen. Use it for onboarding, creating projects or workspaces, or any task that is easier in small steps.

How it works

The root .mwd-root shows a project list and a "New project" button that opens <dialog class="dialog dialog-lg mwd-dialog"> through data-bs-toggle="dialog". Under the header, a slim .progress bar sits above the body. The body contains ol.stepper.stepper-horizontal and a form with three fieldset.mwd-step blocks marked data-mwd-step 1–3:

Details: a required project name, a template <select> and two radio cards (form-field-card) for visibility.
Team: a Bootstrap 6 Chips input (.chip-input with data-bs-chips) for invite emails, plus a default role.
Review: a dl.mwd-summary that the script fills from FormData, and a checkbox for sample tasks.

script.js keeps the current step index. render() shows the right fieldset, marks stepper items .active (and .mwd-complete, which shows a check mark), sets aria-current="step", updates the progress bar width and aria-valuenow, and changes the Next label to "Create project" on the last step. validate() checks [required] fields in the current step and adds .is-invalid. On the last step a simulated request adds the new project to .mwd-projects and shows .mwd-done. Closing after that resets the wizard.

Customization

--mwd-accent on .mwd-root: the emerald brand color. It also sets --bs-primary-bg, --bs-stepper-active-bg and --bs-control-checked-bg.
To add a step, add a fieldset.mwd-step and a matching li.stepper-item. total is counted automatically.
Add required to any field in a step to block Next until it is valid.
--bs-dialog-width on .mwd-dialog: the wizard width (38rem).
.mwd-stepper .stepper-item.mwd-complete::before: change the content to use a different symbol for finished steps.
Replace the setTimeout in finish() with fetch('/api/projects', …).
Remove data-mwd-autoopen so the wizard no longer opens on load (the attribute is there for the preview).

Use cases

Onboarding flows: new users complete a three-step Create a project wizard with a progress bar
Workspace setup: each step is validated before the Next button moves forward
Team invites: a chips input collects several email addresses in one field
Project creation: a final review screen summarizes the choices before confirming

Accessibility

"Step 2 of 3" is an aria-live region, and the progress bar has role="progressbar" with aria-valuenow. The current stepper item has aria-current="step". After each step change, focus moves to the first field of the new step, and to the success heading at the end. Invalid fields get aria-invalid and visible messages. Pressing Enter in a field moves to the next step. The progress animation is disabled under prefers-reduced-motion.

Bootstrap 6 notes

This is built on Bootstrap 6.0.0-alpha.1, and alpha APIs can still change. The BS5 modal becomes <dialog class="dialog dialog-lg">. Wizard steps use the new CSS-only stepper instead of custom markup. Tag inputs use the new Chips component, which needs no init code. form-check radios become .radio inside form-field-card, and form-select is form-control.

Multi-Step Wizard Dialog at a glance

Framework: Bootstrap 6
Code: HTML, CSS, JavaScript
JavaScript: Vanilla JavaScript, no jQuery
Dependencies: Bootstrap 6, Bootstrap Icons
Layout: Responsive, works on mobile
Category: Modals
License: Free for personal and commercial use

Questions about this template

Can I use the Multi-Step Wizard Dialog code for free?

Yes. You can copy or download the code and use it in personal and commercial projects, including client work. No sign-up is needed. Reselling it as part of a component library or template collection is not allowed; see the license.

How do I add it to my website?

Load Bootstrap 6 and Bootstrap Icons from a CDN (the links are under Requirements). Paste the HTML where the component should appear, add the CSS to your stylesheet and load the JavaScript before the closing </body> tag. Download HTML gives you a complete page with everything already linked.

Does it need jQuery or a JavaScript framework?

No. The script is plain vanilla JavaScript, so it works without jQuery, React or Vue. You can still use the markup inside those frameworks.

Does it work on mobile?

Yes. The layout adapts to small screens. Use the Mobile and Tablet buttons above the live demo to check it at phone and tablet width.

Requirements

Add these to your page (already included in the download):

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@6.0.0-alpha.1/dist/css/bootstrap.min.css">
<script type="module" src="https://cdn.jsdelivr.net/npm/bootstrap@6.0.0-alpha.1/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

Built for Bootstrap 6.0.0-alpha.1. Bootstrap 6 ships as an ES module, so its script and this component's JavaScript load with type="module". Alpha releases can still change before the stable version.