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.
Important
This feature is experimental. The user interface and behavior may change in future releases.
Accessing the Decision Tree tab
Add a field to the component form.
Double-click the field to edit its settings.
Scroll to the Visibility & Conditions section.
Enable the Enable Decision Tree (EXPERIMENTAL) toggle.
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
Action
Use
Example
Show
Makes a field visible
Show [field.product]
Hide
Hides a field
Hide [field.product]
Enable
Makes a field editable
Enable [field.input]
Disable
Makes a field read-only or disabled
Disable [field.input]
Set Value
Sets a field to a specific value
Set Value [field.country] usa
Note: For this action, enter the value in the input next to the field selector.
Clear Value
Clears the value of a field
Clear Value [field.country]
Examples
Show a field when a toggle is ON
If condition: [field.toggle] is equal to true
Then: Show [field.input]
Disable a field when a toggle is ON
If condition: [field.toggle] is equal to true
Then: Disable [field.input]
Set a select field to 'usa' when a toggle is ON
If condition: [field.toggle] is equal to true
Then: Set Value [field.country] usa
Show a field if age is 18 or older
If condition: [field.age] >= 18
Then: Show [field.age_restricted_field]
Show a field if country is USA
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.
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.
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.
Did not find what you were looking for?
If this content did not answer your questions, try searching or contacting our support team for further assistance.
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.
Important
This feature is experimental. The user interface and behavior may change in future releases.
Accessing the Decision Tree tab
Add a field to the component form.
Double-click the field to edit its settings.
Scroll to the Visibility & Conditions section.
Enable the Enable Decision Tree (EXPERIMENTAL) toggle.
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
Action
Use
Example
Show
Makes a field visible
Show [field.product]
Hide
Hides a field
Hide [field.product]
Enable
Makes a field editable
Enable [field.input]
Disable
Makes a field read-only or disabled
Disable [field.input]
Set Value
Sets a field to a specific value
Set Value [field.country] usa
Note: For this action, enter the value in the input next to the field selector.
Clear Value
Clears the value of a field
Clear Value [field.country]
Examples
Show a field when a toggle is ON
If condition: [field.toggle] is equal to true
Then: Show [field.input]
Disable a field when a toggle is ON
If condition: [field.toggle] is equal to true
Then: Disable [field.input]
Set a select field to 'usa' when a toggle is ON
If condition: [field.toggle] is equal to true
Then: Set Value [field.country] usa
Show a field if age is 18 or older
If condition: [field.age] >= 18
Then: Show [field.age_restricted_field]
Show a field if country is USA
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.
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.
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.
Did not find what you were looking for?
If this content did not answer your questions, try searching or contacting our support team for further assistance.
Site Studio