Skip to main content

Introducing Schema API - Revolutionize Your React Form Wizards

· 2 min read
Parsa Jiravand

Schema API Banner

🎯 Introducing Schema API - The Future of React Form Wizards

React Form Wizard v1.0.0 introduces the Schema API - a powerful new way to define form wizards using configuration objects instead of JSX components.

🚀 What is Schema API?​

Schema API lets you define your entire wizard with a configuration object instead of nested JSX. Benefits:

  • 🎯 Declarative - Define logic in plain JavaScript objects
  • 🔄 Dynamic steps - Show/hide steps based on form data
  • 📊 Data-driven - Centralized form state
  • 🔧 Type-safe - Full TypeScript support

📋 Schema API vs Children API​

Traditional Children API (Still Supported)​

<FormWizard title="Registration" onComplete={handleComplete}>
  <FormWizard.TabContent title="Personal Info" icon="ti-user">
    <PersonalInfoForm />
  </FormWizard.TabContent>
  <FormWizard.TabContent title="Payment" icon="ti-credit-card" isValid={paymentValid}>
    <PaymentForm />
  </FormWizard.TabContent>
</FormWizard>

Schema API (New)​

const schema: FormWizardSchema = {
  initialData: { plan: "basic", paymentMethod: "", acceptedTerms: false },
  steps: [
    {
      id: "personal",
      title: "Personal Info",
      icon: "ti-user",
      content: <PersonalInfoForm />,
    },
    {
      id: "payment",
      title: "Payment",
      icon: "ti-credit-card",
      validate: ({ data }) => data.paymentMethod ? true : "Select payment method",
      content: <PaymentForm />,
    },
    {
      id: "premium",
      title: "Premium Features",
      condition: ({ data }) => data.plan === "premium",
      content: <PremiumFeatures />,
    },
  ],
};

<FormWizard schema={schema} data={data} onDataChange={setData} onComplete={handleComplete} />

🎯 Key Features​

  • Conditional steps - Show steps based on condition: ({ data }) => ...
  • Validation - Per-step validation with validate: ({ data }) => true | "error message"
  • Dynamic content - Content can be functions: content: ({ data }) => <div>...</div>

🔗 Try It Live​

Playground​

Experiment in our Playground - embed CodeSandbox examples.

Explore all v1 demos:

🚀 Getting Started​

npm install react-form-wizard-component@latest

React v19+ required!

import { FormWizard, FormWizardSchema, WizardData } from 'react-form-wizard-component';

const schema: FormWizardSchema = {
  initialData: {},
  steps: [
    { id: "step1", title: "Step 1", content: <div>Your content</div> },
  ],
};

<FormWizard schema={schema} data={data} onDataChange={setData} />

📚 Resources​

Ready to try it? Visit the Playground or Schema API demo! 🚀