It can sometimes be useful to enable or disable a component based on the response to another field in the form. For example, you may want to enable a text area only when a user ticks a checkbox.
This can be configured in much the same way as conditionally hiding or showing a component. The option is available under the Conditional tab in any component’s settings and supports both simple and advanced conditional logic for enabling or disabling components.
Simple conditional
To dynamically enable or disable a component using a simple conditional rule, open the settings for the component you want to control and navigate to the Conditional tab. Here, you will see options for both hiding/showing and enabling/disabling components.
Select Enable/Disable, then configure the rule using the following fields:
This component should: enable or disable
When the form component: select another component from the dropdown
Has value: enter the value that should trigger the rule
Using this pattern of state → condition → value, you can define when a component should be enabled or disabled.
For example, to enable a text area only when a checkbox is selected:
This component should enable
When the form component Checkbox A
Has value true
Simple conditionals are limited to a single condition. If you need to enable or disable a component based on multiple conditions, you will need to use advanced conditionals, which allow for more complex logic.
Advanced conditional
Advanced conditional logic can be used to enable or disable components based on multiple conditions or more complex logic. Unlike simple conditionals, which use a dropdown-based interface, advanced conditionals use JavaScript. This gives power users the flexibility to define custom logic for virtually any use case.
To configure an advanced conditional rule:
Open the settings for the component you want to enable or disable.
Navigate to the Conditional tab.
Under the Enable/Disable section, open Advanced conditions to launch the code editor.
Define the logic that controls the component’s state.
The easiest way to get started is to click Let AI do the coding and describe the behaviour you want in plain language. Alternatively, you can manually write a JavaScript expression that sets the disabled variable.
You can access submitted form values using the data object. For example, data.checkboxA would reference the value of a component with the key checkboxA.
For more examples of advanced expressions, refer to the Code examples article.
