Rendering

Localized content

Labels, options and error messages carry per-locale en/fr values — switch the app language and the form follows, errors included.

Loading the builder…

View the spec
{
  "type": "panel",
  "id": "column",
  "name": "Form",
  "configs": {
    "key": "i18n"
  },
  "children": [
    {
      "type": "input",
      "dataType": "string",
      "id": "text",
      "name": "Name",
      "configs": {
        "key": "name",
        "label": {
          "en": "Full name",
          "fr": "Nom complet"
        },
        "placeholder": {
          "en": "Ada Lovelace",
          "fr": "Ada Lovelace"
        }
      },
      "validations": [
        {
          "validator": "required",
          "message": {
            "en": "Please give your name",
            "fr": "Merci d’indiquer votre nom"
          }
        }
      ]
    },
    {
      "type": "input",
      "dataType": "string",
      "id": "select",
      "name": "Role",
      "configs": {
        "key": "role",
        "label": {
          "en": "Role",
          "fr": "Rôle"
        },
        "optionsSource": "static",
        "options": {
          "en": "Developer\nDesigner\nManager",
          "fr": "Développeur·se\nDesigner\nManager"
        }
      },
      "validations": [
        {
          "validator": "required",
          "message": {
            "en": "Pick a role",
            "fr": "Choisissez un rôle"
          }
        }
      ]
    }
  ]
}