Form components

This article describes components in Components Library > Form.

Formik

The Formik component is a form container that uses Formik for field state management and validation. It supports JSON-defined form fields with configurable layout, inline mode, and a read-only visualisation mode. In the App Designer, select a Formik on the canvas to configure it through three tab pages in the Settings panel: Props, Styles, and Advanced.

Props

The Props tab contains the configuration properties of the Formik form.

If a property displays the Variable Binding icon , that means it supports variable binding.

Property	UI Control	Default	Description
Inline	Toggle switch	Off	Controls whether form fields are rendered side by side (inline) or stacked vertically.
View	Toggle switch	Off	Enables visualisation (read-only) mode, rendering all form fields as plain text instead of interactive input controls.
Size	Radio group (Large | Medium | Small)	-	Sets the size of the form field controls.
Form values	JSON setter	See code sample	Defines the form fields as a JSON array. Each item specifies the field name, type, default value, display order, and optional conditional visibility rules.

Code sample for the Form values default

[{
    "paramName": "A",
    "paramLabel": "label1",
    "paramDataType": "TEXT",
    "defaultValue": "VALUE1",
    "orderTopDown": 100,
    "orderTdLr": 1,
    "mandatoryOneParams": "",
    "sectionName": "",
    "showHideParamJson": 
    "[{\"Show\": \"true\",\"Param\": \"Report_by_Trademark\",\"Criteria\": \"TM\"}]",
    "targetDynaParams": ""
}, 
{
    "paramName": "D",
    "paramLabel": "label4",
    "paramDataType": "NUMBER",
    "defaultValue": "VALUE4",
    "orderTopDown": 100,
    "orderTdLr": 100,
    "mandatoryOneParams": "",
    "sectionName": "SECTION A",
    "showHideParamJson": "",
    "targetDynaParams": ""
}, 
{
    "paramName": "B",
    "paramLabel": "label2",
    "paramDataType": "RADIO",
    "defaultValue": "VALUE2",
    "orderTopDown": 100,
    "orderTdLr": 100,
    "mandatoryOneParams": "B,C",
    "sectionName": "",
    "showHideParamJson": "",
    "targetDynaParams": "",
    "options": 
    {
        "radio1": "Radio1",
        "radio2": "Radio2",
        "radio3": "Radio3",
        "radio4": "Radio4"
    }
}]

Layout

Property	UI Control	Default	Description
Label column	Switch Setter (Object setter / Variable input)	{"span":6}	Configures the column span and offset for the label element.
Wrapper column	Switch Setter (Object setter / Variable input)	-	Configures the column span and offset for the input control wrapper.

Form events

The Form events sub-section within the Props tab configures event handlers for the form:

Property	UI Control	Default	Description
onSubmit	Switch Setter (Function Binding / Variable input)	-	Binds a function to handle form submission. The function receives the current form values.
onInitSubmit	Function Binding	-	Binds a function called when the form is submitted via the built-in submit action.
onInitReset	Function Binding	-	Binds a function called when the form is reset via the built-in reset action.

Advanced (Props sub-section)

Within the Props tab, an Advanced collapsible section provides:

Property	UI Control	Default	Description
ID	Text input	Auto-generated	Unique HTML identifier for the element. Auto-generated from the component title (non-alphanumeric characters are replaced by underscores). You can override this value manually.
Name	Text input	Auto-generated	HTML name attribute for form identification. Auto-generated from the component title. You can override this value manually.

Styles

For more information, refer to Styles.

Advanced

For more information, refer to Advanced.

AnchorForm

The AnchorForm component is a form container with built-in anchor navigation that allows users to jump between named sections within a long form. It supports vertical and horizontal anchor bar orientations, and optional sticky (affix) behaviour for the horizontal layout. An AnchorForm must contain ChildForm components as its direct children. In the App Designer, select an AnchorForm on the canvas to configure it through four tab pages in the Settings panel: Props, Styles, Events, and Advanced.

