Configuring Controls
Every control on the canvas is configured through the property panel on the right. Properties are divided into tabs — Basic, Validation, Binding, Visibility, and control-specific Advanced options. Changes apply immediately and trigger auto-save.
Common Control Properties
These properties appear for every control type, regardless of category:
| Property | Type | Description |
|---|---|---|
id | string | Unique identifier within the form. Auto-generated; can be renamed. |
label | string | Text shown above the control. Supports markdown for formatting. |
description | string | Help text shown below the control. For label controls, this IS the content. |
required | boolean | Shows required indicator and blocks submit if empty. |
disabled | boolean | Renders the control as non-interactive (greyed out). |
hidden | boolean | Hides the control in all modes. Use modeVisibilitySettings for mode-specific hiding. |
order | number | Sort order within the section. Managed by drag-and-drop; you can override numerically. |
width | full | half | third | Column span: 12 (full row), 6 (half), or 4 (third) columns. |
Validation Configuration
The Validation tab surfaces all available rules for the selected control type. Rules that don't apply to the control type are hidden.
// Example control with validation rules
{
"id": "email-address",
"type": "email",
"label": "Email Address",
"required": true,
"validation": {
"required": true,
"minLength": 5,
"maxLength": 254,
"email": true,
"message": "Please enter a valid email address"
}
}Binding Configuration
The Binding tab connects the control to your data model. Every control that stores a value needs a binding path. Controls without a binding path are UI-only (display controls like label and header do not need binding).
// Binding a text control to a JSON path
{
"id": "company-name",
"type": "text",
"label": "Company Name",
"binding": {
"source": "$json",
"path": "company.name"
}
}
// Binding to workflow context
{
"id": "workflow-id",
"type": "text",
"label": "Workflow ID",
"binding": {
"source": "$context",
"path": "workflowInstanceId"
}
}Visibility Configuration
The Visibility tab has two sections:
Mode Visibility Settings
Toggle visibility per operating mode. By default all modes are enabled. Untick a mode to hide the control when the form is rendered in that mode.
{
"modeVisibilitySettings": {
"edit": true,
"view": false,
"design": true,
"admin": true,
"preview": false
}
}Visibility Rule
An expression that evaluates to true/false based on other field values. The control is only shown when the expression is true.
// Show the "Other" field only when the select is set to "other"
{
"id": "industry-other",
"type": "text",
"label": "Other Industry",
"visibilityRule": "values['industry-type'] === 'other'"
}Advanced / Control-Specific Properties
Each control type has additional settings in the Advanced tab. Examples:
| Control Type | Advanced Properties |
|---|---|
| text | placeholder, maxLength, inputMode (text/search/tel) |
| select | options[] (static list or API endpoint), searchable, clearable |
| date | minDate, maxDate, dateFormat, locale |
| password | showStrengthMeter, showToggle, minScore |
| data-table | columns[], addable, deletable, maxRows |
| tabs | tabs[] (label + sectionId pairs), defaultTab, lazy |