Conditional Logic

Create dynamic forms that show or hide fields based on user input and conditions.

Overview

Conditional logic allows you to control field visibility dynamically. Fields can be shown or hidden based on the values of other fields in your form.

Key Features

• Show/hide fields based on other field values
• Support for multiple conditions with AND/OR logic
• 15+ condition operators for different data types
• Real-time field visibility updates
• Clean, type-safe API

Condition Operators

FormMorf supports different operators for different field types.

Boolean Operators

For checkbox and switch fields:

• is_checked - Field is checked/enabled
• is_not_checked - Field is unchecked/disabled

Comparison Operators

For text, email, select, and other string-based fields:

• equals - Exact match
• not_equals - Does not match
• contains - Includes substring
• not_contains - Does not include substring
• starts_with - Begins with string
• ends_with - Ends with string
• is_empty - Field is empty
• is_not_empty - Field has value

Numeric Operators

For number, range, and rating fields:

• greater_than - Value is greater
• less_than - Value is less
• greater_than_or_equal - Value is ≥
• less_than_or_equal - Value is ≤

Array Operators

For checkbox groups and multi-select fields:

• includes - Array includes value
• not_includes - Array does not include value

Basic Example

Show a field only when a checkbox is checked:

tsx

const schema: FormSchema = {
  id: 'newsletter-signup',
  title: 'Newsletter Signup',
  fields: [
    {
      id: '1',
      type: 'email',
      name: 'email',
      label: 'Email Address',
      required: true
    },
    {
      id: '2',
      type: 'checkbox',
      name: 'subscribe',
      label: 'Subscribe to weekly newsletter'
    },
    {
      id: '3',
      type: 'select',
      name: 'frequency',
      label: 'Email Frequency',
      options: [
        { label: 'Daily', value: 'daily' },
        { label: 'Weekly', value: 'weekly' },
        { label: 'Monthly', value: 'monthly' }
      ],
      // Show this field only when subscribe checkbox is checked
      conditions: {
        show: [
          {
            fieldId: '2',
            operator: 'is_checked'
          }
        ]
      }
    }
  ]
};

Multiple Conditions with AND Logic

Show a field only when all conditions are met:

tsx

{
  id: '4',
  type: 'textarea',
  name: 'feedback',
  label: 'Additional Feedback',
  // Show only when:
  // - User is subscribed AND
  // - Selected daily frequency
  conditions: {
    show: [
      {
        fieldId: '2',
        operator: 'is_checked'
      },
      {
        fieldId: '3',
        operator: 'equals',
        value: 'daily'
      }
    ],
    logic: 'and'  // Default behavior
  }
}

Multiple Conditions with OR Logic

Show a field when any condition is met:

tsx

{
  id: '5',
  type: 'text',
  name: 'promotionCode',
  label: 'Promotion Code',
  // Show when EITHER:
  // - User selected daily frequency OR
  // - User selected weekly frequency
  conditions: {
    show: [
      {
        fieldId: '3',
        operator: 'equals',
        value: 'daily'
      },
      {
        fieldId: '3',
        operator: 'equals',
        value: 'weekly'
      }
    ],
    logic: 'or'
  }
}

Numeric Conditions

Show fields based on numeric values:

tsx

const schema: FormSchema = {
  id: 'product-order',
  title: 'Product Order',
  fields: [
    {
      id: '1',
      type: 'number',
      name: 'quantity',
      label: 'Quantity',
      min: 1,
      max: 100,
      required: true
    },
    {
      id: '2',
      type: 'text',
      name: 'bulkDiscount',
      label: 'Bulk Order Discount Code',
      helpText: 'Available for orders of 10 or more',
      // Show only when quantity >= 10
      conditions: {
        show: [
          {
            fieldId: '1',
            operator: 'greater_than_or_equal',
            value: 10
          }
        ]
      }
    },
    {
      id: '3',
      type: 'rating',
      name: 'rating',
      label: 'Rate Your Experience',
      maxRating: 5
    },
    {
      id: '4',
      type: 'textarea',
      name: 'improvementSuggestions',
      label: 'How Can We Improve?',
      // Show only when rating < 4
      conditions: {
        show: [
          {
            fieldId: '3',
            operator: 'less_than',
            value: 4
          }
        ]
      }
    }
  ]
};

