TypeScript

import type {
  WizardConfig,
  WizardField,
  WizardStep,
  FieldGroup,
  FieldComponentProps,
  ValidationRule,
} from '@better_form/core';

import type { WizardConfig } from '@better_form/core';
 
const config: WizardConfig = {
  id: 'typed-form',
  steps: [
    {
      id: 'step-1',
      title: 'Step 1',
      fieldGroups: [
        {
          id: 'group-1',
          fields: [
            {
              id: 'name',
              name: 'name',
              label: 'Name',
              type: 'text', // TypeScript will validate this
              required: true,
            },
          ],
        },
      ],
    },
  ],
};

import type { FieldComponentProps } from '@better_form/core';
 
interface CustomFieldProps extends FieldComponentProps {
  // Add custom props here
}
 
export function CustomField({ field, value, onChange, error }: CustomFieldProps) {
  return (
    <div>
      <label>{field.label}</label>
      <input
        value={value as string}
        onChange={(e) => onChange(e.target.value)}
      />
      {error && <span className="error">{error}</span>}
    </div>
  );
}

import type { AddressData, GooglePlacesPluginConfig } from '@better_form/plugin-google-places';
 
const pluginConfig: GooglePlacesPluginConfig = {
  apiKey: process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY!,
  defaultCountryRestrictions: ['IT'],
  defaultLanguage: 'it',
};

interface ContactFormData {
  firstName: string;
  lastName: string;
  email: string;
  message: string;
}
 
<WizardProvider
  config={config}
  fieldComponents={defaultFieldComponents}
  onComplete={(data: ContactFormData) => {
    // data is typed
    console.log(data.firstName);
  }}
>

{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true
  }
}