Practical Examples

Example 1 — Admin-Only Internal Fields

A customer profile form shows basic fields to all users but exposes internal admin notes only in admin mode:

// Public field — visible in all modes
{
  "id": "customer-name", "type": "text", "label": "Customer Name"
  // modeVisibilitySettings omitted → visible everywhere
}

// Admin-only field — never shown to normal users
{
  "id":   "internal-risk-flag",
  "type": "select",
  "label": "Risk Flag (Internal)",
  "options": [
    { "value": "none",   "label": "None" },
    { "value": "watch",  "label": "Watch List" },
    { "value": "blocked","label": "Blocked" }
  ],
  "modeVisibilitySettings": {
    "edit":    false,
    "view":    false,
    "design":  false,
    "admin":   true,
    "preview": false
  }
}

Example 2 — Conditional Address Block

Show a "Billing Address" block only when the user checks "Use different billing address":

// Checkbox — controls the address block
{
  "id":    "different-billing",
  "type":  "checkbox",
  "label": "Use a different billing address"
}

// Address fields — only visible when checkbox is checked
{
  "id":   "billing-street", "type": "text", "label": "Billing Street",
  "visibilityRule": "values['different-billing'] === true"
}
{
  "id":   "billing-city", "type": "text", "label": "Billing City",
  "visibilityRule": "values['different-billing'] === true"
}
{
  "id":   "billing-postcode", "type": "text", "label": "Billing Postcode",
  "visibilityRule": "values['different-billing'] === true"
}

Example 3 — View-Only Summary Panel

Show a "Submission Summary" section only in view mode — users editing the form never see it:

// Summary label — only visible when viewing submitted data
{
  "id":   "submission-summary-header",
  "type": "label",
  "label": "— Submission Summary —",
  "modeVisibilitySettings": {
    "edit":    false,
    "view":    true,
    "admin":   false,
    "design":  false,
    "preview": false
  }
}

// Submitted date — view-only calculated display
{
  "id":   "submitted-at",
  "type": "label",
  "label": "Submitted",
  "binding": { "source": "$context", "path": "submission.submittedAt", "readOnly": true },
  "modeVisibilitySettings": {
    "edit":    false,
    "view":    true,
    "admin":   true,
    "design":  false,
    "preview": false
  }
}

Example 4 — variable-inspector in Design Only

The variable-inspector control is always hidden in production modes. It should only appear in design mode for developers debugging binding paths:

{
  "id":   "debug-values",
  "type": "variable-inspector",
  "modeVisibilitySettings": {
    "edit":    false,
    "view":    false,
    "admin":   false,
    "design":  true,    // visible in Studio for developers
    "preview": false
  }
}
// This is the MANDATORY pattern for variable-inspector.
// Never deploy a form where variable-inspector is visible in edit or view mode.

Example 5 — Shipping Method Details (Conditional + Mode)

Show courier tracking fields only when "Express" is selected AND only in edit mode:

{
  "id":   "courier-tracking-id",
  "type": "text",
  "label": "Courier Tracking ID",
  "modeVisibilitySettings": {
    "view":    false,   // read-only view has its own tracking display widget
    "preview": false
  },
  "visibilityRule": "values['shipping-method'] === 'express'"
}

// In view mode:  hidden (modeVisibilitySettings blocks it)
// In edit mode, shipping = 'standard': hidden (visibilityRule)
// In edit mode, shipping = 'express':  VISIBLE