Conditional Logic

Conditional logic allows you to show or hide form elements based on user inputs, creating a dynamic form experience.

Simple Conditions

To set up basic conditional logic:

1. Select the component you want to conditionally display
2. Go to the API tab (Technical Properties)
3. In the Conditional section, select Simple Conditional
4. Configure the condition:
   • Show/Hide: Choose whether to show or hide the component when the condition is met
   • When: Select the field that triggers the condition
   • Operator: Choose the comparison operator (equals, not equals, greater than, etc.)
   • Value: Enter the value that triggers the condition

Example: Show an "Other Reason" text field only when "Other" is selected in a dropdown.

Multiple Conditions

For more complex scenarios, you can combine multiple conditions using custom JavaScript:

1. Select the component you want to conditionally display
2. Go to the API tab (Technical Properties)
3. In the Custom Conditional field, enter JavaScript that returns true or false
4. Use the data object to reference other form fields

Example: Show a field when Status is "Approved" AND Amount is greater than 1000:

show = (data.status === 'approved') && (data.amount > 1000);

Conditional Validation

You can also make validation rules conditional:

1. Select the component
2. Go to the Validation tab
3. In the Custom Validation field, add conditional logic
4. Return true for valid input or an error message for invalid input

Example: Make a field required only when another field has a specific value:

if(data.needsApproval === true && !input) {
  return 'This field is required when approval is needed';
}
return true;