better-formbetter-form

Conditional Steps

This example demonstrates how to show or hide entire wizard steps based on user selections. When the user selects "Business Account", an additional step appears to collect company information.

Key Features

  • 1
    showIf Condition

    The "Business Information" step uses showIf to conditionally appear

  • 2
    Dynamic Step Count

    Progress indicator updates automatically based on visible steps

  • 3
    Radio Selection

    Uses radio buttons with descriptions for clear user choice

  • 4
    Validation Flow

    Required fields are only validated when their step is visible

User Registration with Conditional Business Step

Select 'Business Account' to see the additional company information step

CONFIG
const config: WizardConfig = {
  id: 'user-registration',
  title: 'User Registration',
  steps: [
    {
      id: 'user-type',
      title: 'Account Type',
      fieldGroups: [{
        id: 'type-selection',
        fields: [{
          id: 'userType',
          name: 'userType',
          label: 'What type of account?',
          type: 'radio',
          required: true,
          options: [
            { label: 'Personal', value: 'personal' },
            { label: 'Business', value: 'business' },
          ],
        }],
      }],
    },
    {
      id: 'personal-info',
      title: 'Personal Information',
      fieldGroups: [/* ... */],
    },
    {
      id: 'business-info',
      title: 'Business Information',
      // Conditional step - only shows for business accounts
      showIf: {
        field: 'userType',
        operator: 'equals',
        value: 'business',
      },
      fieldGroups: [{
        id: 'company-details',
        fields: [
          { id: 'companyName', name: 'companyName', label: 'Company', type: 'text' },
          { id: 'vatNumber', name: 'vatNumber', label: 'VAT', type: 'text' },
        ],
      }],
    },
    {
      id: 'confirmation',
      title: 'Confirmation',
      fieldGroups: [/* ... */],
    },
  ],
};
PREVIEW

Account Type

How It Works

The showIf property on a step accepts a condition object with three parts:

  • field - The field ID to check
  • operator - The comparison operator (equals, notEquals, contains, etc.)
  • value - The value to compare against

You can also use hideIf for the inverse logic, or combine multiple conditions with and / or arrays.

Back to Examples