Skip to main content

Modal Form

The modal form component allows you to create a form linked to a script or flow. It is a Submit form component but with a dedicated modal opened when triggered. It has a submit button that triggers a runnable when clicked. The form is displayed in a modal, which can be opened by clicking on a button.

The runnable parameters are defined:

  • Static: the parameter is defined in the component configuration.
  • User input: the parameter is defined by the user input.
  • Eval: the parameter is connected to an output.

Only user inputs are displayed in the form in the modal.

Form Modal Button Form Modal API

The following section details Modal Form component's specific settings. For more details on the App Editor, check the dedicated documentation or the App Editor Quickstart:


This component can be controlled by frontend scripts using these functions:


The setValue function is meant to set or force the value of a component. This can be convenient in cases where connection is not the easiest pattern. Note that it's a bad idea to mix dynamic default value and setValue together.

setValue(id: string, value: any)


Make a specific field of a form in a Validate state.

validate(id: string, key: string)


Make all fields of a form in a Validate state.

validateAll(id: string, key: string)


Invalidate a specific field of a form

invalidate(id: string, key: string, error: string)

Form Modal configuration

Modal TitlestringtruefalseModal titleTitle of the component.
labelstringtruefalseOpen popupThe button label.
colorblue, red, dark, light, green, graytruefalsedarkThe button color.
sizexs, sm, md , lg, xltruefalsesmThe button size.

The form component has a special parameters called On Success and On Error.

The options for On Success are:

The options for On Error are:


resultanyThe result of the runnable.
loadingbooleanThe loading state of the button.