ArcanFlows - The Visual Builder for Production-Grade AI Flows

Overview

Conditional logic allows you to create dynamic forms that respond to user input. Show or hide fields, skip pages, or change validation rules based on answers.

Basic Conditions

Show/Hide Fields

Show a field only when a condition is met:

json
{
  "type": "text",
  "name": "otherReason",
  "label": "Please specify",
  "conditions": {
    "show": {
      "field": "reason",
      "operator": "equals",
      "value": "other"
    }
  }
}

Result:

"Other reason" field only appears when user selects "Other" in the reason dropdown

Available Operators

Operator	Description	Example
`equals`	Exact match	`value === "yes"`
`notEquals`	Not equal	`value !== "no"`
`contains`	Contains substring	`"hello world".includes("hello")`
`notContains`	Doesn't contain
`startsWith`	Starts with
`endsWith`	Ends with
`isEmpty`	Field is empty
`isNotEmpty`	Field has value
`greaterThan`	Number comparison	`value > 100`
`lessThan`	Number comparison	`value < 50`
`greaterOrEqual`	Number comparison	`value >= 18`
`lessOrEqual`	Number comparison	`value <= 100`
`between`	Range check	`value >= 10 && value <= 20`
`in`	In list of values	`["a", "b"].includes(value)`
`notIn`	Not in list
`matches`	Regex match

Multiple Conditions

AND Logic

All conditions must be true:

json
{
  "conditions": {
    "show": {
      "logic": "and",
      "rules": [
        { "field": "country", "operator": "equals", "value": "US" },
        { "field": "age", "operator": "greaterOrEqual", "value": 18 }
      ]
    }
  }
}

OR Logic

Any condition can be true:

json
{
  "conditions": {
    "show": {
      "logic": "or",
      "rules": [
        { "field": "plan", "operator": "equals", "value": "pro" },
        { "field": "plan", "operator": "equals", "value": "enterprise" }
      ]
    }
  }
}

Nested Logic

Combine AND and OR:

json
{
  "conditions": {
    "show": {
      "logic": "and",
      "rules": [
        { "field": "isEmployee", "operator": "equals", "value": true },
        {
          "logic": "or",
          "rules": [
            { "field": "department", "operator": "equals", "value": "engineering" },
            { "field": "department", "operator": "equals", "value": "product" }
          ]
        }
      ]
    }
  }
}

Conditional Actions

Show/Hide

json
{
  "conditions": {
    "show": { "field": "subscribe", "operator": "equals", "value": true }
  }
}

Enable/Disable

json
{
  "conditions": {
    "enable": { "field": "agreeTerms", "operator": "equals", "value": true }
  }
}

Required/Optional

json
{
  "conditions": {
    "require": { "field": "hasCompany", "operator": "equals", "value": true }
  }
}

Set Value

json
{
  "conditions": {
    "setValue": {
      "when": { "field": "country", "operator": "equals", "value": "US" },
      "value": "+1"
    }
  }
}

Change Options

Dynamically change dropdown options:

json
{
  "type": "dropdown",
  "name": "state",
  "label": "State/Province",
  "conditions": {
    "setOptions": [
      {
        "when": { "field": "country", "operator": "equals", "value": "US" },
        "options": [
          { "value": "CA", "label": "California" },
          { "value": "NY", "label": "New York" }
        ]
      },
      {
        "when": { "field": "country", "operator": "equals", "value": "CA" },
        "options": [
          { "value": "ON", "label": "Ontario" },
          { "value": "BC", "label": "British Columbia" }
        ]
      }
    ]
  }
}

Page/Section Conditions

Show/Hide Sections

json
{
  "type": "section",
  "title": "Business Information",
  "conditions": {
    "show": { "field": "accountType", "operator": "equals", "value": "business" }
  },
  "fields": ["companyName", "taxId", "industry"]
}

Skip Pages

In multi-step forms:

