Advanced

Languages

Write @keys instead of text and switch the whole form between languages.

@keys instead of text

Write @key.path instead of a fixed text in any prop (label, placeholder, text, messages, option labels). The form looks the key up in its messages.

Give useDynamicTag the starting messages and a languages map. A button with "data-lang": "es" and onClick: "switchLanguage()" switches; from code use form.setLanguage("es"). A language can also be loaded on demand: es: () => import("./text_es").

The library's own texts (validation messages, table / calendar / upload words) come from rcube-html/lang/lang_en and lang_es — spread them into your messages to translate those too.

Try it

Loading example…

Events0

Use the example — every action it runs shows up here with its data.

Code

Copy Full page.js into app/your-page/page.js of a Next.js app (withrcube-html, react-bootstrap and Bootstrap's CSS installed) — it runs as is. Or copy only the schema and keep your own page.

[
  {
    "type": "row",
    "id": "row-lang",
    "children": [
      {
        "type": "column",
        "id": "c-lang",
        "props": {
          "className": "d-flex gap-2 mb-3"
        },
        "children": [
          {
            "type": "ButtonField",
            "id": "lang-en",
            "props": {
              "text": "English",
              "variant": "outline-primary",
              "data-lang": "en",
              "onClick": "switchLanguage()"
            }
          },
          {
            "type": "ButtonField",
            "id": "lang-es",
            "props": {
              "text": "Español",
              "variant": "outline-primary",
              "data-lang": "es",
              "onClick": "switchLanguage()"
            }
          }
        ]
      }
    ]
  },
  {
    "type": "row",
    "id": "row-form",
    "children": [
      {
        "type": "column",
        "id": "c-form",
        "children": [
          {
            "type": "H4",
            "id": "title",
            "props": {
              "text": "@demo.title"
            }
          },
          {
            "type": "P",
            "id": "hint",
            "props": {
              "text": "@demo.hint",
              "className": "text-body-secondary small"
            }
          },
          {
            "type": "InputField",
            "id": "name",
            "props": {
              "name": "name",
              "label": "@demo.name",
              "required": true
            }
          },
          {
            "type": "TextareaField",
            "id": "message",
            "props": {
              "name": "message",
              "label": "@demo.message",
              "rows": 3,
              "required": true
            }
          },
          {
            "type": "ButtonField",
            "id": "send",
            "props": {
              "type": "submit",
              "text": "@demo.send",
              "onClick": "runValidation()"
            }
          }
        ]
      }
    ]
  }
]

Options used here

Option	What it does
`@key.path`	Any text prop: looked up in the active language.
`messages / language / languages (useDynamicTag)`	Starting texts, starting language code, all languages (objects or loaders).
`data-lang + switchLanguage()`	A button that switches language.
`form.setLanguage(code) / form.language`	Switch / read the language from code.

Events

Event	When it runs	Your action receives
`onSubmit`	Valid submit — try it in Spanish to see Spanish error messages.	The entries.

Tips

To add a language, copy rcube-html/lang/lang_en, translate it and add your keys.