Form components

Learn more 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 can manually add inputs to forms or generate them from a resource or table. Form submission is then managed with event handling. When users submit a form, you can use the input values to write to databases, make API requests, send emails, etc.

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. You can also add other components to customize the form's appearance further.

You can set the Form component's Initial data property to 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.

Demo

Form inputs

You can manually add form inputs or generate them from a resource or table. To generate inputs, add a form to the canvas and click Generate form. This opens a modal where you can select a resource or table, along with the inputs.

Retool evaluates each column to set an appropriate label and input type, but you can edit these properties as well. You can also deselect columns that you don't want to use in your form. Click Generate form when you're done configuring the inputs.

When you generate a form from a database, Retool automatically adds a query that's configured to create a record. You can connect this query to your form using an event handler to write data back to your database. Forms generated from tables don't include this query, so you need to create a query or configure a similar action to use with form submission.

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 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).

Demo

Comparison

Retool recommends 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 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.