Letsform Properties

LetsForm API Reference

The <LetsForm /> components accepts the following parameters (all frameworks):

Field	Type	Description
className	string	Class name for the LetsFrom main container
custom	React view	Custom React view shown next to the form buttons
context	object	Variables to store in the form context and availabe in scrips
defaultValues	object	Initial values of the form
disabled	boolean	If true, disable the entire form. Default is false
disableButtons	boolean	Disable submit and cancel buttons
disableOnSubmit	boolean	Disable the form on submit (if connectors are specified)
form	LetsForm JSON Schema	The JSON definition of the form
footer	React view	Custom React view shown at the end of the form, just above submit button
hideCancel	boolean	Hide cancel button
hideSubmit	boolean	Hide submit button
loader	ReactNode	React component to show while loading external components
locale	string	Locale for the form (i.e., it-IT, en-US, etc. or auto for auto detect). Default: auto
onChange	function	Called when form data changes, argument is an object with the form values
onError	function	Called when user clicks on "submit" button with validation errors, argument is an object with validation errors
onEnter	function	Called when user hits "Enter" on any text field
onSubmit	function	Called when user clicks on "submit" button and there are no validation error, argument is an object with the form values
onSubmitSuccess	function	Called after the form was succesfully submitted (if connectors are specified). The argument it's generally the response object of the fetch call, it's an array in case of multiple connectors
onSubmitError	function	Called if a connector defined in the form fails with an excpetion or a 4xx / 5xx response. The argument is the error object or the response object from the fetch call
onJavascriptError	function	Called when JavaScript code embedded in the form (a Transformer of validator), raises an error. Argument is an object describing the error
plaintext	boolean	Show the plaintext version of the form. Default is false
prealoadComponents	boolean	Preaload all external components before showing the form. Default: true
readOnly	boolean	Put the fields of the form in read only mode. Default is false
resetAfterSubmit	boolean	Reset form on a succesfully submit (if connectors are specified)

For example:

import LetsForm from 'lets-form/react-rsuite5';
 
<LetsForm
  defaultValues={myDefaultValues}
  locale="en-US"
  form={myFormSchema}
  onChange={values => {
    setState(values);
  }}
  onSubmit={async values => {
    await postDataToMyServer(values);
  }}
/>

Note that there are different builds of the <LetsForm /> component optimized for the specific framework (i.e., import LetsForm from 'lets-form/react-bootstrap' for React Bootstrap)

LetsForm JSON schema

The LetsForm JSON form schema describes the form (fields, validation, etc.)

Field	Type	Description
version	string	Version of LetsForm. Always "1"
layout	string	The layout of the form: horizontal, vertical, inline
disabled	boolean	Disable the entire form (all fields and buttons)
readOnly	boolean	Set the form in read-only mode
plaintext	boolean	Set the form in plaintext mode, useful for confirmations
locales	[string]	Supported locales by the form (i.e., `['it-IT', 'en-US']`)
fields	[LetsFormField]	An array of fields definitions
labelSubmit	string	Label for submit button. Default: Submit
labelCancel	string	Label for cancel button. Default: Cancel
buttonsAlign	string	Buttons alignment: left, right, center

For example:

{
  "$schema": "https://unpkg.com/lets-form/schemas/react-rsuite5/form.json",
  "version": "1",
  "layout": "horizontal",
  "disable": false,
  "readOnly": false,
  "plaintext": false,
  "locales": ["it-IT", "en-US"],
  "fields": [ ... ]
}

Use the $schema property to validate the schema, many modern code editors (i.e. Visual Studio Code) use the JSON schema to help auto-completing the JSON. The preferred way to build the JSON form schema is using LetsForm Designer (opens in a new tab).

LetsForm field

Fields are the smallest building block of LetsForm, the following are the common properties for all fields. More properties are available based on the component key

Field	Type	Description
name	string	The name of the field, the value. Must be unique within the form
label	string \| i18n	The visual label of the field
hint	string \| i18n	Show a small help for this field, it's generally shown below the input field (but some frameworks may show it in a different way)
required	boolean	Mark the field as required. Each UI framework has a different way of visually marking a field as required
component	string	The field type (i.e., `input-text`). Each component has a different set of parameters, see the list below

See the complete list of parameters for each component: input-text, toggle, select, group, two-columns, three-columns, columns, array, input-number, slider, date, checkbox, checkbox-group, radio-group, input-tag, input-mask, textarea, rate, placeholder, multiselect, multiselect-language, placeholder-image, button, divider, datetime, tabs, radio-tile, upload, buttons-toggle-group, steps, esm-module, time, hidden.

For example:

{
  "component": "input-text",
  "name": "my_field",
  "label": "My Field",
  "hint": "Some help for this field"
}

Some field properties are UI framework specific (i.e., valid for RSuite but not for Material UI), these can be either specified in the root of the field object or in a sub-keys like in the example below block is the sub-key react-rsuite5.

Forms exported by LetsForm Designer will always use framework specific sub-keys.

A complete example of a LetsForm JSON scheme

my_form.json

{
  "$schema": "https://unpkg.com/lets-form/schemas/react-rsuite5/form.json",
  "version": 1,
  "layout": "vertical",
  "validationMode": "onSubmit",
  "fluid": true,
  "fields": [
    {
      "component": "text-input",
      "label": "My Text",
      "name": "my_field",
      "hint": "Some help can be useful"
    },
    {
      "component": "select",
      "label": "My Select",
      "name": "my_select",
      "options": [
        {
          "value": "one",
          "label": "One"
        },
        {
          "value": "two",
          "label": "Two"
        }
      ],
      "react-rsuite5": {
        "block": true
      }
    }
  ]
}

LetsForm methods

<LetsForm/> component also exposes some methods that can be call in an imperative way

Method	Return Type	Description
validate	object	Triggers programmatically the form validation, returns a validation object (see React Hook Form)

For example

const MyView = () => {
  const ref = useRef();
 
  return (
    <>
      <LetsForm
        form={MY_FORM}
        ref={ref}
      />
      <input
        type="button"
        onClick={async () => {
          // trigger validation programmatically
          if (!await ref.current.validate()) {
            return;
          }
          // do something
        }}
      />
    </input>
  );
};