Localization & RTL - Flex Forms

Flex Forms localizes built-in UI (buttons, errors, Studio chrome). You still write your own field labels and placeholders in the Studio. There are two independent language surfaces:

Surface	Where you set it	What it translates
Fill (respondents)	Studio → Form settings (gear) → General → Language	Public fill UI: Next, Submit, password gate, closed/unavailable messages, validation chrome
Studio (admins)	Global Settings → Language (`auto` or a catalog locale)	Studio React UI + related admin PHP strings

Selecting Arabic / Hebrew (and similar) also drives text direction (RTL). See General Settings.

Shipped catalogs: English, Polish, German, French, Spanish, Italian, Dutch, Portuguese, Swedish, Danish, Norwegian, Finnish, Czech, Slovak, Ukrainian, Russian, Turkish, Japanese, Korean, Chinese, Arabic, and Hebrew (PHP + Studio/Fill JS). Publish overrides to customize wording (below).

Set the form (fill) language

Open General settings

In Studio, open Form settings (gear) → General.

Choose Language

Pick the respondent locale. Built-in fill strings switch to that catalog when it exists (otherwise English is used as fallback).

Text direction

RTL languages set direction automatically. You can still override Text direction (ltr / rtl) when the control is shown.

Save

Click Save in the settings bar, then publish the form if you use draft/publish.

Field labels, placeholders, and page titles are not auto-translated. Enter them in the language your respondents should see (or maintain separate forms per language).

Set the Studio language

In Global Settings, set Language to:

Auto (app locale) — follows your Laravel app()->getLocale()
en / pl / … — any locale that exists in the Studio JS catalog (package or published)

Studio JS catalogs are loaded on demand — you do not rebuild Vite assets after editing published JSON.

Publish translations into your app

Publish once so you can edit strings under your app’s lang/ tree (safe across Composer updates as long as you keep your overrides).

# PHP + JS catalogs together
php artisan vendor:publish --tag=filament-flex-forms-translations

# Or JS catalogs only
php artisan vendor:publish --tag=filament-flex-forms-js-locales

# During install
php artisan flex-forms:install --translations

Published paths:

Kind	Path in your app
PHP	`lang/vendor/filament-flex-forms/{locale}/*.php`
JS (Studio)	`lang/vendor/filament-flex-forms/js/studio/{locale}.json`
JS (Fill)	`lang/vendor/filament-flex-forms/js/fill/{locale}.json`

Published files override package defaults. Partial files are OK — missing keys fall back to the package English (then package locale) layers. See merge order below.

Edit PHP translations

PHP strings power Blade / Livewire fill chrome, mail copy, validation messages, and some Studio notifications. Keys use the filament-flex-forms:: namespace, for example filament-flex-forms::fill.submit. Typical files after publish:

lang/vendor/filament-flex-forms/
  en/
    fill.php
    studio.php
    mail.php
    validation.php
    license.php
  pl/
    …same set…

Edit the arrays in those files, then clear config/view caches if you cache aggressively:

php artisan optimize:clear

No front-end rebuild is required for PHP strings.

Edit JS translations (Studio + Fill)

Studio (React) and Fill JS use flat JSON catalogs — one string per key. Example (js/fill/en.json):

{
  "submit": "Submit",
  "next": "Next →",
  "back": "Back"
}

After publish, edit:

lang/vendor/filament-flex-forms/js/studio/en.json — admin Studio UI
lang/vendor/filament-flex-forms/js/fill/en.json — respondent JS strings that share the fill surface

Keep Studio and Fill catalogs separate — do not copy Studio keys into Fill expecting them to apply on the public form. JS merge order (later wins):

Package English
Your published English overrides
Package requested locale
Your published requested locale overrides

Optional: relocate the JS override root with FLEX_FORMS_I18N_JS_PATH / filament-flex-forms.i18n.js_path (Config & env).

Add a new language (e.g. German)

Publish catalogs

Run php artisan vendor:publish --tag=filament-flex-forms-translations.

Copy English → new locale

PHP:

cp -R lang/vendor/filament-flex-forms/en lang/vendor/filament-flex-forms/de

JS:

cp lang/vendor/filament-flex-forms/js/studio/en.json lang/vendor/filament-flex-forms/js/studio/de.json
cp lang/vendor/filament-flex-forms/js/fill/en.json lang/vendor/filament-flex-forms/js/fill/de.json

Translate the files

Edit the de PHP arrays and both JSON files. Locale folder / file names use tags like de, en, pl, or pt_BR.

Select it in the product

Fill: Form Settings → General → Language (once the fill catalog exists)
Studio: Global Settings → Language (once the studio catalog exists)

Both pickers list every locale file found in the package or your published js/{studio|fill}/ folder — including tags that are not in the shipped list (for example hu, pt_BR). No package update is required.

Until a locale file exists for that surface, Flex Forms falls back to English. Shipping only fill/de.json does not automatically add German to Studio.

Right-to-Left (RTL)

For Arabic, Hebrew, Persian, Urdu, and similar audiences:

Set Language on the form (General).
Confirm Text direction is rtl (auto for those languages, or set manually).

Flex Forms then flips layout direction, input alignment, and multi-page stepper / progress chrome via dir="rtl".

If you use Custom CSS, scope RTL fixes with [dir="rtl"] so LTR forms are not broken.

Checklist

Fill language set per form (General)
Studio language set in Global Settings (or Auto)
Translations published if you customize strings
PHP + both JS surfaces updated for new locales
Field labels written in the respondent language
RTL checked on a real phone for Arabic/Hebrew forms

​Set the form (fill) language

​Set the Studio language

​Publish translations into your app

​Edit PHP translations

​Edit JS translations (Studio + Fill)

​Add a new language (e.g. German)

​Right-to-Left (RTL)

​Checklist

Set the form (fill) language

Set the Studio language

Publish translations into your app

Edit PHP translations

Edit JS translations (Studio + Fill)

Add a new language (e.g. German)

Right-to-Left (RTL)

Checklist