Choosing a form component

At first glance, it can be difficult to tell which form component is the right fit for your application. The functionality of the Form and JSON Schema Form components is similar, but there are some factors to consider when choosing one over the other.

Once you've made your decision, see the following documentation for more detailed information on working with each component:


Simplicity

The Form component works similarly to a regular Container component in Retool: you can drag-and-drop other components (like inputs and dropdowns) right inside of it. Unlike Containers, the Form component comes with some extra helpers, like a submit button and the ability to clear the form after submission. Drag-and-dropping some text inputs into a Form component is the simplest way to get started building a form.

Layout

Because the Form component supports drag-and-drop manipulation, you can use it to layout a form however you like: multiple columns, subsections inside of containers, and so on. Any Retool component can be dragged inside of a Form component, which makes it easy to add things like inline notes or images.

The JSON Schema Form component, on the other hand, only supports a single-column layout. Reordering inputs or changing input types happens by editing the JSON code — drag-and-drop isn’t available. While this isn’t ideal for custom layouts, it does mean you that don’t have to re-layout your form by hand when making changes. When the JSON is modified, the form layout updates automatically.

Flexibility

The JSON Schema Form component is based on the react-jsonschema-form library. This brings a great deal of power and flexibility, although it comes at the cost of a syntax that can be a bit difficult to learn. Some things that aren’t easily programatic in the regular Form component may be more possible in the JSON Schema Form, like validation that depends on multiple interdependent fields.

Additionally, we've found that some teams already employ JSON schema-based forms in other products. Using the JSON Schema Component allows them to centrally version their schema and bring it straight into Retool to keep things up-to-date and consistent.

For more information, see react-jsonschema-form's documentation.

The short of it

If you have a simple form or need to customize your form layout, you’ll probably want to use the regular Form component. If you don't want to deal with manual form layout or have advanced functionality needs — and you don’t mind getting familiar with the react-jsonschema-form library — the JSON Schema Form might be the best bet.

Here’s a quick cheatsheet for reference:

Form

JSON Schema Form

Form layout

Drag-and-drop, fully custom

Automatic, single column

Editing form properties & validation

Via individual inputs

Via JSON code

Autogenerate a form using SQL database schema

Advanced

Basic

Accepts other Retool components

Yes, just like a container

No


Did this page help you?