Text-Based Conditions

Use string comparison operators for text fields:

tsx

{
  id: '1',
  type: 'select',
  name: 'country',
  label: 'Country',
  options: [
    { label: 'United States', value: 'US' },
    { label: 'Canada', value: 'CA' },
    { label: 'United Kingdom', value: 'UK' }
  ]
},
{
  id: '2',
  type: 'text',
  name: 'state',
  label: 'State',
  // Show only for US
  conditions: {
    show: [
      {
        fieldId: '1',
        operator: 'equals',
        value: 'US'
      }
    ]
  }
},
{
  id: '3',
  type: 'text',
  name: 'province',
  label: 'Province',
  // Show only for Canada
  conditions: {
    show: [
      {
        fieldId: '1',
        operator: 'equals',
        value: 'CA'
      }
    ]
  }
}

Hide vs Show Conditions

You can use either show or hide conditions:

tsx

// Using 'show' - field visible when condition is true
{
  id: '1',
  type: 'text',
  name: 'companyName',
  label: 'Company Name',
  conditions: {
    show: [
      {
        fieldId: 'accountType',
        operator: 'equals',
        value: 'business'
      }
    ]
  }
}

// Using 'hide' - field hidden when condition is true
{
  id: '2',
  type: 'text',
  name: 'personalBio',
  label: 'Personal Bio',
  conditions: {
    hide: [
      {
        fieldId: 'accountType',
        operator: 'equals',
        value: 'business'
      }
    ]
  }
}

Complex Example

A registration form with multiple conditional fields:

tsx

const schema: FormSchema = {
  id: 'event-registration',
  title: 'Event Registration',
  fields: [
    {
      id: '1',
      type: 'select',
      name: 'attendeeType',
      label: 'I am attending as',
      required: true,
      options: [
        { label: 'Individual', value: 'individual' },
        { label: 'Company Representative', value: 'company' },
        { label: 'Student', value: 'student' }
      ]
    },
    {
      id: '2',
      type: 'text',
      name: 'companyName',
      label: 'Company Name',
      required: true,
      conditions: {
        show: [
          { fieldId: '1', operator: 'equals', value: 'company' }
        ]
      }
    },
    {
      id: '3',
      type: 'text',
      name: 'university',
      label: 'University Name',
      required: true,
      conditions: {
        show: [
          { fieldId: '1', operator: 'equals', value: 'student' }
        ]
      }
    },
    {
      id: '4',
      type: 'file',
      name: 'studentId',
      label: 'Student ID Card',
      accept: 'image/*,.pdf',
      helpText: 'Upload your student ID for verification',
      conditions: {
        show: [
          { fieldId: '1', operator: 'equals', value: 'student' }
        ]
      }
    },
    {
      id: '5',
      type: 'checkbox',
      name: 'bringGuest',
      label: 'I will bring a guest (+1)'
    },
    {
      id: '6',
      type: 'text',
      name: 'guestName',
      label: 'Guest Name',
      required: true,
      conditions: {
        show: [
          { fieldId: '5', operator: 'is_checked' }
        ]
      }
    },
    {
      id: '7',
      type: 'email',
      name: 'guestEmail',
      label: 'Guest Email',
      required: true,
      conditions: {
        show: [
          { fieldId: '5', operator: 'is_checked' }
        ]
      }
    }
  ]
};

💡 Best Practices

• Keep conditions simple and easy to understand
• Avoid circular dependencies (Field A depends on B, B depends on A)
• Use meaningful field IDs that make conditions readable
• Test all condition paths thoroughly
• Consider using hide instead of show when it makes logic clearer
• Document complex conditional logic in code comments