I18n Support

LetsForm supports multi-language and i18n, translations can be easily handled with LetsForm Designer.

Enable i18n in the form

Go to "Form settings" and select the locales the form should support, this will enable the i18n selector for the form properties that support internationalization (i.e. "label")

LetsFormDesigner: select locales

Add translations

For each component, the attributes that support translation (typically label, placeholder, hint, etc) have a drop down selector next to them.

Switch between locales to add the proper translation of the attribute for the selected locale, a check mark next to each locale indicates there's a translation for it. The numbers within the input box show how many completed translations for the selected property (in the screenshot below 1 added out of 3 available).

LetsFormDesigner: select locales

Autocomplete translations

LetsForm is able to auto-complete the missing translations for the form, be sure to select the proper language to any inserted label so LetsForm Designer knows which language translate from. All labels are, by default, marked as no tx, means that they will not be translated.

LetsFormDesigner: translation auto-complete

Click on the button to start the automatic translation (for larger form, it can take a while)

LetsFormDesigner: start translation

⚠️

If no texts appear in the automatic translator, check the text properties with the locale dropdown set to no-tx, those are not assigned to any locale and will not be translated

This LetsForm Designer feature requires a subscription, check this page (opens in a new tab) to know all details

Locale property

After all locales are correctly translated, select the right one using the locale property in LetsForm

import LetsForm from 'lets-form/react-rsuite5';
 
<LetsForm
  form={MY_FORM}
  locale="it-IT"
  onSubmit={values => {
    // ...
  }}
/>