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:
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.
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.
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.
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:
JSON Schema Form
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
Accepts other Retool components
Yes, just like a container
Updated 12 months ago