Props

The Props tab contains the anchor configuration properties of the AnchorForm.

If a property displays the Variable Binding icon , that means it supports variable binding.

Anchor configuration

Property	UI Control	Default	Description
Show anchor	Toggle switch	On	Controls whether the anchor navigation bar is visible alongside the form. When disabled, all sections are displayed without the anchor sidebar.
Display mode	Radio group (Vertical | Horizontal)	Horizontal	Sets the orientation of the anchor navigation bar. Only visible when Show anchor is enabled.
Has affix	Toggle switch	Off	Enables sticky (affix) behaviour, keeping the anchor bar fixed in the viewport as the user scrolls. Only available when Display mode is Horizontal.

Action item

The Action item section is an array editor that allows you to add, remove, and reorder action buttons displayed below the form. Click the edit (pencil) icon to open the full item editor, click the delete (trash) icon to remove it, or use the grip icon to reorder items. Click "Add an item +" to add a new action button.

You can click the edit (pencil) icon to open the item editor, click the delete (trash) icon to remove a button, or use the grip icon to reorder buttons. Click "Add an item +" to add a new action button. Each item has:

Property	UI Control	Default	Description
Text	i18n setter	Title	Sets the display text of the toolbar button. Supports internationalisation.
Action	Dropdown (Submit | Ok | Cancel| Reset | Custom)	Ok	Sets the button style type.
Type	Dropdown (Normal | Primary | Secondary)	Normal	Sets the button style type.
Click event	Function Binding	-	Binds a function to be called when the button is clicked.

Action items configuration

The Action items configuration section controls the overall behaviour and layout of the action button bar.

Property	UI Control	Default	Description
Button visibility	Number input	-	Sets the maximum number of action buttons displayed. Buttons beyond this count are hidden.
Fixed bottom	Toggle switch	Off	When enabled, sticks the action button bar to the bottom of the form, regardless of scroll position.
Show saved time	Toggle switch	Off	When enabled, displays the timestamp of the last save alongside the action buttons.
Alignment	Radio group (Left | Center | Right)	-	Controls the horizontal alignment of the action buttons within the button bar.

Advanced (Props sub-section)

Within the Props tab, an Advanced collapsible section provides:

Property	UI Control	Default	Description
ID	Text input	Auto-generated	Unique HTML identifier for the element. Auto-generated from the component title (non-alphanumeric characters are replaced by underscores). You can override this value manually.
Name	Text input	Auto-generated	HTML name attribute for form identification. Auto-generated from the component title. You can override this value manually.

ChildForm

The ChildForm component is a section container used exclusively as a direct child of the AnchorForm. Each ChildForm represents one named anchor section within the parent AnchorForm, providing its own column layout, state, and form items. In the App Designer, select a ChildForm on the canvas to configure it through four tab pages in the Settings panel: Props, Styles, Events, and Advanced.

Props

The Props tab contains the layout, state, and form item properties of the ChildForm, organised into groups.

If a property displays the Variable Binding icon , that means it supports variable binding.

Global configuration

Property	UI Control	Default	Description
State	Radio group (Read only | Editable)	Editable	Sets the form state. Editable allows users to interact with form fields. Read only renders all fields as plain text in preview mode.
Field	Expression input	-	Binds an external field instance to the form for programmatic field management.
Column span	Radio group (One column | Two columns | Three columns | Four columns)	Two columns	Sets the number of form item columns displayed in a single row.
Alignment	Radio group (Top | Left | Within)	Top	Controls the position of form labels relative to their input fields. Top places labels above the input. Left places labels to the left. Within embeds the label as an inset placeholder inside the input field.
Device	Radio group (Phone | Tablet | Desktop)	Desktop	Specifies the preset screen width for responsive layout calculations.
Responsive	Toggle switch	Off	Enables responsive layout adjustments based on the current Device setting.

Form item

