visibility_conditions#

The visibility_conditions object is used to dynamically show or hide a property based on the value of one or more other properties in the same Flex Component. This enables smart, context-aware UI behaviors in the Page Builder admin interface.

This feature is defined at the property level and evaluated at runtime during component editing.

`visibility_conditions` Definition#

Add the visibility_conditions object directly inside a property definition:

[
  {
    "code": "enable_custom_heading",
    "prompt": "Enable Custom Heading",
    "type": "checkbox"
  },
  {
    "code": "custom_heading",
    "prompt": "Heading Text",
    "type": "text",
    "visibility_conditions": {
      "enable_custom_heading": true
    }
  }
]

The above example will only show the custom_heading field if the checkbox enable_custom_heading is checked (true).

Supported Structure#

Each key in the object corresponds to another property’s code, and each value represents the exact value it must equal for the property to be shown.

Best Practices#

Use with checkbox, select, or radio properties to toggle dependent fields.
Only define one expected value per condition key.
All conditions must be met for the property to be shown (AND logic).
Do not attempt to use comparison operators or complex logic — only exact matches are supported.

Complete Example#

[
  {
    "code": "enable_custom_heading",
    "prompt": "Enable Custom Heading",
    "type": "checkbox"
  },
  {
    "code": "custom_heading",
    "prompt": "Heading Text",
    "type": "text",
    "visibility_conditions": {
      "enable_custom_heading": true
    }
  },
  {
    "code": "layout_mode",
    "prompt": "Layout",
    "type": "select",
    "options": [
      { "text": "Basic", "value": "basic" },
      { "text": "Advanced", "value": "advanced" }
    ]
  },
  {
    "code": "column_gap",
    "prompt": "Column Gap",
    "type": "slider",
    "visibility_conditions": {
      "layout_mode": "advanced"
    }
  }
]

visibility_conditions#