Conditionals

The conditionals property in our schemas allows you to configure highly dynamic forms to both improve user experience and also consolidate more possibilities into one workflow or tool. At its core, conditionals are an array of if/then statements that listen to the input provided by a user on a Field Input and can potentially update the properties of another Field Input or Group.

Note:

The conditionals property is an array because order does matter. If multiple conditions are met that update a certain field, the last one will get applied.
Some input or group properties cannot be updated! These include: id, title, help_text, and fields (for groups)
“If” statements are configured to accommodate one level of OR’s and one level of AND’s within each OR. This will make more sense in the following examples.

Table Of Contents

Comparators
eq
contains
Examples
Basic Example
Multiple Conditionals Example
AND Example
OR Example

Comparators

A comparator is applied to a field’s value when it changes to determine if a condition is met or not. We currently support two comparators: eq and contains

eq

The eq comparator will satisfy a condition if the supplied value matches the user’s input. For strings, numbers, and booleans, this is easy to imagine, but requires extra explanation for array and object inputs:

For Multi-select Inputs (an array of strings), the eq comparator will be satisfied if the supplied values in the array are the same as the user’s selected values, regardless of order.
For Range Inputs (an object of min and max) the eq comparator will be satisfied as long as both the supplied min and max values match the user’s selected min and max.

contains

The contains comparator will satisfy a condition if the supplied value is contained within the user’s input. This does not apply to number and boolean type fields.

For string type fields: the contains comparator will be satisfied if the supplied value exists as a substring of the user’s input.
For Multi-select Inputs (an array of strings), the contains comparator will be satisfied if each of the supplied values in the array exist within the user’s selection, regardless of order.
For Range Inputs (an object of min and max) the contains comparator will be satisfied as long as either a supplied min or supplied max value matches the user’s selected min or max.

Examples

Basic Example

Let’s take a look at a basic example.

In the example below we see that if the user:

Case 1: Types “myValue” into myTextInput's text box

THEN

myDropdownInput will be hidden.

"conditionals": [
  {
    "if": [
      {
        "myTextInput": {
          "eq": "myValue"
				}
      }
    ],
    "then": {
      "inputs": {
        "myDropdownInput": {
          "hidden": true
        }
      }
    }
  }
]

Multiple Conditionals Example

Let’s take a look at a basic example but contains multiple conditionals.

"conditionals": [
  {
    "if": [
      {
        "myTextInput": {
          "eq": "myValue"
				}
      }
    ],
    "then": {
      "inputs": {
        "myDropdownInput": {
          "hidden": true
        }
      }
    }
  },
  {
    "if": [
      {
        "myOtherTextInput": {
          "eq": "myOtherValue"
				}
      }
    ],
    "then": {
      "inputs": {
        "myOtherDropdownInput": {
          "hidden": true
        }
      }
    }
  }
]

AND Example

In the example below, we see that if the user:

Case 1: Types “myValue” into myTextInput's text box AND checks “myValue1” and “myValue2” in myMultiselectInput

THEN

myDropdownInput will be hidden. myDropdownInput in this case can be either a group or an input.

"conditionals": [
  {
    "if": [
      {
        "myTextInput": {
          "eq": "myValue"
				},
        "myMultiselectInput": {
          "eq": ["myValue1","myValue2"]
				}
      }
    ],
    "then": {
      "inputs": {
        "myDropdownInput": {
          "hidden": true
        }
      }
    }
  }
]

OR Example

In the example below, we see that if the user:

Case 1: Types “myValue” into myTextInput's text box AND checks only “myValue1” and “myValue2” in myMultiselectInput

Case 2: Selects a min of 50 in myRangeInput

THEN

myGroup will be hidden

"conditionals": [
  {
    "if": [
      {
        "myTextInput": {
          "eq": "myValue"
				},
        "myMultiselectInput": {
          "eq": ["myValue1","myValue2"]
				}
      },
			{
				"myRangeInput": {
					"contains": {
						"min": 50
					}
				}
			}
    ],
    "then": {
      "inputs": {
        "myGroup": {
          "hidden": true
        }
      }
    }
  }
]