The Form item section is an array editor that allows you to add, remove, and reorder form fields. Each item configures one input widget within the ChildForm. The Component and Label fields are displayed inline in the array list. Click the edit (pencil) icon to open the full item editor, click the delete (trash) icon to remove it, or use the grip icon to reorder items. Click "Add an item +" to add a new field. Each item has:

Property	UI Control	Default	Description
Component	Dropdown (Input | Select | DatePicker | Checkbox group | Radio group | RangePicker | Cascader select | TreeSelect | Rating | Upload | NumberInput)	Input	Selects the input widget type for this form field.
Name	Text input	-	Sets the unique identifier used to store and reference this field's value.
Label	i18n setter	Form Item	Sets the label text displayed for the field. Supports internationalisation.
Size	Radio group (Small | Medium | Large)	Medium	Sets the size of the form field control.
Column span	Radio group (One column | Two columns | Three columns | Four columns)	-	Overrides the global column span setting for this individual form field.
Open childForm	Toggle switch	Off	When enabled, allows this field to open a child form.
Show tooltip	Toggle switch	Off	When enabled, displays a tooltip alongside the field label.
Tooltip icon	Icon selector	-	Sets the icon displayed in the field tooltip.
Tooltip content	i18n setter	-	Sets the text content of the field tooltip. Supports internationalisation.
Mandatory	Toggle switch	Off	Marks the field as mandatory, showing a validation error if submitted without a value.
Preview mode	Toggle switch	Off	When enabled, renders this field in read-only preview mode.
Auto validate	Toggle switch	Off	When enabled, validates this field automatically as the user interacts with it.
Detailed configuration	Configure button	-	Opens advanced configuration options specific to the selected input component.

FormInput

The FormInput component is a single-line text input field used as a form item within a ChildForm. In the App Designer, select a FormInput on the canvas to configure it through the Props tab in the Settings panel. The Props tab contains two sections: Form item configuration and Component configuration.

Form item configuration

The Form item configuration section controls how the field is labelled, sized, positioned, and validated within the ChildForm layout.

Property	UI Control	Default	Description
Column span	Radio group (One column | Two columns | Three columns | Four columns)	-	Overrides the ChildForm's global column span for this field.
Label	i18n setter	Form Item	Sets the label text displayed for the field. Supports internationalisation.
Open childForm	Toggle switch	Off	When enabled, allows this field to open a child form.
Help info	i18n setter	-	Sets supplementary help text displayed alongside the field. Supports internationalisation.
Extra info	i18n setter	-	Sets additional information displayed alongside the field. Supports internationalisation.
Validation state	Radio group (Error | Success | Loading | Warning | Default)	-	Sets the visual validation state of the field.
Size	Radio group (Small | Medium | Large)	Medium	Sets the size of the input control.
Label position	Radio group (Top | Left | Inset)	Top	Controls the position of the label relative to the input. Top places the label above. Left places it to the left. Inset embeds it as a placeholder inside the field.
Label alignment	Radio group (Left | Right)	-	Sets the horizontal text alignment of the label.
Device	Radio group (Phone | Tablet | Desktop)	Desktop	Specifies the preset screen width for responsive layout calculations.
Preview mode	Toggle switch	Off	When enabled, renders this field in read-only preview mode.
Auto validate	Toggle switch	Off	When enabled, validates this field automatically as the user interacts with it.

The Layout collapsible sub-section provides additional column and label width controls:

Property	UI Control	Default	Description
Col Span	Number input	4	Sets the column span for this field within the form layout.
Label column > Fixed span	Number input	-	Sets a fixed column span for the label element.
Label column > Offset	Number input	-	Sets the column offset for the label element.
Wrapper column > Span	Number input	-	Sets the column span for the input wrapper.
Wrapper column > Offset	Number input	-	Sets the column offset for the input wrapper.

The Validation collapsible sub-section configures field-level validation rules. For more information, refer to Validation.

