Skip to main content
Demo

JSON Schema

Form block uses JSON Schema to build your very own form. You will find more informations about Schema Form here.

Minimal usage

Displays a form with a single input which will do nothing without setting at least onSubmit or onChange:
This will emit a save form event with all form values as payload. You also can set a custom payload:
Static payload will me merged with form values. This event will be fired when form will be submitted, so when user type Enter or click on Submit button. But you can do the same on each user keypress with onChange. Be warned it can consume many resources, so don’t use this option everywhere:
There is a third event which fire when a field is blur. It’s onBlur:
And finally, you can set initial values to your form with the values attribute. The content should be fetch from an update event indead:

Advanced usage

Here’s a list of advanced parameters you can set on your form: submitLabel changes the default submit label by a localized string of your choice:
hideSubmit will hide the submit button. Form can be submitted with Enter key or on change and on blur.
disableSubmit disable the submit button and disable the form to be submitted. In case an interaction with another part of the page needs to block the form.
autoFocus automatically focus the first field of the form when it appears on screen.
buttons describe an array of custom buttons. They take each an event name and their payload will be merged with form values.
loading display a loading spinner in the submit button. Useless while the form has been submitted but the process takes time on backend side:
resetOn is an event name to reset the form from backend. Just emit the event set and all values will reset.
disableStretchContent makes objects fields groups static. By default they are collaspables.
collapsed makes all objects fields groups opened by default.