visibilityRule

Basic Usage

// Show 'billing-address' only when 'different-billing' checkbox is checked
{
  "id":   "billing-address",
  "type": "text",
  "label": "Billing Address",
  "visibilityRule": "values['different-billing'] === true"
}

// Show 'vat-number' only when the 'country' is in the EU
{
  "id":   "vat-number",
  "type": "text",
  "label": "VAT Number",
  "visibilityRule": "['GB','DE','FR','NL','IT','ES'].includes(values['country'])"
}

// Show 'escalation-reason' only when 'risk-level' is 'high' or 'critical'
{
  "id":   "escalation-reason",
  "type": "textarea",
  "label": "Escalation Reason",
  "visibilityRule": "['high', 'critical'].includes(values['risk-level'])"
}

Expression Evaluation

Expressions are evaluated in a sandboxed context. The expression has access to:

• values — the current form value map (all control values keyed by control ID)
• Standard JavaScript operators: ===, !==, &&, ||, !, ?:
• Array methods: includes(), some(), every(), length
• String methods: startsWith(), endsWith(), includes()

Reactive Evaluation

The expression is re-evaluated whenever any field value in the form changes. This means visibility updates instantly as the user types or selects values — without a page reload or API call:

// As the user changes 'country':
// 1. User selects 'DE'
// 2. engine.setValue('country', 'DE')
// 3. FormStateProvider receives change event
// 4. All visibilityRules re-evaluated
// 5. 'vat-number' rule: ['GB','DE','FR','NL','IT','ES'].includes('DE') → true
// 6. 'vat-number' becomes visible
// 7. React re-renders — 'vat-number' appears

// User changes 'country' to 'US':
// 8. Same flow — ['GB','DE',...].includes('US') → false
// 9. 'vat-number' disappears

What Happens to Hidden Field Values