The Advanced collapsible sub-section provides:

Property	UI Control	Default	Description
Name	Text input	-	Sets the field identifier used for form submission and programmatic access.

Component configuration

The Component configuration section controls the behaviour and appearance of the FormInput control itself.

Property	UI Control	Default	Description
Label	i18n setter	-	Sets a label displayed within the component. Supports internationalisation.
Default value	i18n setter	-	Sets the initial value of the input when the form first loads. Supports internationalisation.
Value	i18n setter	-	Binds the current value of the input. Supports internationalisation.
Placeholder	i18n setter	Please Enter	Sets the placeholder text shown when the input is empty. Supports internationalisation.
State	Radio group (Error | Loading | Success | Warning | Default)	-	Sets the visual state of the input control.
Size	Radio group (Small | Medium | Large)	Medium	Sets the size of the input control.
Max length	Number input	-	Sets the maximum number of characters the input accepts.
Allow clearing	Toggle switch	Off	When enabled, displays a clear button when the input has a value.
Allow clearing on Hover	Toggle switch	Off	When enabled, the clear button appears only when hovering over the input.
Disabled	Toggle switch	Off	When enabled, prevents user interaction with the input.
Show copy clipboard	Toggle switch	Off	When enabled, displays a copy-to-clipboard button alongside the input.
Show limit	Toggle switch	Off	When enabled, displays a character count indicator based on the max length.
Cut string	Toggle switch	Off	When enabled, truncates the displayed value to fit within the input width.
Read only	Toggle switch	Off	When enabled, renders the input as non-editable.
Trim	Toggle switch	Off	When enabled, removes leading and trailing whitespace from the input value on submit.
Show border	Toggle switch	On	When enabled, displays a border around the input.
Auto complete	Dropdown (Off | On)	Off	Controls the browser's autocomplete behaviour for this input.
Auto focus	Toggle switch	Off	When enabled, automatically focuses this input when the form loads.
Icon hint	Icon selector	-	Sets an icon displayed inside the input as a visual hint.
Inner before	i18n setter	-	Sets content displayed inside the input before the value. Supports internationalisation.
Inner after	i18n setter	-	Sets content displayed inside the input after the value. Supports internationalisation.
Addon before	i18n setter	-	Sets an add-on element displayed outside and before the input. Supports internationalisation.
Addon after	i18n setter	-	Sets an add-on element displayed outside and after the input. Supports internationalisation.
Text before	i18n setter	-	Sets text displayed immediately before the input field. Supports internationalisation.
Text after	i18n setter	-	Sets text displayed immediately after the input field. Supports internationalisation.

The Advanced collapsible sub-section provides:

Property	UI Control	Default	Description
ID	Text input	Auto-generated	Unique HTML identifier for the element. Auto-generated from the component title (non-alphanumeric characters are replaced by underscores). You can override this value manually.
Name	Text input	Auto-generated	HTML name attribute for the input. Auto-generated from the component title. You can override this value manually.

Events

The Events tab allows you to bind event handlers to the FormInput without writing boilerplate code.

Binding an event

1. Click "Component native event" to select from the FormInput's supported events:

   • onPressEnter — Triggered when the user presses the Enter key while the input is focused
   • onChange — Triggered when the input value changes
   • onKeyDown — Triggered when any key is pressed while the input is focused
   • onFocus — Triggered when the input receives focus
   • onBlur — Triggered when the input loses focus

2. The Event Binding window opens, allowing you to select an event and apply parameter settings.

3. After selecting an event, it appears in the Existing event table.

   You can click the gear icon to edit the action, or click the trash bin icon to delete the binding.

Handler signatures

The onPressEnter handler is called when the user presses Enter:

onPressEnter() {
}

The onChange handler is called when the input value changes:

onChange() {
}

The onKeyDown handler is called when any key is pressed:

onKeyDown() {
}

The onFocus handler is called when the input receives focus:

