Form Wizard

Multi-step form with validation and submission

Try It

Navigate through a multi-step form. Each step can go back or cancel. The final step submits with success/error outcomes.

Form Wizard State Machine

State Diagram

Step 1 - Personal Info*

Step 2 - Address

Step 3 - Review

Submitting

Complete

Error

Cancelled

Preview

State Specification

Spec

Step 1 - Personal Info *
	next -> Step 2 - Address
	cancel -> Cancelled
Step 2 - Address
	next -> Step 3 - Review
	back -> Step 1 - Personal Info
	cancel -> Cancelled
Step 3 - Review
	submit -> Submitting
	back -> Step 2 - Address
	cancel -> Cancelled
Submitting
	success -> Complete
	error -> Error
Complete
	restart -> Step 1 - Personal Info
Error
	retry -> Submitting
	back -> Step 3 - Review
Cancelled
	restart -> Step 1 - Personal Info

Prototype Code

Prototype

[Step 1 - Personal Info]
  div.wizard style="max-width: 400px; padding: 24px;":
    div.steps style="display: flex; gap: 8px; margin-bottom: 24px;":
      span style="padding: 4px 12px; background: #000; color: #fff;": "1"
      span style="padding: 4px 12px; background: #eee;": "2"
      span style="padding: 4px 12px; background: #eee;": "3"
    h2 style="margin-bottom: 16px;": "Personal Information"
    input placeholder="First Name" style="width: 100%; padding: 8px; margin-bottom: 8px; border: 1px solid #ccc;":
    input placeholder="Last Name" style="width: 100%; padding: 8px; margin-bottom: 8px; border: 1px solid #ccc;":
    input placeholder="Email" style="width: 100%; padding: 8px; margin-bottom: 16px; border: 1px solid #ccc;":
    div.buttons style="display: flex; gap: 8px;":
      button @click=cancel style="padding: 12px 24px; border: 1px solid #ccc;": "Cancel"
      button @click=next style="padding: 12px 24px; background: #000; color: #fff; margin-left: auto;": "Next"

[Step 2 - Address]
  div.wizard style="max-width: 400px; padding: 24px;":
    div.steps style="display: flex; gap: 8px; margin-bottom: 24px;":
      span style="padding: 4px 12px; background: #22c55e; color: #fff;": "1"
      span style="padding: 4px 12px; background: #000; color: #fff;": "2"
      span style="padding: 4px 12px; background: #eee;": "3"
    h2 style="margin-bottom: 16px;": "Address"
    input placeholder="Street Address" style="width: 100%; padding: 8px; margin-bottom: 8px; border: 1px solid #ccc;":
    input placeholder="City" style="width: 100%; padding: 8px; margin-bottom: 8px; border: 1px solid #ccc;":
    div style="display: flex; gap: 8px; margin-bottom: 16px;":
      input placeholder="State" style="flex: 1; padding: 8px; border: 1px solid #ccc;":
      input placeholder="ZIP" style="flex: 1; padding: 8px; border: 1px solid #ccc;":
    div.buttons style="display: flex; gap: 8px;":
      button @click=back style="padding: 12px 24px; border: 1px solid #ccc;": "Back"
      button @click=cancel style="padding: 12px 24px; border: 1px solid #ccc;": "Cancel"
      button @click=next style="padding: 12px 24px; background: #000; color: #fff; margin-left: auto;": "Next"

[Step 3 - Review]
  div.wizard style="max-width: 400px; padding: 24px;":
    div.steps style="display: flex; gap: 8px; margin-bottom: 24px;":
      span style="padding: 4px 12px; background: #22c55e; color: #fff;": "1"
      span style="padding: 4px 12px; background: #22c55e; color: #fff;": "2"
      span style="padding: 4px 12px; background: #000; color: #fff;": "3"
    h2 style="margin-bottom: 16px;": "Review"
    div style="padding: 16px; background: #f5f5f5; margin-bottom: 16px;":
      p style="margin-bottom: 4px;": "John Doe"
      p style="margin-bottom: 4px;": "john@example.com"
      p: "123 Main St, City, ST 12345"
    div.buttons style="display: flex; gap: 8px;":
      button @click=back style="padding: 12px 24px; border: 1px solid #ccc;": "Back"
      button @click=cancel style="padding: 12px 24px; border: 1px solid #ccc;": "Cancel"
      button @click=submit style="padding: 12px 24px; background: #000; color: #fff; margin-left: auto;": "Submit"

[Submitting]
  div.wizard style="max-width: 400px; padding: 48px; text-align: center;":
    p: "Submitting..."

[Complete]
  div.wizard style="max-width: 400px; padding: 48px; text-align: center;":
    h2 style="color: #22c55e; margin-bottom: 16px;": "Complete!"
    p style="color: #666; margin-bottom: 16px;": "Your form has been submitted."
    button @click=restart style="padding: 12px 24px;": "Start Over"

[Error]
  div.wizard style="max-width: 400px; padding: 48px; text-align: center;":
    h2 style="color: #ef4444; margin-bottom: 16px;": "Submission Failed"
    p style="color: #666; margin-bottom: 16px;": "Please try again."
    div.buttons style="display: flex; gap: 8px; justify-content: center;":
      button @click=back style="padding: 12px 24px; border: 1px solid #ccc;": "Back"
      button @click=retry style="padding: 12px 24px; background: #000; color: #fff;": "Retry"

[Cancelled]
  div.wizard style="max-width: 400px; padding: 48px; text-align: center;":
    p style="color: #666; margin-bottom: 16px;": "Form cancelled."
    button @click=restart style="padding: 12px 24px;": "Start Over"

Key Concepts

Sequential steps - Step 1 → Step 2 → Step 3 → Submit
Back navigation - Each step can return to the previous
Cancel from anywhere - Every step has a cancel option
Async submission - Submitting is a separate state from Review
Error recovery - Can retry or go back from Error state
Restart capability - Complete and Cancelled can start over

Use This Template

This pattern works well for onboarding flows, checkout processes, surveys, and any multi-step data collection.

← Previous: Media Player