WizardContainer

A pre-built container component that renders the complete form wizard.

Usage

import { WizardProvider, WizardContainer, defaultFieldComponents } from '@better_form/core';
 
function MyForm() {
  return (
    <WizardProvider config={config} fieldComponents={defaultFieldComponents}>
      <WizardContainer />
    </WizardProvider>
  );
}

What It Includes

WizardContainer renders:

Step navigation (progress indicator)
Current step fields
Navigation buttons (Back/Next/Submit)
Validation errors
Loading states

Custom Layout

For custom layouts, use individual components:

import {
  WizardProvider,
  WizardNavigation,
  WizardStep,
  WizardButtons,
  useWizard,
} from '@better_form/core';
 
function CustomWizard() {
  const { state, currentStep } = useWizard();
 
  return (
    <div className="my-custom-layout">
      <aside>
        <WizardNavigation />
      </aside>
      <main>
        <WizardStep step={currentStep} />
        <WizardButtons />
      </main>
    </div>
  );
}

WizardProvider Field Components