json
{
  "pages": [
    {
      "title": "Account Type",
      "fields": ["accountType"]
    },
    {
      "title": "Personal Info",
      "fields": ["name", "email"],
      "conditions": {
        "show": { "field": "accountType", "operator": "equals", "value": "personal" }
      }
    },
    {
      "title": "Business Info",
      "fields": ["companyName", "taxId"],
      "conditions": {
        "show": { "field": "accountType", "operator": "equals", "value": "business" }
      }
    },
    {
      "title": "Review",
      "fields": ["summary"]
    }
  ]
}

Field References

Referencing Other Fields

Use field names in conditions:

json
{
  "conditions": {
    "show": {
      "field": "wantNewsletter",
      "operator": "equals",
      "value": true
    }
  }
}

Referencing Array Fields

For checkbox groups or multi-select:

json
{
  "conditions": {
    "show": {
      "field": "interests",
      "operator": "contains",
      "value": "technology"
    }
  }
}

Referencing Nested Fields

For complex field structures:

json
{
  "conditions": {
    "show": {
      "field": "address.country",
      "operator": "equals",
      "value": "US"
    }
  }
}

Real-World Examples

Dynamic Product Form

json
{
  "fields": [
    {
      "type": "dropdown",
      "name": "productType",
      "label": "Product Type",
      "options": [
        { "value": "physical", "label": "Physical Product" },
        { "value": "digital", "label": "Digital Product" },
        { "value": "service", "label": "Service" }
      ]
    },
    {
      "type": "text",
      "name": "weight",
      "label": "Weight (kg)",
      "conditions": {
        "show": { "field": "productType", "operator": "equals", "value": "physical" }
      }
    },
    {
      "type": "text",
      "name": "downloadUrl",
      "label": "Download URL",
      "conditions": {
        "show": { "field": "productType", "operator": "equals", "value": "digital" }
      }
    },
    {
      "type": "number",
      "name": "duration",
      "label": "Service Duration (hours)",
      "conditions": {
        "show": { "field": "productType", "operator": "equals", "value": "service" }
      }
    }
  ]
}

Conditional Pricing

json
{
  "fields": [
    {
      "type": "dropdown",
      "name": "plan",
      "label": "Select Plan",
      "options": [
        { "value": "basic", "label": "Basic - $9/mo" },
        { "value": "pro", "label": "Pro - $29/mo" },
        { "value": "enterprise", "label": "Enterprise - Custom" }
      ]
    },
    {
      "type": "number",
      "name": "seats",
      "label": "Number of Seats",
      "conditions": {
        "show": { "field": "plan", "operator": "in", "value": ["pro", "enterprise"] }
      }
    },
    {
      "type": "textarea",
      "name": "requirements",
      "label": "Special Requirements",
      "conditions": {
        "show": { "field": "plan", "operator": "equals", "value": "enterprise" },
        "require": { "field": "plan", "operator": "equals", "value": "enterprise" }
      }
    }
  ]
}

Age-Based Content

json
{
  "fields": [
    {
      "type": "number",
      "name": "age",
      "label": "Your Age",
      "min": 1,
      "max": 120
    },
    {
      "type": "section",
      "title": "Parental Consent",
      "conditions": {
        "show": { "field": "age", "operator": "lessThan", "value": 18 }
      },
      "fields": ["parentName", "parentEmail", "parentConsent"]
    },
    {
      "type": "checkbox",
      "name": "alcoholPreference",
      "label": "Include alcohol options",
      "conditions": {
        "show": { "field": "age", "operator": "greaterOrEqual", "value": 21 }
      }
    }
  ]
}

UI Configuration

Show/Hide Animation

json
{
  "conditionalLogic": {
    "animation": "fade",
    "duration": 200
  }
}

Animation	Description
`none`	Instant show/hide
`fade`	Fade in/out
`slide`	Slide down/up
`expand`	Expand/collapse

Best Practices

Keep it simple - Avoid overly complex conditions
Test thoroughly - Check all condition paths
Clear labels - Make it obvious why fields appear
Logical flow - Conditions should make sense to users
Mobile testing - Ensure conditions work on all devices
Default states - Set sensible defaults for conditional fields