onFocus() {
}

The onBlur handler is called when the input loses focus:

onBlur() {
}

Styles

For more information, refer to Styles.

Events

The Events tab allows you to bind event handlers to the AnchorForm without writing boilerplate code.

Binding an event

1. Click "Component native event" to select from the AnchorForm's supported events:

   • onChange — Triggered when the active anchor section changes as the user navigates

2. The Event Binding window opens, allowing you to select an event and apply parameter settings.

3. After selecting an event, it appears in the Existing event table.

   You can click the gear icon to edit the action, or click the trash bin icon to delete the binding.

Event Binding window

Click the settings (gear) icon on an existing event to open the Event Binding window. This window contains:

• Select event — A left panel with two tabs:

  • Built-in function — Built-in event handlers provided by the platform
  • Event — A searchable list of all available event handlers in the current page, including custom ones. Click New Event at the top to create a new handler. Select an existing handler to bind it to this event.

• Event name — A text input displaying the name of the selected handler. You can rename it here.

• Advanced params settings — A toggle switch (default: Disable). The extended parameters are appended as a separate input parameter in JSON format after the original transparent transmission parameters. When enabled, a JSON code editor appears where you can define the extra parameters.

• Click Confirm to save the binding, or Cancel to discard changes.

Handler signatures

The onChange handler is called when the user navigates to a different anchor section:

onChange() {
}

Advanced

For more information, refer to Advanced.

AdvancedForm

The AdvancedForm component is a full-featured form container that supports dynamic form item management, multi-column layouts, responsive device breakpoints, label alignment options, and a read-only preview mode. Form items are configured directly in the Settings panel without requiring manual code. In the App Designer, select an AdvancedForm on the canvas to configure it through four tab pages in the Settings panel: Props, Styles, Events, and Advanced.

Props

The Props tab contains the layout, state, and form item properties of the AdvancedForm, organised into groups.

If a property displays the Variable Binding icon , that means it supports variable binding.

Global configuration

Property	UI Control	Default	Description
State	Radio group (Read only | Editable)	Editable	Sets the form state. Editable allows users to interact with form fields. Read only renders all fields as plain text in preview mode.
Field	Expression input	-	Binds an external field instance to the form for programmatic field management.
Column span	Radio group (One column | Two columns | Three columns | Four columns)	Four columns	Sets the number of form item columns displayed in a single row.
Alignment	Radio group (Top | Left | Within)	Top	Controls the position of form labels relative to their input fields. Top places labels above the input. Left places labels to the left. Within embeds the label as an inset placeholder inside the input field.
Text alignment	Radio group (Right | Left)	Right	Sets the horizontal text alignment of the labels. Only available when Alignment is Left.
Col Span	Number input	12	Sets the column span for the form item layout.
Label column	Switch Setter (Object setter / Variable input)	{"span":4}	Configures the column span and offset for the label element. Only available when Alignment is Left.
Wrapper column	Switch Setter (Object setter / Variable input)	{"span":14}	Configures the column span and offset for the input control wrapper. Only available when Alignment is Left.
Device	Radio group (Phone | Tablet | Desktop)	Desktop	Specifies the preset screen width for responsive layout calculations.
Responsive	Toggle switch	Off	Enables responsive layout adjustments based on the current Device setting.

Form item

The Form item section is an array editor that allows you to add, remove, and reorder form fields. Each item configures one input widget within the form. The Component and Label fields are displayed inline in the array list. Click the edit (pencil) icon to open the full item editor, click the delete (trash) icon to remove it, or use the grip icon to reorder items. Click "Add an item +" to add a new field. Each item has:

