Multi-Step Form Wizard

v0v0formwizardmulti-step

v0 prompt for a multi-step form wizard with validation, file upload, and review step.

Prompt
Create a multi-step form wizard with:

## Progress Indicator
- Horizontal step indicator at top: Step 1 → Step 2 → Step 3 → Step 4
- Current step highlighted, completed steps with checkmark
- Step labels: "Account", "Profile", "Preferences", "Review"
- Clickable completed steps to go back

## Step 1 — Account
- Email input with real-time validation
- Password input with strength indicator (weak/fair/strong)
- Confirm password with match validation
- Show/hide password toggle

## Step 2 — Profile
- First name, Last name
- Avatar upload with preview (drag and drop or click)
- Bio textarea with character count (max 200)
- Timezone selector

## Step 3 — Preferences
- Toggle switches: Email notifications, Dark mode, Public profile
- Select dropdown: Language preference
- Radio group: Plan selection (Free, Pro, Enterprise) with feature comparison

## Step 4 — Review
- Summary of all entered information
- Edit buttons to jump back to specific sections
- Terms of service checkbox
- "Create Account" submit button

Use shadcn/ui components. Add smooth slide transitions between steps. Form state persists when navigating between steps. Show validation errors inline.

What you get when you save this prompt

Your workspace unlocks powerful tools to iterate and improve.

AI OPTIMIZE

AI Optimization

One-click improvement with structure analysis and pattern suggestions.

VERSION DIFF

Version History

Track every edit. Compare versions side-by-side with word-level diffs.

ORGANIZE
Development
Code Review
Testing
Marketing

Folders & Tags

Organize your library with nested folders, tags, and drag-and-drop.

MCP
$ npm i -g @promptingbox/mcp
Claude · Cursor · ChatGPT

Use Everywhere

Access prompts from Claude, Cursor, ChatGPT & more via MCP integration.

Your prompts, organized

Save, version, and access your best prompts across ChatGPT, Claude, Cursor, and more.