Forms

Learn about Retool's form components and compare their features.

You can build forms to collect information from your users with the Form or JSON Schema Form components. You add inputs to the form manually or generate them automatically based on the schema of a connected PostgreSQL, MySQL, or MS SQL database, and configure event handling for submission. When a user completes the form, it triggers a query or other specified action using the input values, such as making an API request or creating a new database record.

The Form and JSON Schema Form components work differently to create forms. Learn more about these differences and compare their features to decide which one meets your needs.


The Form component

The Form component functions as a container—you add input components from the Components library and place them in the form. The Form component gives you complete control over the layout, allowing you to adjust the position or size of inputs however you want. You can also add other components to customize the form's appearance further.

You can set the Form component's initial data property to automatically populate inputs using other data, such as from a selected table row.

Try out the demo below to see the form in action (submissions are disabled), then read Create forms using the Form component to learn how to build this.


The JSON Schema Form component

JSON Schema Form is based on the react-jsonschema-form library. You define which input fields to include and how they are rendered using JSON and UI schemas. JSON Schema Form displays input fields in a single-column layout only, and you cannot add other components to the form.

JSON Schema Form allows for more programmatic flexibility as you can dynamically change the JSON schema instead of making more manual changes. You can also use the Default Form data property of JSON Schema Form to automatically populate inputs using other data, such as a selected table row.

Try out the demo below to see the form in action (submissions are disabled), then read Create forms using the JSON Schema Form component to learn how to build this.


Comparison

We recommend using the Form component in most cases. You should consider using JSON Schema Form if:

  • You already use JSON schema-based forms. You can reuse your existing schema rather than build new forms from scratch.
  • You need more flexibility. You can create programmatic workflows for your forms that would otherwise not be possible or need to be done manually with the Form component (e.g., complex validation needs or granular control of inputs with custom schema).

Feature

Form

JSON Schema Form

Form creation

Drag-and-drop of input components.

Inputs defined using in JSON.

Layout and customization

Full control over layout, supports all components, control properties in the editor.

Single-column layout, cannot use other components, control properties using JSON.

Changes and updates

Manual. Use the editor to update inputs and properties.

Mostly programmatic. Edit JSON to update inputs and properties.

Generate forms from an SQL database schema

Automatically adds inputs to the form and creates a query to insert records.

Automatically generates the JSON and UI schema.


Did this page help you?