Multi-step form with animated progress and per-step validation
Views
266
Copies
50
Likes
50
Comments
0
Copy rate
18.8%
Prompt
Build a complete multi-step form component in React + Tailwind for a [flow_name]. It should handle [step_count] steps with per-step validation, a progress indicator, and back/forward navigation.
Requirements:
- react-hook-form + zod for validation
- Progress bar animates between steps (not just a static indicator)
- Each step validates on Next; failed validation focuses the first invalid field
- Browser back button warns about losing progress
- Full keyboard support (Enter submits, shift+tab works cleanly)
- Theme-aware via CSS variables
- Fully responsive
- Success state after submission
Make it feel like a premium product onboarding, not a government form.Customise this prompt
Fill in 2 variables to personalise this prompt
Preview
Build a complete multi-step form component in React + Tailwind for a [flow_name]. It should handle [step_count] steps with per-step validation, a progress indicator, and back/forward navigation.
Requirements:
- react-hook-form + zod for validation
- Progress bar animates between steps (not just a static indicator)
- Each step validates on Next; failed validation focuses the first invalid field
- Browser back button warns about losing progress
- Full keyboard support (Enter submits, shift+tab works cleanly)
- Theme-aware via CSS variables
- Fully responsive
- Success state after submission
Make it feel like a premium product onboarding, not a government form.
Example output
UI Preview
This content is user-generated and runs in a sandboxed environment.