Auto-fill onChange

Automatically populate related fields when a selection changes. This example shows province-to-region mapping, dynamic subcategories, and auto-calculated VAT.

Key Features

1
setFieldValue
Update any field's value from onChange
2
setFieldOptions
Dynamically update select options based on selections
3
Cascading Selects
Category → Subcategory with filtered options
4
Auto Calculations
Price → VAT → Total auto-computed on input

Product Registration with Auto-fill

Select a province to auto-fill region, or enter a price to see VAT calculated

CONFIG

const config: WizardConfig = {
  id: 'product-registration',
  steps: [{
    id: 'location',
    title: 'Location',
    fieldGroups: [{
      id: 'address',
      fields: [
        {
          id: 'province',
          name: 'province',
          label: 'Province',
          type: 'select',
          options: [
            { label: 'Milano (MI)', value: 'MI' },
            { label: 'Roma (RM)', value: 'RM' },
            // ...more options
          ],
          // Auto-fill region when province changes
          // Return an object with field values to update
          onChange: (value) => {
            const regionMap = { MI: 'Lombardia', RM: 'Lazio' };
            const region = regionMap[value];
            return region ? { region } : undefined;
          },
        },
        {
          id: 'region',
          name: 'region',
          label: 'Region',
          type: 'text',
          // Read-only, auto-filled from province
        },
      ],
    }],
  }],
};

PREVIEW

Location

Street Address*

City*

Province*

Region*

Postal Code*

How It Works

The onChange handler receives:

value - The new value of the field
setFieldValue(name, value) - Set another field's value
setFieldOptions(name, options) - Update a select's options

This enables cascading selects, auto-calculations, and dependent field updates.

Cross-field Validation Step Callbacks