Property	UI Control	Default	Description
Component	Dropdown (Input | Select | DatePicker | Checkbox group | Radio group | RangePicker | Cascader select | TreeSelect | Rating | Upload | NumberInput)	Input	Selects the input widget type for this form field.
Name	Text input	-	Sets the unique identifier used to store and reference this field's value.
Label	i18n setter	Form Item	Sets the label text displayed for the field. Supports internationalisation.
Size	Radio group (Small | Medium | Large)	Medium	Sets the size of the form field control.
Column span	Radio group (One column | Two columns | Three columns | Four columns)	-	Overrides the global column span setting for this individual form field.
Open childForm	Toggle switch	Off	When enabled, allows this field to open a child form.
Show tooltip	Toggle switch	Off	When enabled, displays a tooltip alongside the field label.
Tooltip icon	Icon selector	-	Sets the icon displayed in the field tooltip.
Tooltip content	i18n setter	-	Sets the text content of the field tooltip. Supports internationalisation.
Mandatory	Toggle switch	Off	Marks the field as mandatory, showing a validation error if submitted without a value.
Preview mode	Toggle switch	Off	When enabled, renders this field in read-only preview mode.
Auto validate	Toggle switch	Off	When enabled, validates this field automatically as the user interacts with it.
Detailed configuration	Configure button	-	Opens advanced configuration options specific to the selected input component.

Action item

The Action item section is an array editor that allows you to add, remove, and reorder action buttons displayed below the form. Click the edit (pencil) icon to open the full item editor, click the delete (trash) icon to remove it, or use the grip icon to reorder items. Click "Add an item +" to add a new action button. Each item has:

Property	UI Control	Default	Description
Text	i18n setter	Title	Sets the button label text. Supports internationalisation.
Action	Dropdown (Submit | Ok | Cancel | Reset | Custom)	Ok	Specifies the built-in action performed by this button.
Type	Dropdown (Primary | Secondary | Normal)	Normal	Sets the visual style of the button.
Click event	Function Binding	-	Binds a custom function to the button's click event.

Action items configuration

The Action items configuration section controls the overall behaviour and layout of the action button bar.

Property	UI Control	Default	Description
Button visibility	Number input	-	Sets the maximum number of action buttons displayed. Buttons beyond this count are hidden. Accepts values from 1 to 6.
Fixed bottom	Toggle switch	Off	When enabled, sticks the action button bar to the bottom of the form, regardless of scroll position.
Show saved time	Toggle switch	Off	When enabled, displays the timestamp of the last save alongside the action buttons.
Alignment	Radio group (Left | Center | Right)	Center	Controls the horizontal alignment of the action buttons within the button bar.

Advanced (Props sub-section)

Within the Props tab, an Advanced collapsible section provides:

Property	UI Control	Default	Description
ID	Text input	Auto-generated	Unique HTML identifier for the element. Auto-generated from the component title (non-alphanumeric characters are replaced by underscores). You can override this value manually.
Name	Text input	Auto-generated	HTML name attribute for form identification. Auto-generated from the component title. You can override this value manually.

Styles

For more information, refer to Styles.

Events

The Events tab allows you to bind event handlers to the AdvancedForm without writing boilerplate code.

Binding an event

1. Click "Component native event" to select from the AdvancedForm's supported events:

   • saveField — Triggered to expose the internal field instance for external access
   • onSubmit — Triggered when the form is submitted
   • onChange — Triggered when any form field value changes

2. The Event Binding window opens, allowing you to select an event and apply parameter settings.

3. After selecting an event, it appears in the Existing event table.

   You can click the gear icon to edit the action, or click the trash bin icon to delete the binding.

Handler signatures

The saveField handler saves the internal field instance:

saveField() {
}

The onSubmit handler is called when the form is submitted:

onSubmit() {
}

The onChange handler is called when a field value changes:

onChange() {
}

Advanced

For more information, refer to Advanced.

StepForm

The StepForm component is a multi-step wizard form that guides users through a sequence of steps displayed in a progress indicator. Each step contains its own form fields. The component supports configurable step shapes, display orientations, operation buttons, and per-step status tracking. In the App Designer, select a StepForm on the canvas to configure it through three tab pages in the Settings panel: Props, Styles, and Advanced.

