Skip to main content
Dynamically disable components

Let's explore how you can disable a field based on the response to another field

Updated over a week ago

It can sometimes be useful to enable/disable a field based on the response to another field. For example, we may want to enable a text area when a user ticks a checkbox. This can be achieved using the powerful logic functionality built into Team Forms. You can use the steps outlined below to achieve this:

  1. Drag and drop a checkbox into your form then drag and drop a text area into your form

  2. Open the settings for the component you wish to enable/disable dynamically. Under the display tab check the "disabled" option to have this disabled by default

  3. Next go to the logic tab click the "+ Add logic" button under advanced logic. Here we will add some logic to dynamically enable the component under some condition.

  4. Give the logic rule a name and then set the trigger type to "simple". Next set up the condition so that the logic is only triggered when the checkbox has the value true as shown in the screenshot below.
    ​
    Note that if you want to enable a component based on some more complex conditions you can also use the "JavaScript" trigger type instead of "Simple".
    ​


    ​

  5. Next click the "+ Add action" button. This will create the action which will trigger any time the trigger condition created earlier is met.

  6. Give the action a name and set the "Type" to "Property". This will reveal a drop-down menu to select which setting to update.

  7. Select the "Disabled" property to update and then set the state to false as show in the image below:
    ​

  8. Finally hit "Save action" and "Save Logic"

Here is an example of the final output come
​

Did this answer your question?