## 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

Admin Member Viewer

#### 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).