Props

The Props tab contains the step structure and layout properties of the StepForm.

If a property displays the Variable Binding icon , that means it supports variable binding.

Step item

The Step item section is a Switch Setter that provides two modes, Array setter and Variable input. For more information, refer to Switch Setter.

Each step item has:

Property	UI Control	Default	Description
Icon	Icon selector	-	Sets an optional icon displayed inside the step indicator.
Title	i18n setter	StepItem	Sets the label text displayed for this step in the progress bar. Supports internationalisation.
Percentage	Number input	-	Sets a completion percentage (0–100) displayed within the step indicator.
Disabled	Toggle switch	Off	Prevents the user from navigating to this step.

Below the list of items:

Property	UI Control	Default	Description
Current step	Dropdown (Section1step:step item | Section2step:step item)	Section1step:step item	Indicates the current step.
Type	Radio group (Circle | Arrow | Dot)	Circle	Sets the visual style of the step indicators. Arrow is only available when Display mode is Horizontal. Only Circle and Dot are available in Vertical mode.
Display mode	Radio group (Horizontal | Vertical)	Horizontal	Sets the orientation of the step progress bar. Not available when Type is Arrow.
Read only	Toggle switch	Off	Disables step navigation so the progress bar is purely informational.
Animate loading	Toggle switch	On	Controls the loading of the widget.

Action item

The Action item section is a Switch Setter that provides three modes, Slot setter, Array setter, and Variable input. For more information, refer to Switch Setter.

The array editor lists the action buttons. Each item displays its Text, Operation, and Style in the list. Click the edit (pencil) icon to open the item editor, click the delete (trash) icon to remove a button, or use the grip icon to reorder buttons. Click "Add an item +" to add a new action button. The item editor provides the following properties:

Property	UI Control	Default	Description
Text	i18n setter	Submit	Sets the button label text. Supports internationalisation.
Operation	Dropdown (Submit | Reset | Previous step | Next step | Custom)	Submit	Specifies the built-in action performed by this button.
Style	Dropdown (Main | Secondary | Ordinary)	Secondary	Sets the visual style of the button.
Click event	Function Binding	-	Binds a custom function to the button's click event. When you click Bind Function, the Event Binding window appears where you can configure an onClick handler.

Action items configuration

The Action items configuration section is a Switch Setter that provides two modes, Object setter and Variable input. For more information, refer to Switch Setter.

In Object setter mode, the following properties are available:

Property	UI Control	Default	Description
Button visibility	Number input	-	Sets the maximum number of action buttons displayed. Buttons beyond this count are hidden.
Fixed bottom	Toggle switch	Off	When enabled, sticks the action button bar to the bottom of the form, regardless of scroll position.
Show saved time	Toggle switch	Off	When enabled, displays the timestamp of the last save alongside the action buttons.
Alignment	Radio group (Left | Center | Right)	-	Controls the horizontal alignment of the action buttons within the button bar.

ProForm

Props

The Props tab contains the layout, state, and form item properties of the ProForm, organised into groups.

If a property displays the Variable Binding icon , that means it supports variable binding.

Global configuration

Property	UI Control	Default	Description
State	Radio group (Read only | Editable)	Editable	Sets the form state. Editable: allows users to interact with form fields. Read only: renders all fields as plain text in preview mode.
Field	Expression input	-	Binds an external field instance to the form for programmatic field management.
Column span	Radio group (One column | Two columns | Three columns | Four columns)	One column	Sets the number of form item columns displayed in a single row.
Alignment	Radio group (Top | Left | Within)	Top	Controls the position of form labels relative to their input fields. Top: places labels above the input. Left: places labels to the left. Within: embeds the label as an inset placeholder inside the input field.
Device	Radio group (Phone | Tablet | Desktop)	Desktop	Sets the device breakpoint for which the current layout configuration applies.
Responsive	Toggle switch	Off	When enabled, automatically adjusts the form layout based on the current device breakpoint.

