AI Prompt to Build a React Multi-Step Form Wizard With Validation

0 views Updated Oct 13, 2026

This is an AI prompt for building a React multi-step form wizard: a form split across several steps with a progress indicator, per-step validation, and state that survives moving back and forth between steps. It's built for frontend developers and product teams putting together onboarding flows, checkout processes, signup forms, or any multi-screen data entry flow where dumping everything on one page would overwhelm the user.

The prompt asks the model to define a step configuration structure, a shared form state object, and validation rules that run before a user can advance to the next step — rather than only validating on final submit. It also covers state persistence across steps (so going back doesn't wipe out what was already entered) and a clear way to show progress, since those two details are where most hand-rolled wizards break down.

If you already have a design mockup for the wizard's layout and just need the matching React structure, Site to Prompt can turn a rendered page or screenshot into a build-ready prompt you can merge with the template below.

Prompt template

prompt-template

467 tokens

ROLE: You are a senior frontend engineer who specializes in React form architecture. CONTEXT: - Framework: [REACT VERSION, e.g. React 18 with hooks] - Styling approach: [CSS MODULES / TAILWIND / STYLED-COMPONENTS] - Form library preference: [NONE - PLAIN STATE / REACT HOOK FORM / FORMIK] - Steps needed: [LIST EACH STEP AND ITS FIELDS, e.g. Step 1: Account (email, password). Step 2: Profile (name, company). Step 3: Preferences (plan, notifications)] - Validation rules: [LIST RULES PER FIELD, e.g. email must be valid format, password min 8 characters] TASK: Build a multi-step form wizard component with the following requirements: 1. A shared state object holding data from all steps, so navigating back and forth never loses entered values 2. Per-step validation that blocks the "Next" button until the current step's required fields are valid, with inline error messages 3. A progress indicator showing the current step out of the total number of steps 4. Back and Next navigation, with Back always enabled (except on step 1) and Next disabled until validation passes 5. A final review step before submission showing a summary of all entered data, with the ability to jump back to any step to edit it 6. A loading/submitting state on final submit that disables the submit button to prevent double submission 7. Clear separation between step configuration (data) and the rendering logic, so adding or removing a step does not require rewriting the component CONSTRAINTS: - [SPECIFY ACCESSIBILITY REQUIREMENTS, e.g. keyboard navigable, ARIA labels on progress indicator] - [SPECIFY WHETHER STATE SHOULD PERSIST ACROSS PAGE REFRESH, e.g. using localStorage or session state] - [SPECIFY IF STEPS ARE CONDITIONAL, e.g. step 3 only appears if plan = enterprise] OUTPUT FORMAT: Provide the complete component code, broken into logical files or sections (step config, main wizard component, individual step components, validation logic). Add brief comments explaining the state flow between steps. After the code, list any assumptions made about fields or behavior that were not specified above.

Want it sharper? Optimize this prompt with Prompt Optimizer, check it with the Prompt Debugger or shorten it with the Token Optimizer.

Example input

example-input

266 tokens

ROLE: You are a senior frontend engineer who specializes in React form architecture. CONTEXT: - Framework: React 18 with hooks - Styling approach: Tailwind CSS - Form library preference: none, plain React state - Steps needed: Step 1: Account (email, password, confirm password). Step 2: Business Info (company name, industry, team size). Step 3: Plan Selection (plan tier, billing cycle) - Validation rules: email must match a valid email pattern, password minimum 8 characters with at least one number, confirm password must match password, company name required, team size must be a positive number TASK: Build a multi-step form wizard component with shared state across steps, per-step validation blocking Next until valid, a progress indicator, Back/Next navigation, a final review step with edit links back to each step, a submitting state that disables the button during submission, and configuration-driven steps. CONSTRAINTS: - Must be keyboard navigable with ARIA labels on the progress indicator - Persist form state in sessionStorage so a refresh does not lose progress - No conditional steps needed OUTPUT FORMAT: Complete component code split into step config, main wizard component, step components, and validation logic, with brief comments on state flow. List assumptions after the code.

When to use it

Building a signup or onboarding flow that collects account, profile, and preference data across separate screens
Building an e-commerce checkout with shipping, payment, and review steps
Replacing a single giant form that users are abandoning partway through
Prototyping a survey or intake form where later steps depend on earlier answers

Best practices

Validate each step before allowing the "Next" button to advance, not only at final submit
Keep all step data in one shared state object so going back and forth never loses entries
Show a visible progress indicator (step count or progress bar) so users know how much is left
Run the finished prompt through Prompt Debugger first to catch missing edge cases, like what happens if a user refreshes mid-wizard

Common mistakes

Only validating on final submit, so users reach step 5 before learning step 1 had an error
Resetting form state when a user clicks back, forcing them to re-enter everything
Hardcoding step order instead of defining steps as data, which makes reordering or conditional steps painful later
Skipping a loading or submitting state on the final step, letting users double-submit by clicking twice

FAQs

How do I keep form data from being lost when a user clicks back in a multi-step form?

Store all step data in one shared state object at the wizard's top level instead of inside each step component, and update that single object as the user moves between steps. Optionally persist it to sessionStorage or localStorage so it also survives an accidental page refresh.

Should I validate each step or only validate when the user submits the whole form?

Validate each step before allowing the user to advance to the next one. Waiting until final submit means a user can fill out five steps only to discover an error on step one, which is a common reason multi-step forms get abandoned.

Can ChatGPT or Claude generate the full multi-step wizard in one response?

Both can generate a complete working wizard in one response if the prompt specifies the steps, fields, and validation rules clearly enough, though for a form with many steps or complex conditional logic you may need a follow-up prompt to fill in individual step components the model summarized or abbreviated.

What's the best way to show progress in a multi-step form?

A simple "Step X of Y" label with an ARIA progressbar role works for accessibility and is easy to implement; a visual progress bar or numbered step indicator on top of that improves the experience for sighted users but isn't required for the wizard to function correctly.

Which Cuelara tool can help me strengthen this prompt before using it?

Prompt Debugger — it scans a prompt like this one for missed edge cases, such as what happens on page refresh or double-submission, before you run it against a model. Site to Prompt — if you already have a design mockup of the wizard, it converts the rendered layout into a prompt you can combine with the template above.

Found this prompt useful? Share it.

More in React Prompt Recipes

React Prompt Recipes

AI Prompt to Generate a React Component From a Figma File Using MCP

This prompt is for front end developers who want to turn a Figma design into working React code by connecting an AI model to Figma's MCP ser…

Role: You are a front-end developer with access to a Figma MCP connection.

Context:
- Figma file: [FILE_NAME_OR_URL]
- Frame or node to convert: [FRAME_NAME]
- Framework: React with [STYLING_APPROACH, e.g. Tailwind CSS]
- Component name: [COMPONENT_NAME]

Task:
1. Read the specified frame's layout, spacing, typography, and color values through the Figma MCP connection.
2. Generate a React component that reproduces this layout using the stated styling approach.
3. Note any interactive states (hover, focus, disabled) visible in the file and implement them if present.

Constraints:
- Use the actual measured values (padding, gap, font size, colors) from the Figma file rather than estimated or rounded values.
- Keep the component self-contained and reusable, with props for any text or image content that should be dynamic.
- Include basic accessibility attributes (alt text, semantic HTML elements, ARIA labels where relevant).
- Flag anything in the design that can't be cleanly translated to code (e.g. a custom font not available in the project).

Output format:
- Component code in a fenced code block
- Brief notes on any values that couldn't be read directly from Figma and were estimated
- List of interactive states implemented, or "None found in this frame"

React Prompt Recipes

ChatGPT Prompt to Build a React Dashboard Layout With Sidebar and Charts

This React dashboard layout prompt helps developers get a working admin or analytics dashboard scaffold out of ChatGPT, Claude, or Gemini in…

Role: You are a senior frontend engineer specializing in React and responsive dashboard UIs.

Context:
- Framework: [REACT VERSION, e.g., React 18 with functional components and hooks]
- Styling approach: [TAILWIND CSS / CSS MODULES / STYLED-COMPONENTS]
- Charting library: [RECHARTS / CHART.JS / NIVO]
- Dashboard purpose: [e.g., SaaS analytics dashboard showing revenue, active users, and churn]

Task:
Build a dashboard layout with the following structure:
1. A collapsible sidebar with navigation links: [LIST OF NAV ITEMS]
2. A top bar with [e.g., page title, search input, user avatar menu]
3. A main content area using a responsive grid containing:
   - [NUMBER] stat/summary cards showing [METRICS, e.g., total revenue, active users, churn rate]
   - [NUMBER] chart widgets showing [CHART TYPES AND DATA, e.g., a line chart of revenue over time, a bar chart of signups by month]

Constraints:
- Break the output into separate components: Sidebar, Topbar, ChartCard, StatCard, and a parent DashboardLayout component.
- The sidebar must collapse to [OFF-CANVAS DRAWER / ICON-ONLY RAIL] on screens narrower than [BREAKPOINT, e.g., 768px].
- Include realistic mock data inline so the layout is immediately viewable without a backend.
- Use semantic HTML where applicable (nav, main, aside, header).

Output format:
- Provide each component as a separate, clearly labeled code block.
- List any npm packages that need to be installed before the code will run.
- End with a short note on what to replace with real API data.

React Prompt Recipes

AI Prompt to Build a React Authentication Flow With Protected Routes

This AI prompt for a React authentication flow generates the pieces a typical app needs to gate pages behind a login: a login form, an auth…

ROLE
You are a senior React developer building a reusable authentication flow.

CONTEXT
Framework: [REACT_VERSION, e.g. React 18]
Routing library: [ROUTING_LIBRARY_AND_VERSION, e.g. React Router v6]
Backend auth endpoints: [LOGIN_ENDPOINT], [LOGOUT_ENDPOINT], [SESSION_CHECK_ENDPOINT]
Token storage method: [TOKEN_STORAGE_METHOD, e.g. httpOnly cookie set by the server]
Styling approach: [STYLING_APPROACH, e.g. Tailwind CSS]

TASK
Generate the following, using functional components and hooks:
1. An AuthContext and AuthProvider that exposes the current user, a loading flag, and login/logout functions.
2. A login form component that calls the login function and displays validation and API errors.
3. A ProtectedRoute component that redirects unauthenticated users to [LOGIN_ROUTE_PATH], preserving the originally requested URL for post-login redirect.
4. On initial app load, verify any existing session before rendering protected routes, showing a loading indicator during the check.

CONSTRAINTS
- Do not render protected page content until the session check has completed.
- Handle network and 401 errors from the auth endpoints gracefully, with user-facing messages.
- Keep components small and composable; do not put API calls directly inside UI components.

OUTPUT FORMAT
Provide each file separately with a filename comment at the top, followed by a 2-3 sentence summary of how the pieces connect together.