Multi-step form in a drawer. Stepper in the header tracks progress; body swaps content per step; footer pins Back / Next, with a primary finish on the last step. The canonical onboarding-inside-an-app shape.
When to use
Any 3–5 step flow where each step has its own set of decisions and the user benefits
from seeing progress: invite flow, integration setup, first-run onboarding, payment
collection, multi-stage approvals. For 6+ steps, consider a dedicated page.
Three-step create wizard
Stepper header, step body, Back/Next footer. The interactive buttons below advance the stepper and switch the body panel.
Create workspace
Workspace details
Invite team members
Review and create
Name
Acme Team
Slug
/acme-team
Members
2 invited
Plan
Free (14-day Pro trial)
Anatomy
<drawer-ui side="right" size="lg">
<!-- stepper in header tracks progress -->
<header slot="header">
<col-ui gap="2" grow>
<text-ui weight="semibold">Create workspace</text-ui>
<stepper-ui step="0">
<stepper-item-ui text="Details"></stepper-item-ui>
<stepper-item-ui text="Members"></stepper-item-ui>
<stepper-item-ui text="Review"></stepper-item-ui>
</stepper-ui>
</col-ui>
</header>
<!-- one panel per step, toggled via hidden attr -->
<section slot="body">
<div data-wizard-step="0"> ...details... </div>
<div data-wizard-step="1" hidden> ...members... </div>
<div data-wizard-step="2" hidden> ...review... </div>
</section>
<!-- Back on the leading edge, Cancel/Next on the trailing edge -->
<footer slot="footer">
<span slot="action-leading">
<button-ui text="Back" variant="ghost"></button-ui>
</span>
<span slot="action">
<button-ui text="Cancel" variant="ghost"></button-ui>
<button-ui text="Next" variant="primary"></button-ui>
</span>
</footer>
</drawer-ui>
Rules
Stepper is in the header, not the body. The user always sees progress even when the body scrolls.
Use stepper-ui.step (numeric) as the source of truth. Toggle hidden on [data-wizard-step="N"] to swap panels.
The primary action label changes on the last step: "Next" → "Create" / "Finish". Back button is disabled on step 0.
Every step validates independently before advancing. Advance triggers .next() on the stepper AND unhides the next panel.
If steps can be revisited, make stepper-item-ui clickable and wire to .goTo(i). Otherwise keep it display-only.
Consider using the state-machine controller on the drawer for more complex flows (branching, validation states, resumable wizards).