Translatable Fields

TranslatableFields renders locale-specific inputs for fields marked as translatable in the entity metadata. Supports switching between locales within a single form.

Import


import { TranslatableFields } from "@phpcreation/frontend-crud-react-nextjs-bundle/components/TranslatableFields";

How It Works

Translatable fields store values as locale-keyed objects in the API:


{
  "name": {
    "en": "Invoice",
    "fr": "Facture",
    "ar": "فاتورة"
  }
}

The component renders a locale tab switcher, and each tab shows the field inputs for that locale.

Props

Prop	Type	Description
`fields`	`FieldConfig[]`	Translatable field definitions
`form`	`UseFormReturn`	React Hook Form instance
`locales`	`string[]`	Available locales (e.g., `["en", "fr"]`)
`activeLocale`	`string`	Currently active locale
`onLocaleChange`	`(locale: string) => void`	Locale switch handler

Usage


import { TranslatableFields } from "...";
import { Tabs } from "@phpcreation/frontend-components-react-nextjs-bundle/components/Tabs";
 
<TranslatableFields
  fields={translatableFormFields}
  form={form}
  locales={["en", "fr", "ar"]}
  activeLocale={currentLocale}
  onLocaleChange={setCurrentLocale}
/>

Marking Fields as Translatable

In changes.json, set isTranslatable: true for the field:


{
  "fields": {
    "name": { "isTranslatable": true },
    "description": { "isTranslatable": true }
  }
}

The Translation Modal (TranslationModal) provides a side-panel interface for translating all fields of an entity at once, while TranslatableFields handles in-form locale switching.