Create forms programmatically with 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).
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. |