Getting started with the Form and JSON Schema Form components

Learn how to build forms using components or JSON Schema to collect user input.

Retool provides two components that enable you to gather user input from within an app: Form and JSON Schema Form.

This section covers only in-app forms. You can also create standalone forms using Retool Forms.

The following tabs outline the differences between the form types.

Form

The Form component functions as a container for input components, providing complete control over a form's layout and design. You create a form by adding input components or generating them automatically using the schema of a Table or a connected PostgreSQL, MySQL, or MS SQL database.

Retool recommends using the Form component instead of the JSON Schema Form component in most cases.

The Form component includes the following features:

• Drag-and-drop of input components.
• Full control over layout. Supports all components, with control properties in the editor.
• Manually make changes and updates. Use the editor 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.

Demo

JSON Schema Form

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.

Compared to the Form component, JSON Schema Form allows for more programmatic flexibility, because you can dynamically change the JSON schema instead of making 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.

The JSON Schema Form component includes the following features:

• Inputs defined using JSON.
• Single-column layout, and you cannot manually add additional components. Control properties using JSON.
• Changes and updates are mostly programmatic. Edit JSON to update inputs and properties.
• Generate forms from an SQL database schema. Automatically generates the JSON and UI schema.

You should consider using JSON Schema Form if:

• You already use JSON schema-based forms. You can reuse your existing schema rather than build 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).

Demo