Component form fields support conditional logic that you set on the Decision Tree tab. Use conditions to show or hide fields, enable or disable fields, or set or clear field values. You can reference other fields in the same form by their machine name as part of these conditions.

Accessing the Decision Tree tab¶

1. Add a field to the component form.
2. Double-click the field to edit its settings.
3. Scroll to the Visibility & Conditions section.
4. Enable the Enable Decision Tree (EXPERIMENTAL) toggle.
5. Select the Decision Tree tab.

Decision Tree capabilities¶

• Show or hide fields based on conditions.
• Enable or disable fields.
• Set or clear field values.
• Combine multiple conditions and actions to create advanced logic.
• Enable dynamic, responsive forms that react to user input without custom code.

Conditional field logic example¶

Show the product field only when the category equals products. Show the fruit field and set its value to Orange when the category equals fruits.

Combine rules using: Any condition can be true (OR)

Rule 1:
If condition: [field.category] is equal to 'products'
Then:
 Show   [field.product]
 Enable [field.product]

Rule 2:
If condition: [field.category] is equal to 'fruits'
Then:
 Show     [field.fruit]
 Set Value [field.fruit] Orange
 Enable   [field.fruit]

Writing conditions¶

• Use field machine names in square brackets: [field.name]
• Supported operators:
  • is equal to, is not equal to.
  • For strings, use contains, has, includes.
  • For numbers, use is gt, is lt, is gte, is lte.
  • ForJavaScript-style, use >=, <=, >, <, ==, !=.
  • For WYSIWYG fields, use text includes.
• Boolean shorthand:
  • For true, use [field.toggle].
  • For false, use ![field.toggle].
• Combine conditions with AND or OR. These operators are not case sensitive.
• Use parentheses ( ) to group conditions for advanced logic.

Available actions¶

Examples¶

• Show a field when a toggle is ON

  copy

  If condition: [field.toggle] is equal to true
  Then: Show [field.input]

• Disable a field when a toggle is ON

  copy

  If condition: [field.toggle] is equal to true
  Then: Disable [field.input]

• Set a select field to 'usa' when a toggle is ON

  copy

  If condition: [field.toggle] is equal to true
  Then: Set Value [field.country] usa

• Show a field if age is 18 or older

  copy

  If condition: [field.age] >= 18
  Then: Show [field.age_restricted_field]

• Show a field if country is USA

  copy

  If condition: [field.country] == "usa"
  Then: Show [field.country_specific_field]

Complex conditions and advanced examples¶

Decision Trees support advanced logic by combining multiple conditions and actions. Use the following approaches for complex conditions:

Combining conditions with AND or OR¶

Combine multiple conditions in a single rule using AND or OR.

Example: Show a field only if both conditions are true (AND).

If condition: [field.age] >= 18 AND [field.country] == 'usa'
Then:
  Show [field.license_number]
  Enable [field.license_number]

Example: Show a field if either condition is true (OR).

If condition: [field.status] == 'student' OR [field.status] == 'teacher'
Then:
 Show [field.school_id]

Multiple rules with different actions¶

Use multiple rules to manage different scenarios for the same field.

Example:

Combine rules using: Any condition can be true (OR)

Rule 1:
If condition: [field.role] == 'admin'
Then:
 Show [field.admin_code]
 Enable [field.admin_code]

Rule 2:
If condition: [field.role] == 'guest'
Then:
 Hide [field.admin_code]
 Disable [field.admin_code]

Nested and grouped logic¶

Example: Show a field if the user is an adult in the USA or Canada.

If condition: [field.age] >= 18 AND ([field.country] == 'usa' OR [field.country] == 'canada')
Then:
 Show [field.license_number]

Using NOT for negation¶

Invert a condition with NOT.

Example: Hide a field if a toggle is OFF.

If condition: NOT [field.newsletter_opt_in]
Then:
 Hide [field.email]

Special field types in complex logic¶

Use advanced conditions with specialized fields.

• Color picker: Show a color warning based on the selected color.

  copy

  If condition: [field.color] tags include 'Primary' OR [field.color] hex is '#ff0000'
  Then:
   Show [field.color_warning]

• Icon picker: Set or clear values based on the selected icon’s font family.

  copy

  If condition: [field.icon-picker] fontFamily is 'icomoon'
  Then:
   Show [field.color_warning]
   Set Value [field.font-family] 'icomoon'
   Disable [field.color_warning]
  If condition: NOT ([field.icon-picker] fontFamily is 'icomoon')
  Then:
   Clear Value [field.font-family]
   Enable [field.color_warning]

Best practices¶

• Write conditions that are short and easy to understand.
• Use clear and descriptive names for fields.
• Group conditions with parentheses if required.
• Test all rules to verify correct behavior.
• Set each rule to target its own field.
• Add multiple actions to a rule if required.
• Review rules regularly to keep them updated.

Troubleshooting¶

• If a rule does not work:
  • Check spelling and format for field names and conditions.
  • Ensure that all values match exactly, including upper and lower case.
• If unexpected behavior occurs:
  • Review the order of rules and the use of AND or OR.
  • Make sure rules do not conflict or change the same field in different ways.
  • Set each rule to modify only its own field.