Form item

The Form item section is a Switch Setter that provides two modes, Array setter and Variable input. For more information, refer to Switch Setter.

Each item has:

Property	UI Control	Default	Description
Component	Dropdown	Input	Sets the type of input component used for this form item.
Name	Text input	-	Sets the internal name used to identify this form item programmatically.
Label	i18n setter	Form Item	Sets the label text displayed for this form item. Supports internationalisation.
Size	Radio group (Small | Medium | Large)	Medium	Sets the display size of the input control.
Column span	Radio group (One column | Two columns | Three columns | Four columns)	One column	Sets the number of columns this form item spans within the form layout.
Open childForm	Toggle switch	Off	When enabled, this form item can open a child form.
Show tooltip	Toggle switch	Off	When enabled, displays a tooltip alongside the form item label.
Mandatory	Toggle switch	Off	When enabled, marks this form item as required. The form cannot be submitted until this field has a value.
Preview mode	Toggle switch	Off	When enabled, renders the form item as read-only plain text.
Auto validate	Toggle switch	Off	When enabled, validates the field value automatically as the user types, without waiting for form submission.

Detailed configuration

Click Click to configure to open the FormInput sub-component settings.

Action item

The Action item section is a Switch Setter that provides multiple modes for configuring form action buttons. For more information, refer to Switch Setter.

The array editor lists the action buttons. Each item displays its Action and Type in the list. Click the edit (pencil) icon to open the item editor, click the delete (trash) icon to remove a button, or use the grip icon to reorder buttons. Click "Add an item +" to add a new action button. The item editor provides the following properties:

Property	UI Control	Default	Description
Text	i18n setter	Title	Sets the display text of the action button. Supports internationalisation.
Action	Dropdown (Submit | Ok | Cancel | Reset | Custom)	Ok	Sets the action performed by this button.
Type	Dropdown (Normal | Primary | Secondary)	Normal	Sets the button style type.
Click event	Function Binding	-	Binds a function to be called when the button is clicked.

Action items configuration

Property	UI Control	Default	Description
Button visibility	Number input	-	Sets the maximum number of action buttons displayed. Buttons beyond this count are hidden.
Fixed bottom	Toggle switch	Off	When enabled, sticks the action button bar to the bottom of the form, regardless of scroll position.
Show saved time	Toggle switch	Off	When enabled, displays the timestamp of the last save alongside the action buttons.
Alignment	Radio group (Left | Center | Right)	-	Controls the horizontal alignment of the action buttons within the button bar.

Events

The Events tab allows you to bind event handlers to the ProForm without writing boilerplate code.

Binding an event

1. Click "Component native event" to select from the ProForm's supported events:

   • saveField — Triggered to expose the internal field instance for external access
   • onSubmit — Triggered when the form is submitted
   • onChange — Triggered when any form field value changes

2. The Event Binding window opens, allowing you to select an event and apply parameter settings.

3. After selecting an event, it appears in the Existing event table.

   You can click the gear icon to edit the action, or click the trash bin icon to delete the binding.

Handler signatures

The saveField handler saves the internal field instance:

saveField() {
}

The onSubmit handler is called when the form is submitted:

onSubmit() {
}

The onChange handler is called when a field value changes:

onChange() {
}

Advanced (Props sub-section)

Within the Props tab, an Advanced collapsible section provides:

Property	UI Control	Default	Description
ID	Text input	Auto-generated	Unique HTML identifier for the element. Auto-generated from the component title (non-alphanumeric characters are replaced by underscores). You can override this value manually.
Name	Text input	Auto-generated	HTML name attribute for form identification. Auto-generated from the component title. You can override this value manually.

Styles

For more information, refer to Styles.

Advanced

For more information, refer to Advanced.

Last updated on 20 May 2026