From aa7d80458e21760ba98f2f674280293aff9d945e Mon Sep 17 00:00:00 2001
From: swara <swara09@gmail.com>
Date: Wed, 16 Sep 2026 19:36:40 +0200
Subject: [PATCH 1/9] feat(forms): Add TranslatableInput multi-language field
 for PHP, Vue and React

---
 CHANGELOG.md                                  |   1 +
 README.md                                     |   2 +-
 config/laravilt-forms.php                     |  26 ++
 docs/index.md                                 |  76 ++++
 docs/mcp-server.md                            |   1 +
 lang/ar/forms.php                             |   5 +
 lang/ckb/forms.php                            |   5 +
 lang/en/forms.php                             |   5 +
 resources/js/app.ts                           |   2 +
 resources/js/components-only.js               |   2 +
 .../components/fields/TranslatableInput.vue   | 358 +++++++++++++++
 resources/js/index.js                         |   4 +
 resources/react/app.ts                        |   2 +
 resources/react/components-only.ts            |   2 +
 .../components/fields/TranslatableInput.tsx   | 416 ++++++++++++++++++
 resources/react/index.ts                      |   3 +
 .../fields/translatable-input.blade.php       |  10 +
 src/Components/TranslatableInput.php          | 294 +++++++++++++
 src/FormsServiceProvider.php                  |   2 +
 src/Support/Locales.php                       | 124 ++++++
 tests/Unit/TranslatableInputTest.php          | 221 ++++++++++
 21 files changed, 1560 insertions(+), 1 deletion(-)
 create mode 100644 resources/js/components/fields/TranslatableInput.vue
 create mode 100644 resources/react/components/fields/TranslatableInput.tsx
 create mode 100644 resources/views/components/fields/translatable-input.blade.php
 create mode 100644 src/Components/TranslatableInput.php
 create mode 100644 src/Support/Locales.php
 create mode 100644 tests/Unit/TranslatableInputTest.php

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 735c003..08fb432 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 - Initial release
+- `TranslatableInput` field: multi-language text/textarea whose value is an array keyed by locale, with a globe popover to edit every locale, per-locale validation rules (`name.en`, `name.ar`, ...) and a new `laravilt-forms.locales` config key that accepts plain codes or per-locale `name`/`direction`/`label` metadata. Shipped for Blade, Vue and React.
 
 ### Changed
 
diff --git a/README.md b/README.md
index 23f12b9..bb17741 100644
--- a/README.md
+++ b/README.md
@@ -68,7 +68,7 @@ php artisan make:component CustomField
 
 ## Field Types
 
-**Basic:** TextInput, Textarea, NumberField, Select, Checkbox, CheckboxList, Radio, Toggle, ToggleButtons, Hidden
+**Basic:** TextInput, Textarea, TranslatableInput, NumberField, Select, Checkbox, CheckboxList, Radio, Toggle, ToggleButtons, Hidden
 
 **Date & Time:** DatePicker, DateTimePicker, TimePicker, DateRangePicker
 
diff --git a/config/laravilt-forms.php b/config/laravilt-forms.php
index 9957ce0..eabd891 100644
--- a/config/laravilt-forms.php
+++ b/config/laravilt-forms.php
@@ -29,5 +29,31 @@
         'middleware' => ['web', 'auth', 'throttle:120,1'],
     ],
 
+    /*
+    |--------------------------------------------------------------------------
+    | Locales
+    |--------------------------------------------------------------------------
+    |
+    | The locales offered by TranslatableInput when a field does not call
+    | ->locales() itself. Each entry may be a plain code or a code => metadata
+    | pair with a native "name" and a "direction" (ltr or rtl); an optional
+    | "label" overrides the short badge shown on the globe button.
+    |
+    | 'locales' => ['en', 'ar', 'ckb'],
+    | 'locales' => [
+    |     'en' => ['name' => 'English', 'direction' => 'ltr'],
+    |     'ar' => ['name' => 'العربية', 'direction' => 'rtl'],
+    |     'ckb' => ['name' => 'کوردی', 'direction' => 'rtl'],
+    | ],
+    |
+    | A plain code gets the code as its name and "ltr" as its direction.
+    | Leave empty to fall back to the application locale.
+    |
+    */
+
+    'locales' => [
+        'en' => ['name' => 'English', 'direction' => 'ltr'],
+    ],
+
     // Add your configuration options here
 ];
diff --git a/docs/index.md b/docs/index.md
index c48fe61..bb5b9ca 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -45,6 +45,7 @@ php artisan make:form UserForm --resource
 ### 📝 Basic Fields
 - **TextInput**: Single-line text input with validation
 - **Textarea**: Multi-line text input
+- **TranslatableInput**: Multi-language text input with a per-locale popover
 - **NumberField**: Numeric input with min/max
 - **Select**: Dropdown select with search
 - **Checkbox**: Single checkbox
@@ -261,6 +262,80 @@ TextInput::make('name')
     ->helperText('Enter your full name');
 ```
 
+### TranslatableInput
+
+A multi-language text field. Its value is an array keyed by locale code
+(`['en' => 'Title', 'ar' => 'العنوان']`). The main input edits the active
+locale; a globe button inside the input opens a popover with one input per
+locale (RTL locales render with `dir="rtl"`). The globe is hidden when only one
+locale is allowed.
+
+```php
+TranslatableInput::make('name')
+    ->label('Name')
+    ->locales(['en', 'ar', 'ckb']) // defaults to config('laravilt-forms.locales')
+    ->activeLocale('en')           // defaults to the app locale when allowed
+    ->required()                   // every locale is required...
+    ->requiredLocales(['en'])      // ...unless you narrow it down
+    ->maxLength(255)               // applied per locale
+    ->multiline()                  // textarea per locale
+    ->rows(4);
+```
+
+Locales resolve in this order: explicit `locales()`, then
+`config('laravilt-forms.locales')` (published to `config/laravilt-forms.php`),
+then the application locale. The config accepts plain codes or per-locale
+metadata; the native name is shown in the popover and the direction sets
+`dir` on each input:
+
+```php
+// config/laravilt-forms.php
+'locales' => [
+    'en' => ['name' => 'English', 'direction' => 'ltr'],
+    'ar' => ['name' => 'العربية', 'direction' => 'rtl'],
+    'ckb' => ['name' => 'کوردی', 'direction' => 'rtl', 'label' => 'KU'],
+],
+// or simply: 'locales' => ['en', 'ar', 'ckb'],
+```
+
+The config is the only source of names and directions: a plain code is shown
+as its own code, labelled with its uppercased base code, and rendered LTR.
+
+Validation rules are produced per locale key:
+
+```php
+TranslatableInput::make('name')->locales(['en', 'ar'])->required()->getValidationRules();
+// [
+//     'name'    => ['required', 'array'],
+//     'name.en' => ['required', 'string'],
+//     'name.ar' => ['required', 'string'],
+// ]
+```
+
+`hydrateState()` / `dehydrateState()` accept a JSON string, an array or `null`
+and always return an array with every allowed locale present, so the field works
+with both storage styles:
+
+```php
+// spatie/laravel-translatable
+class Product extends Model
+{
+    use \Spatie\Translatable\HasTranslations;
+
+    public $translatable = ['name'];
+}
+
+// or a plain JSON column
+class Category extends Model
+{
+    protected $casts = ['name' => 'array'];
+}
+
+// Both accept the field's value as-is:
+$product->setTranslations('name', $data['name']); // or $product->name = $data['name'];
+$category->name = $data['name'];
+```
+
 ### Select
 
 ```php
@@ -592,6 +667,7 @@ class ProductForm extends Form
 ### Basic
 - TextInput
 - Textarea
+- TranslatableInput
 - NumberField
 - Select
 - Checkbox
diff --git a/docs/mcp-server.md b/docs/mcp-server.md
index 16e077a..e33557f 100644
--- a/docs/mcp-server.md
+++ b/docs/mcp-server.md
@@ -119,6 +119,7 @@ For MCP tools to provide field type information:
 ### Basic Fields
 - TextInput: Single-line text input
 - Textarea: Multi-line text input
+- TranslatableInput: Multi-language text input (value keyed by locale)
 - NumberField: Numeric input
 - Select: Dropdown select
 - Checkbox: Single checkbox
diff --git a/lang/ar/forms.php b/lang/ar/forms.php
index f36913c..f1e5665 100644
--- a/lang/ar/forms.php
+++ b/lang/ar/forms.php
@@ -93,4 +93,9 @@
         'search_placeholder' => 'بحث في الصلاحيات...',
         'no_results' => 'لم يتم العثور على صلاحيات',
     ],
+
+    // TranslatableInput Component
+    'translatable_input' => [
+        'translations' => 'الترجمات',
+    ],
 ];
diff --git a/lang/ckb/forms.php b/lang/ckb/forms.php
index 0e7e055..3fb0253 100644
--- a/lang/ckb/forms.php
+++ b/lang/ckb/forms.php
@@ -93,4 +93,9 @@
         'search_placeholder' => 'گەڕان بۆ دەسەڵاتەکان...',
         'no_results' => 'هیچ دەسەڵاتێک نەدۆزرایەوە',
     ],
+
+    // TranslatableInput Component
+    'translatable_input' => [
+        'translations' => 'وەرگێڕانەکان',
+    ],
 ];
diff --git a/lang/en/forms.php b/lang/en/forms.php
index 26632d3..ca4d42a 100644
--- a/lang/en/forms.php
+++ b/lang/en/forms.php
@@ -93,4 +93,9 @@
         'search_placeholder' => 'Search permissions...',
         'no_results' => 'No permissions found',
     ],
+
+    // TranslatableInput Component
+    'translatable_input' => [
+        'translations' => 'Translations',
+    ],
 ];
diff --git a/resources/js/app.ts b/resources/js/app.ts
index 00def27..9aed132 100644
--- a/resources/js/app.ts
+++ b/resources/js/app.ts
@@ -3,6 +3,7 @@ import Form from './components/Form.vue'
 import FieldWrapper from './components/FieldWrapper.vue'
 import TextInput from './components/fields/TextInput.vue'
 import Textarea from './components/fields/Textarea.vue'
+import TranslatableInput from './components/fields/TranslatableInput.vue'
 import Select from './components/fields/Select.vue'
 import Checkbox from './components/fields/Checkbox.vue'
 import CheckboxList from './components/fields/CheckboxList.vue'
@@ -43,6 +44,7 @@ export default {
         // Field components
         app.component('laravilt-text-input', TextInput)
         app.component('laravilt-textarea', Textarea)
+        app.component('laravilt-translatable-input', TranslatableInput)
         app.component('laravilt-select', Select)
         app.component('laravilt-checkbox', Checkbox)
         app.component('laravilt-checkbox-list', CheckboxList)
diff --git a/resources/js/components-only.js b/resources/js/components-only.js
index 948849a..8f841f2 100644
--- a/resources/js/components-only.js
+++ b/resources/js/components-only.js
@@ -6,6 +6,7 @@ import LaraviltForm from './components/Form.vue';
 import LaraviltFieldWrapper from './components/FieldWrapper.vue';
 import LaraviltTextInput from './components/fields/TextInput.vue';
 import LaraviltTextarea from './components/fields/Textarea.vue';
+import LaraviltTranslatableInput from './components/fields/TranslatableInput.vue';
 import LaraviltSelect from './components/fields/SelectWrapper.vue';
 import LaraviltCheckbox from './components/fields/Checkbox.vue';
 import LaraviltCheckboxList from './components/fields/CheckboxList.vue';
@@ -45,6 +46,7 @@ export default {
         // Field components
         app.component('laravilt-text-input', LaraviltTextInput);
         app.component('laravilt-textarea', LaraviltTextarea);
+        app.component('laravilt-translatable-input', LaraviltTranslatableInput);
         app.component('laravilt-select', LaraviltSelect);
         app.component('laravilt-checkbox', LaraviltCheckbox);
         app.component('laravilt-checkbox-list', LaraviltCheckboxList);
diff --git a/resources/js/components/fields/TranslatableInput.vue b/resources/js/components/fields/TranslatableInput.vue
new file mode 100644
index 0000000..5723340
--- /dev/null
+++ b/resources/js/components/fields/TranslatableInput.vue
@@ -0,0 +1,358 @@
+<template>
+    <!-- Use slot if provided (Blade mode), otherwise use internal template (Direct Vue mode) -->
+    <slot
+        v-if="$slots.default"
+        :id="id || name"
+        :name="name"
+        :translations="localValue"
+        :activeLocale="active"
+        :locales="availableLocales"
+        :multiline="multiline"
+        :rows="rows"
+        :placeholder="placeholder"
+        :readonly="readonly"
+        :maxLength="maxLength"
+        :hasError="hasError"
+        :setLocale="setLocale"
+        :extraAttributes="extraAttributes"
+    />
+
+    <!-- Internal template for direct Vue usage -->
+    <FieldWrapper
+        v-else
+        :id="id"
+        :name="name"
+        :label="label"
+        :helper-text="helperText"
+        :hint="hint"
+        :required="required"
+        :disabled="disabled"
+        :hidden="hidden"
+        :column-span="columnSpan"
+        :hint-actions="hintActions"
+    >
+        <div class="relative flex items-center gap-2">
+            <!-- Prefix Actions -->
+            <div v-if="prefixActions && prefixActions.length" class="flex items-center gap-1">
+                <ActionButton
+                    v-for="action in prefixActions"
+                    :key="action.name"
+                    v-bind="action"
+                />
+            </div>
+
+            <!-- The wrapper takes the active locale's direction so the globe (end) and the input's end padding agree -->
+            <div class="relative flex flex-1 items-center" :dir="directionOf(active)">
+                <!-- Main input edits the active locale -->
+                <Textarea
+                    v-if="multiline"
+                    :id="id || name"
+                    :model-value="localValue[active] ?? ''"
+                    @update:model-value="(val) => setLocale(active, String(val ?? ''))"
+                    :placeholder="placeholder"
+                    :rows="rows"
+                    :maxlength="maxLength"
+                    :disabled="disabled"
+                    :readonly="readonly"
+                    :dir="directionOf(active)"
+                    v-bind="extraAttributes"
+                    class="w-full"
+                    :class="[
+                        hasError ? 'border-destructive focus-visible:ring-destructive' : '',
+                        hasLocaleSwitcher ? 'pe-12' : '',
+                    ]"
+                    :aria-invalid="hasError ? 'true' : 'false'"
+                    :aria-describedby="hasError ? `${name}-error` : undefined"
+                />
+                <Input
+                    v-else
+                    :id="id || name"
+                    type="text"
+                    :model-value="localValue[active] ?? ''"
+                    @update:model-value="(val) => setLocale(active, String(val ?? ''))"
+                    :placeholder="placeholder"
+                    :required="required"
+                    :disabled="disabled"
+                    :readonly="readonly"
+                    :maxlength="maxLength"
+                    :dir="directionOf(active)"
+                    v-bind="extraAttributes"
+                    class="w-full"
+                    :class="[
+                        hasError ? 'border-destructive focus-visible:ring-destructive' : '',
+                        hasLocaleSwitcher ? 'pe-12' : '',
+                    ]"
+                    :aria-invalid="hasError ? 'true' : 'false'"
+                    :aria-describedby="hasError ? `${name}-error` : undefined"
+                />
+
+                <!-- Globe button opens the per-locale popover (hidden with a single locale) -->
+                <Popover v-if="hasLocaleSwitcher">
+                    <PopoverTrigger as-child>
+                        <button
+                            type="button"
+                            class="absolute end-1.5 flex items-center gap-0.5 text-muted-foreground transition-colors hover:text-foreground disabled:pointer-events-none disabled:opacity-50"
+                            :class="multiline ? 'top-2' : 'top-1/2 -translate-y-1/2'"
+                            :disabled="disabled"
+                            :aria-label="trans('forms::forms.translatable_input.translations')"
+                            tabindex="-1"
+                        >
+                            <Globe class="h-3.5 w-3.5" />
+                            <span class="text-[9px] font-bold uppercase tracking-wide">{{ labelOf(active) }}</span>
+                        </button>
+                    </PopoverTrigger>
+                    <PopoverContent class="w-72 space-y-2.5 p-3" align="end">
+                        <p class="text-[10px] font-semibold uppercase tracking-[0.12em] text-muted-foreground">
+                            {{ trans('forms::forms.translatable_input.translations') }}
+                        </p>
+                        <div v-for="locale in availableLocales" :key="locale.code" class="space-y-1">
+                            <Label
+                                :for="`${id || name}-${locale.code}`"
+                                class="flex items-center justify-between text-xs text-muted-foreground"
+                            >
+                                <span>{{ locale.name || locale.code }}</span>
+                                <span class="text-[9px] font-bold uppercase">
+                                    {{ locale.label || locale.code }}
+                                    <span v-if="isLocaleRequired(locale.code)" class="text-destructive">*</span>
+                                </span>
+                            </Label>
+                            <Textarea
+                                v-if="multiline"
+                                :id="`${id || name}-${locale.code}`"
+                                :model-value="localValue[locale.code] ?? ''"
+                                @update:model-value="(val) => setLocale(locale.code, String(val ?? ''))"
+                                :rows="rows"
+                                :maxlength="maxLength"
+                                :disabled="disabled"
+                                :readonly="readonly"
+                                :dir="locale.direction || 'ltr'"
+                                :class="localeHasError(locale.code) ? 'border-destructive focus-visible:ring-destructive' : ''"
+                            />
+                            <Input
+                                v-else
+                                :id="`${id || name}-${locale.code}`"
+                                type="text"
+                                :model-value="localValue[locale.code] ?? ''"
+                                @update:model-value="(val) => setLocale(locale.code, String(val ?? ''))"
+                                :maxlength="maxLength"
+                                :disabled="disabled"
+                                :readonly="readonly"
+                                :dir="locale.direction || 'ltr'"
+                                :class="localeHasError(locale.code) ? 'border-destructive focus-visible:ring-destructive' : ''"
+                            />
+                            <p v-if="localeError(locale.code)" class="text-xs text-destructive">
+                                {{ localeError(locale.code) }}
+                            </p>
+                        </div>
+                    </PopoverContent>
+                </Popover>
+            </div>
+
+            <!-- Suffix Actions -->
+            <div v-if="suffixActions && suffixActions.length" class="flex items-center gap-1">
+                <ActionButton
+                    v-for="action in suffixActions"
+                    :key="action.name"
+                    v-bind="action"
+                    :getFormData="getFormData"
+                />
+            </div>
+        </div>
+
+        <!-- Per-locale errors (name.en, ...) are not shown by FieldWrapper, so surface the first one here -->
+        <p v-if="localeErrorMessage" class="mt-1.5 text-xs text-destructive">
+            {{ localeErrorMessage }}
+        </p>
+
+        <!-- Hidden inputs so native (non-Inertia) form posts submit every locale -->
+        <template v-if="name">
+            <input
+                v-for="locale in availableLocales"
+                :key="locale.code"
+                type="hidden"
+                :name="`${name}[${locale.code}]`"
+                :value="localValue[locale.code] ?? ''"
+            />
+        </template>
+    </FieldWrapper>
+</template>
+
+<script setup lang="ts">
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { Textarea } from '@/components/ui/textarea';
+import { useLocalization } from '@laravilt/support/composables';
+import ActionButton from '@laravilt/actions/components/ActionButton.vue';
+import { Globe } from 'lucide-vue-next';
+import type { ComputedRef } from 'vue';
+import { computed, inject, ref, watch } from 'vue';
+import { useReactiveField } from '../../composables/useReactiveField';
+import FieldWrapper from '../FieldWrapper.vue';
+
+/** Locale metadata as serialized by TranslatableInput::toLaraviltProps(). */
+interface LocaleMeta {
+    code: string;
+    name?: string;
+    label?: string;
+    direction?: 'ltr' | 'rtl' | string;
+}
+
+type Translations = Record<string, string>;
+
+const { trans } = useLocalization();
+
+const props = defineProps<{
+    id?: string;
+    name: string;
+    label?: string;
+    placeholder?: string;
+    hint?: string;
+    required?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    helperText?: string;
+    value?: Translations | string | null;
+    modelValue?: Translations | string | null;
+    /** Allowed locales: metadata objects from PHP, or plain locale codes. */
+    locales?: (LocaleMeta | string)[];
+    /** Locale edited by the main (collapsed) input. */
+    activeLocale?: string;
+    requiredLocales?: string[];
+    multiline?: boolean;
+    rows?: number;
+    maxLength?: number;
+    extraAttributes?: Record<string, any>;
+    hidden?: boolean;
+    columnSpan?: number | string;
+    hintActions?: any[];
+    prefixActions?: any[];
+    suffixActions?: any[];
+    isLive?: boolean;
+    isLazy?: boolean;
+    liveDebounce?: number;
+}>();
+
+const emit = defineEmits<{
+    'update:modelValue': [value: Translations];
+}>();
+
+// Normalize the locale list: plain codes become minimal metadata objects
+const availableLocales = computed<LocaleMeta[]>(() => {
+    const list = (props.locales || [])
+        .map((locale) => (typeof locale === 'string' ? { code: locale } : locale))
+        .filter((locale): locale is LocaleMeta => !!locale && !!locale.code);
+
+    if (list.length) {
+        return list;
+    }
+
+    // No metadata from the server: fall back to the active locale so the field still works
+    return [{ code: props.activeLocale || 'en' }];
+});
+
+const localeCodes = computed(() => availableLocales.value.map((locale) => locale.code));
+
+const hasLocaleSwitcher = computed(() => availableLocales.value.length > 1);
+
+const findLocale = (code: string): LocaleMeta | undefined =>
+    availableLocales.value.find((locale) => locale.code === code);
+
+const labelOf = (code: string): string => findLocale(code)?.label || code.split(/[-_]/)[0].toUpperCase();
+
+const directionOf = (code: string): string => findLocale(code)?.direction || 'ltr';
+
+const isLocaleRequired = (code: string): boolean =>
+    props.requiredLocales ? props.requiredLocales.includes(code) : !!props.required;
+
+// Parse whatever the server/parent hands us into a dict with every allowed locale present
+const parseTranslations = (value: unknown): Translations => {
+    let dict: Record<string, unknown> = {};
+
+    if (value && typeof value === 'object' && !Array.isArray(value)) {
+        dict = value as Record<string, unknown>;
+    } else if (typeof value === 'string' && value !== '') {
+        try {
+            const parsed = value.trim().startsWith('{') ? JSON.parse(value) : null;
+            dict = parsed && typeof parsed === 'object' ? parsed : { [preferredActive()]: value };
+        } catch {
+            dict = { [preferredActive()]: value };
+        }
+    }
+
+    return Object.fromEntries(
+        localeCodes.value.map((code) => [code, dict[code] == null ? '' : String(dict[code])]),
+    );
+};
+
+// Pick the main input's locale: the requested one if allowed, else the first allowed locale
+function preferredActive(): string {
+    const codes = localeCodes.value;
+    if (props.activeLocale && codes.includes(props.activeLocale)) return props.activeLocale;
+    return codes[0] ?? props.activeLocale ?? 'en';
+}
+
+const localValue = ref<Translations>(parseTranslations(props.modelValue ?? props.value));
+const active = ref<string>(preferredActive());
+
+// Sync local value when the prop changes from an external source
+watch(
+    () => props.modelValue ?? props.value,
+    (value) => {
+        const next = parseTranslations(value);
+        if (JSON.stringify(next) !== JSON.stringify(localValue.value)) {
+            localValue.value = next;
+        }
+    },
+);
+
+// Keep the active locale valid when the allowed set or preference changes
+watch([localeCodes, () => props.activeLocale], () => {
+    if (!localeCodes.value.includes(active.value)) {
+        active.value = preferredActive();
+    }
+});
+
+const setLocale = (code: string, value: string) => {
+    localValue.value = { ...localValue.value, [code]: value };
+    emit('update:modelValue', { ...localValue.value });
+};
+
+// Reactive field support (live/lazy): re-evaluate the schema when the value changes
+useReactiveField(props.name, localValue, {
+    isLive: props.isLive,
+    isLazy: props.isLazy,
+    liveDebounce: props.liveDebounce,
+});
+
+// Inject errors from parent
+const errors = inject<ComputedRef<Record<string, string | string[]>>>(
+    'errors',
+    computed(() => ({})),
+);
+
+// Inject dependencies for suffix actions
+const getFormData = inject<(() => Record<string, any>) | undefined>('getFormData', undefined);
+
+const firstError = (key: string): string | null => {
+    const error = errors.value[key];
+    if (!error) return null;
+    return Array.isArray(error) ? error[0] : error;
+};
+
+const localeError = (code: string): string | null => firstError(`${props.name}.${code}`);
+
+const localeHasError = (code: string): boolean => !!localeError(code);
+
+const localeErrorMessage = computed(() => {
+    for (const code of localeCodes.value) {
+        const error = localeError(code);
+        if (error) return `${labelOf(code)}: ${error}`;
+    }
+    return null;
+});
+
+const errorMessage = computed(() => firstError(props.name) || localeErrorMessage.value);
+
+const hasError = computed(() => !!errorMessage.value);
+</script>
diff --git a/resources/js/index.js b/resources/js/index.js
index 4f6c61c..36e9fec 100644
--- a/resources/js/index.js
+++ b/resources/js/index.js
@@ -10,6 +10,7 @@ export { default as FieldWrapper } from './components/FieldWrapper.vue';
 // Export field components
 export { default as TextInput } from './components/fields/TextInput.vue';
 export { default as Textarea } from './components/fields/Textarea.vue';
+export { default as TranslatableInput } from './components/fields/TranslatableInput.vue';
 export { default as Select } from './components/fields/Select.vue';
 export { default as Checkbox } from './components/fields/Checkbox.vue';
 export { default as CheckboxList } from './components/fields/CheckboxList.vue';
@@ -46,6 +47,7 @@ import LaraviltForm from './components/Form.vue';
 import LaraviltFieldWrapper from './components/FieldWrapper.vue';
 import LaraviltTextInput from './components/fields/TextInput.vue';
 import LaraviltTextarea from './components/fields/Textarea.vue';
+import LaraviltTranslatableInput from './components/fields/TranslatableInput.vue';
 import LaraviltSelect from './components/fields/Select.vue';
 import LaraviltCheckbox from './components/fields/Checkbox.vue';
 import LaraviltCheckboxList from './components/fields/CheckboxList.vue';
@@ -82,6 +84,7 @@ if (typeof window !== 'undefined' && window.Vue) {
         FieldWrapper: LaraviltFieldWrapper,
         TextInput: LaraviltTextInput,
         Textarea: LaraviltTextarea,
+        TranslatableInput: LaraviltTranslatableInput,
         Select: LaraviltSelect,
         Checkbox: LaraviltCheckbox,
         CheckboxList: LaraviltCheckboxList,
@@ -128,6 +131,7 @@ export default {
         // Field components
         app.component('laravilt-text-input', LaraviltTextInput);
         app.component('laravilt-textarea', LaraviltTextarea);
+        app.component('laravilt-translatable-input', LaraviltTranslatableInput);
         app.component('laravilt-select', LaraviltSelect);
         app.component('laravilt-checkbox', LaraviltCheckbox);
         app.component('laravilt-checkbox-list', LaraviltCheckboxList);
diff --git a/resources/react/app.ts b/resources/react/app.ts
index 737068a..dd11782 100644
--- a/resources/react/app.ts
+++ b/resources/react/app.ts
@@ -26,6 +26,7 @@ import Slider from './components/fields/Slider';
 import TagsInput from './components/fields/TagsInput';
 import TextInput from './components/fields/TextInput';
 import Textarea from './components/fields/Textarea';
+import TranslatableInput from './components/fields/TranslatableInput';
 import TimePicker from './components/fields/TimePicker';
 import Toggle from './components/fields/Toggle';
 import ToggleButtons from './components/fields/ToggleButtons';
@@ -45,6 +46,7 @@ export default {
             // Field components
             'laravilt-text-input': TextInput,
             'laravilt-textarea': Textarea,
+            'laravilt-translatable-input': TranslatableInput,
             'laravilt-select': Select,
             'laravilt-checkbox': Checkbox,
             'laravilt-checkbox-list': CheckboxList,
diff --git a/resources/react/components-only.ts b/resources/react/components-only.ts
index 3a04bd4..45d8d0f 100644
--- a/resources/react/components-only.ts
+++ b/resources/react/components-only.ts
@@ -28,6 +28,7 @@ import LaraviltSlider from './components/fields/Slider';
 import LaraviltTagsInput from './components/fields/TagsInput';
 import LaraviltTextInput from './components/fields/TextInput';
 import LaraviltTextarea from './components/fields/Textarea';
+import LaraviltTranslatableInput from './components/fields/TranslatableInput';
 import LaraviltTimePicker from './components/fields/TimePicker';
 import LaraviltToggle from './components/fields/Toggle';
 import LaraviltToggleButtons from './components/fields/ToggleButtons';
@@ -46,6 +47,7 @@ export default {
             // Field components
             'laravilt-text-input': LaraviltTextInput,
             'laravilt-textarea': LaraviltTextarea,
+            'laravilt-translatable-input': LaraviltTranslatableInput,
             'laravilt-select': LaraviltSelect,
             'laravilt-checkbox': LaraviltCheckbox,
             'laravilt-checkbox-list': LaraviltCheckboxList,
diff --git a/resources/react/components/fields/TranslatableInput.tsx b/resources/react/components/fields/TranslatableInput.tsx
new file mode 100644
index 0000000..272829d
--- /dev/null
+++ b/resources/react/components/fields/TranslatableInput.tsx
@@ -0,0 +1,416 @@
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { Textarea as UiTextarea } from '@/components/ui/textarea';
+import { cn } from '@/lib/utils';
+import ActionButton from '@laravilt/actions/components/ActionButton';
+import { useErrors, useSchemaContext } from '@laravilt/support/composables/contexts';
+import { useLocalization } from '@laravilt/support/composables/useLocalization';
+import { Globe } from 'lucide-react';
+import { useEffect, useMemo, useRef, useState, type ReactNode } from 'react';
+import { useReactiveField } from '../../composables/useReactiveField';
+import FieldWrapper from '../FieldWrapper';
+
+/** Locale metadata as serialized by TranslatableInput::toLaraviltProps(). */
+export interface TranslatableLocale {
+    code: string;
+    name?: string;
+    label?: string;
+    direction?: 'ltr' | 'rtl' | string;
+}
+
+export type Translations = Record<string, string>;
+
+export interface TranslatableInputSlotScope {
+    id: string;
+    name: string;
+    translations: Translations;
+    activeLocale: string;
+    locales: TranslatableLocale[];
+    multiline?: boolean;
+    rows?: number;
+    placeholder?: string;
+    readonly?: boolean;
+    maxLength?: number;
+    hasError: boolean;
+    setLocale: (code: string, value: string) => void;
+    extraAttributes?: Record<string, any>;
+}
+
+export interface TranslatableInputProps {
+    id?: string;
+    name: string;
+    label?: string;
+    placeholder?: string;
+    hint?: string;
+    required?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    helperText?: string;
+    value?: Translations | string | null;
+    modelValue?: Translations | string | null;
+    /** Allowed locales: metadata objects from PHP, or plain locale codes. */
+    locales?: (TranslatableLocale | string)[];
+    /** Locale edited by the main (collapsed) input. */
+    activeLocale?: string;
+    requiredLocales?: string[];
+    multiline?: boolean;
+    rows?: number;
+    maxLength?: number;
+    extraAttributes?: Record<string, any>;
+    hidden?: boolean;
+    columnSpan?: number | string;
+    hintActions?: any[];
+    prefixActions?: any[];
+    suffixActions?: any[];
+    isLive?: boolean;
+    isLazy?: boolean;
+    liveDebounce?: number;
+    onUpdateModelValue?: (value: Translations) => void;
+    onUpdateValue?: (value: Translations) => void;
+    /** Scoped default slot (Blade mode). */
+    children?: (scope: TranslatableInputSlotScope) => ReactNode;
+    [key: string]: any;
+}
+
+// Split `class` out of server-provided extra attributes so React receives `className`
+const splitExtraAttributes = (extraAttributes?: Record<string, any>) => {
+    if (!extraAttributes) {
+        return { attributes: {}, className: undefined as string | undefined };
+    }
+    const { class: klass, className, ...attributes } = extraAttributes;
+    return { attributes, className: cn(klass, className) || undefined };
+};
+
+// Normalize the locale list: plain codes become minimal metadata objects
+const normalizeLocales = (locales?: (TranslatableLocale | string)[], activeLocale?: string): TranslatableLocale[] => {
+    const list = (locales || [])
+        .map((locale) => (typeof locale === 'string' ? { code: locale } : locale))
+        .filter((locale): locale is TranslatableLocale => !!locale && !!locale.code);
+
+    if (list.length) {
+        return list;
+    }
+
+    // No metadata from the server: fall back to the active locale so the field still works
+    return [{ code: activeLocale || 'en' }];
+};
+
+// Pick the main input's locale: the requested one if allowed, else the first allowed locale
+const preferredActive = (codes: string[], activeLocale?: string): string => {
+    if (activeLocale && codes.includes(activeLocale)) return activeLocale;
+    return codes[0] ?? activeLocale ?? 'en';
+};
+
+// Parse whatever the server/parent hands us into a dict with every allowed locale present
+const parseTranslations = (value: unknown, codes: string[], fallbackLocale: string): Translations => {
+    let dict: Record<string, unknown> = {};
+
+    if (value && typeof value === 'object' && !Array.isArray(value)) {
+        dict = value as Record<string, unknown>;
+    } else if (typeof value === 'string' && value !== '') {
+        try {
+            const parsed = value.trim().startsWith('{') ? JSON.parse(value) : null;
+            dict = parsed && typeof parsed === 'object' ? parsed : { [fallbackLocale]: value };
+        } catch {
+            dict = { [fallbackLocale]: value };
+        }
+    }
+
+    return Object.fromEntries(codes.map((code) => [code, dict[code] == null ? '' : String(dict[code])]));
+};
+
+export default function TranslatableInput(props: TranslatableInputProps) {
+    const {
+        id,
+        name,
+        label,
+        placeholder,
+        hint,
+        required,
+        disabled,
+        readonly,
+        helperText,
+        value,
+        modelValue,
+        locales,
+        activeLocale,
+        requiredLocales,
+        multiline,
+        rows,
+        maxLength,
+        extraAttributes,
+        hidden,
+        columnSpan,
+        hintActions,
+        prefixActions,
+        suffixActions,
+        isLive,
+        isLazy,
+        liveDebounce,
+        onUpdateModelValue,
+        onUpdateValue,
+        children,
+    } = props;
+
+    const { trans } = useLocalization();
+
+    const availableLocales = useMemo(() => normalizeLocales(locales, activeLocale), [locales, activeLocale]);
+    const localeCodes = useMemo(() => availableLocales.map((locale) => locale.code), [availableLocales]);
+    const hasLocaleSwitcher = availableLocales.length > 1;
+
+    const findLocale = (code: string) => availableLocales.find((locale) => locale.code === code);
+    const labelOf = (code: string) => findLocale(code)?.label || code.split(/[-_]/)[0].toUpperCase();
+    const directionOf = (code: string) => findLocale(code)?.direction || 'ltr';
+    const isLocaleRequired = (code: string) => (requiredLocales ? requiredLocales.includes(code) : !!required);
+
+    const incoming = modelValue ?? value;
+
+    const [active, setActive] = useState<string>(() => preferredActive(localeCodes, activeLocale));
+    const [localValue, setLocalValueState] = useState<Translations>(() =>
+        parseTranslations(incoming, localeCodes, preferredActive(localeCodes, activeLocale)),
+    );
+    const localValueRef = useRef<Translations>(localValue);
+    const setLocalValue = (next: Translations) => {
+        localValueRef.current = next;
+        setLocalValueState(next);
+    };
+
+    // Sync local value when the prop changes from an external source (Vue: watch on modelValue/value)
+    const incomingKey = typeof incoming === 'string' ? incoming : JSON.stringify(incoming ?? null);
+    useEffect(() => {
+        const next = parseTranslations(incoming, localeCodes, preferredActive(localeCodes, activeLocale));
+        if (JSON.stringify(next) !== JSON.stringify(localValueRef.current)) {
+            setLocalValue(next);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [incomingKey, localeCodes]);
+
+    // Keep the active locale valid when the allowed set or preference changes
+    useEffect(() => {
+        if (!localeCodes.includes(active)) {
+            setActive(preferredActive(localeCodes, activeLocale));
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [localeCodes, activeLocale]);
+
+    const setLocale = (code: string, next: string) => {
+        const translations = { ...localValueRef.current, [code]: next };
+        setLocalValue(translations);
+        onUpdateModelValue?.({ ...translations });
+        onUpdateValue?.({ ...translations });
+    };
+
+    // Reactive field support (live/lazy): re-evaluate the schema when the value changes
+    useReactiveField(name, localValue, { isLive, isLazy, liveDebounce });
+
+    // Dependencies for suffix actions (Vue: inject('getFormData'))
+    const { getFormData } = useSchemaContext();
+
+    // Errors from parent (Vue: inject('errors')), including per-locale keys (name.en, name.ar, ...)
+    const errors = useErrors() || {};
+    const firstError = (key: string): string | null => {
+        const error = (errors as Record<string, string | string[]>)[key];
+        if (!error) return null;
+        return Array.isArray(error) ? error[0] : error;
+    };
+    const localeError = (code: string) => firstError(`${name}.${code}`);
+    const localeHasError = (code: string) => !!localeError(code);
+    const localeErrorMessage = (() => {
+        for (const code of localeCodes) {
+            const error = localeError(code);
+            if (error) return `${labelOf(code)}: ${error}`;
+        }
+        return null;
+    })();
+    const errorMessage = firstError(name) || localeErrorMessage;
+    const hasError = !!errorMessage;
+
+    // Use slot if provided (Blade mode), otherwise use internal template (Direct usage)
+    if (children) {
+        return (
+            <>
+                {children({
+                    id: id || name,
+                    name,
+                    translations: localValue,
+                    activeLocale: active,
+                    locales: availableLocales,
+                    multiline,
+                    rows,
+                    placeholder,
+                    readonly,
+                    maxLength,
+                    hasError,
+                    setLocale,
+                    extraAttributes,
+                })}
+            </>
+        );
+    }
+
+    const extra = splitExtraAttributes(extraAttributes);
+    const fieldId = id || name;
+
+    const mainClassName = cn(
+        'w-full',
+        extra.className,
+        hasError ? 'border-destructive focus-visible:ring-destructive' : '',
+        hasLocaleSwitcher ? 'pe-12' : '',
+    );
+
+    return (
+        <FieldWrapper
+            id={id}
+            name={name}
+            label={label}
+            helperText={helperText}
+            hint={hint}
+            required={required}
+            disabled={disabled}
+            hidden={hidden}
+            columnSpan={columnSpan}
+            hintActions={hintActions}
+        >
+            <div className="relative flex items-center gap-2">
+                {/* Prefix Actions */}
+                {prefixActions && prefixActions.length > 0 && (
+                    <div className="flex items-center gap-1">
+                        {prefixActions.map((action: any) => (
+                            <ActionButton key={action.name} {...(action as any)} />
+                        ))}
+                    </div>
+                )}
+
+                {/* The wrapper takes the active locale's direction so the globe (end) and the input's end padding agree */}
+                <div className="relative flex flex-1 items-center" dir={directionOf(active)}>
+                    {/* Main input edits the active locale */}
+                    {multiline ? (
+                        <UiTextarea
+                            id={fieldId}
+                            value={localValue[active] ?? ''}
+                            onChange={(e) => setLocale(active, e.target.value)}
+                            placeholder={placeholder}
+                            rows={rows}
+                            maxLength={maxLength}
+                            disabled={disabled}
+                            readOnly={readonly}
+                            dir={directionOf(active)}
+                            {...extra.attributes}
+                            className={mainClassName}
+                            aria-invalid={hasError ? 'true' : 'false'}
+                            aria-describedby={hasError ? `${name}-error` : undefined}
+                        />
+                    ) : (
+                        <Input
+                            id={fieldId}
+                            type="text"
+                            value={localValue[active] ?? ''}
+                            onChange={(e) => setLocale(active, e.target.value)}
+                            placeholder={placeholder}
+                            required={required}
+                            disabled={disabled}
+                            readOnly={readonly}
+                            maxLength={maxLength}
+                            dir={directionOf(active)}
+                            {...extra.attributes}
+                            className={mainClassName}
+                            aria-invalid={hasError ? 'true' : 'false'}
+                            aria-describedby={hasError ? `${name}-error` : undefined}
+                        />
+                    )}
+
+                    {/* Globe button opens the per-locale popover (hidden with a single locale) */}
+                    {hasLocaleSwitcher && (
+                        <Popover>
+                            <PopoverTrigger asChild>
+                                <button
+                                    type="button"
+                                    className={cn(
+                                        'absolute end-1.5 flex items-center gap-0.5 text-muted-foreground transition-colors hover:text-foreground disabled:pointer-events-none disabled:opacity-50',
+                                        multiline ? 'top-2' : 'top-1/2 -translate-y-1/2',
+                                    )}
+                                    disabled={disabled}
+                                    aria-label={trans('forms::forms.translatable_input.translations')}
+                                    tabIndex={-1}
+                                >
+                                    <Globe className="h-3.5 w-3.5" />
+                                    <span className="text-[9px] font-bold uppercase tracking-wide">{labelOf(active)}</span>
+                                </button>
+                            </PopoverTrigger>
+                            <PopoverContent className="w-72 space-y-2.5 p-3" align="end">
+                                <p className="text-[10px] font-semibold uppercase tracking-[0.12em] text-muted-foreground">
+                                    {trans('forms::forms.translatable_input.translations')}
+                                </p>
+                                {availableLocales.map((locale) => (
+                                    <div key={locale.code} className="space-y-1">
+                                        <Label
+                                            htmlFor={`${fieldId}-${locale.code}`}
+                                            className="flex items-center justify-between text-xs text-muted-foreground"
+                                        >
+                                            <span>{locale.name || locale.code}</span>
+                                            <span className="text-[9px] font-bold uppercase">
+                                                {locale.label || locale.code}
+                                                {isLocaleRequired(locale.code) && <span className="text-destructive">*</span>}
+                                            </span>
+                                        </Label>
+                                        {multiline ? (
+                                            <UiTextarea
+                                                id={`${fieldId}-${locale.code}`}
+                                                value={localValue[locale.code] ?? ''}
+                                                onChange={(e) => setLocale(locale.code, e.target.value)}
+                                                rows={rows}
+                                                maxLength={maxLength}
+                                                disabled={disabled}
+                                                readOnly={readonly}
+                                                dir={locale.direction || 'ltr'}
+                                                className={cn(
+                                                    localeHasError(locale.code) ? 'border-destructive focus-visible:ring-destructive' : '',
+                                                )}
+                                            />
+                                        ) : (
+                                            <Input
+                                                id={`${fieldId}-${locale.code}`}
+                                                type="text"
+                                                value={localValue[locale.code] ?? ''}
+                                                onChange={(e) => setLocale(locale.code, e.target.value)}
+                                                maxLength={maxLength}
+                                                disabled={disabled}
+                                                readOnly={readonly}
+                                                dir={locale.direction || 'ltr'}
+                                                className={cn(
+                                                    localeHasError(locale.code) ? 'border-destructive focus-visible:ring-destructive' : '',
+                                                )}
+                                            />
+                                        )}
+                                        {localeError(locale.code) && (
+                                            <p className="text-xs text-destructive">{localeError(locale.code)}</p>
+                                        )}
+                                    </div>
+                                ))}
+                            </PopoverContent>
+                        </Popover>
+                    )}
+                </div>
+
+                {/* Suffix Actions */}
+                {suffixActions && suffixActions.length > 0 && (
+                    <div className="flex items-center gap-1">
+                        {suffixActions.map((action: any) => (
+                            <ActionButton key={action.name} {...({ ...action, getFormData } as any)} />
+                        ))}
+                    </div>
+                )}
+            </div>
+
+            {/* Per-locale errors (name.en, ...) are not shown by FieldWrapper, so surface the first one here */}
+            {localeErrorMessage && <p className="mt-1.5 text-xs text-destructive">{localeErrorMessage}</p>}
+
+            {/* Hidden inputs so native (non-Inertia) form posts submit every locale */}
+            {name &&
+                availableLocales.map((locale) => (
+                    <input key={locale.code} type="hidden" name={`${name}[${locale.code}]`} value={localValue[locale.code] ?? ''} />
+                ))}
+        </FieldWrapper>
+    );
+}
diff --git a/resources/react/index.ts b/resources/react/index.ts
index 36ff5ae..b96d86f 100644
--- a/resources/react/index.ts
+++ b/resources/react/index.ts
@@ -29,6 +29,7 @@ import LaraviltSlider from './components/fields/Slider';
 import LaraviltTagsInput from './components/fields/TagsInput';
 import LaraviltTextInput from './components/fields/TextInput';
 import LaraviltTextarea from './components/fields/Textarea';
+import LaraviltTranslatableInput from './components/fields/TranslatableInput';
 import LaraviltTimePicker from './components/fields/TimePicker';
 import LaraviltToggle from './components/fields/Toggle';
 import LaraviltToggleButtons from './components/fields/ToggleButtons';
@@ -65,6 +66,7 @@ export { default as Slider } from './components/fields/Slider';
 export { default as TagsInput } from './components/fields/TagsInput';
 export { default as TextInput } from './components/fields/TextInput';
 export { default as Textarea } from './components/fields/Textarea';
+export { default as TranslatableInput } from './components/fields/TranslatableInput';
 export { default as TimePicker } from './components/fields/TimePicker';
 export { default as Toggle } from './components/fields/Toggle';
 export { default as ToggleButtons } from './components/fields/ToggleButtons';
@@ -88,6 +90,7 @@ export default {
             // Field components
             'laravilt-text-input': LaraviltTextInput,
             'laravilt-textarea': LaraviltTextarea,
+            'laravilt-translatable-input': LaraviltTranslatableInput,
             'laravilt-select': LaraviltSelect,
             'laravilt-checkbox': LaraviltCheckbox,
             'laravilt-checkbox-list': LaraviltCheckboxList,
diff --git a/resources/views/components/fields/translatable-input.blade.php b/resources/views/components/fields/translatable-input.blade.php
new file mode 100644
index 0000000..5ba0958
--- /dev/null
+++ b/resources/views/components/fields/translatable-input.blade.php
@@ -0,0 +1,10 @@
+@props(['component'])
+
+@php
+    $props = $component->toLaraviltProps();
+@endphp
+
+<x-laravilt-vue-component
+    component="TranslatableInput"
+    :props="$props"
+/>
diff --git a/src/Components/TranslatableInput.php b/src/Components/TranslatableInput.php
new file mode 100644
index 0000000..acdc5e1
--- /dev/null
+++ b/src/Components/TranslatableInput.php
@@ -0,0 +1,294 @@
+<?php
+
+namespace Laravilt\Forms\Components;
+
+use Closure;
+use Laravilt\Forms\Support\Locales;
+
+/**
+ * Translatable Input Field
+ *
+ * A multi-language text field whose value is an array keyed by locale code,
+ * e.g. ['en' => 'Title', 'ar' => 'العنوان']. Supports:
+ * - Single-line or multiline (textarea) editing
+ * - Explicit, config-driven or app-locale based locale lists
+ * - Per-locale validation rules (name.en, name.ar, ...)
+ * - Hydration from JSON strings, arrays or null
+ */
+class TranslatableInput extends Field
+{
+    protected string $view = 'laravilt-forms::components.fields.translatable-input';
+
+    protected bool|Closure $multiline = false;
+
+    protected ?int $rows = 3;
+
+    protected array|Closure|null $locales = null;
+
+    protected string|Closure|null $activeLocale = null;
+
+    protected ?array $requiredLocales = null;
+
+    protected ?int $maxLength = null;
+
+    /**
+     * Render a textarea per locale instead of a single-line input.
+     */
+    public function multiline(bool|Closure $condition = true): static
+    {
+        $this->multiline = $condition;
+
+        return $this;
+    }
+
+    /**
+     * Check if the field is multiline.
+     */
+    public function isMultiline(): bool
+    {
+        return (bool) $this->evaluate($this->multiline);
+    }
+
+    /**
+     * Set the number of rows (multiline only).
+     */
+    public function rows(int $rows): static
+    {
+        $this->rows = $rows;
+
+        return $this;
+    }
+
+    /**
+     * Get the number of rows.
+     */
+    public function getRows(): ?int
+    {
+        return $this->rows;
+    }
+
+    /**
+     * Restrict the editable locales: plain codes or code => metadata, like the config key.
+     */
+    public function locales(array|Closure $locales): static
+    {
+        $this->locales = $locales;
+
+        return $this;
+    }
+
+    /**
+     * Get the allowed locales.
+     *
+     * Resolution order: explicit locales(), config('laravilt-forms.locales'), app locale.
+     */
+    public function getLocales(): array
+    {
+        $codes = Locales::codes($this->evaluate($this->locales));
+
+        return $codes === [] ? Locales::default() : $codes;
+    }
+
+    /**
+     * Set the locale edited by the main (collapsed) input.
+     */
+    public function activeLocale(string|Closure $locale): static
+    {
+        $this->activeLocale = $locale;
+
+        return $this;
+    }
+
+    /**
+     * Get the active locale: the requested one if allowed, else the app locale
+     * if allowed, else the first allowed locale.
+     */
+    public function getActiveLocale(): string
+    {
+        $locales = $this->getLocales();
+        $requested = $this->evaluate($this->activeLocale);
+
+        if (is_string($requested) && in_array($requested, $locales, true)) {
+            return $requested;
+        }
+
+        $appLocale = app()->getLocale();
+
+        if (in_array($appLocale, $locales, true)) {
+            return $appLocale;
+        }
+
+        return $locales[0];
+    }
+
+    /**
+     * Set the locales that must be filled in. Defaults to every allowed locale
+     * when the field is required().
+     */
+    public function requiredLocales(array $locales): static
+    {
+        $this->requiredLocales = array_values(array_map('strval', $locales));
+
+        return $this;
+    }
+
+    /**
+     * Get the locales that must be filled in.
+     */
+    public function getRequiredLocales(): array
+    {
+        $locales = $this->getLocales();
+
+        if ($this->requiredLocales !== null) {
+            return array_values(array_intersect($this->requiredLocales, $locales));
+        }
+
+        return $this->isRequired() ? $locales : [];
+    }
+
+    /**
+     * Set maximum length per locale.
+     *
+     * Applied per locale key, so the base 'max' rule is intentionally not added
+     * (on an array value it would validate the item count instead).
+     */
+    public function maxLength(int $length): static
+    {
+        $this->maxLength = $length;
+
+        return $this;
+    }
+
+    /**
+     * Get maximum length.
+     */
+    public function getMaxLength(): ?int
+    {
+        return $this->maxLength;
+    }
+
+    /**
+     * Get validation rules keyed by locale: name.en, name.ar, ...
+     */
+    public function getValidationRules(): array
+    {
+        $name = $this->getName();
+        $required = $this->getRequiredLocales();
+        $extra = $this->getExtraValidationRules();
+
+        $rules = [
+            $name => [$required === [] ? 'nullable' : 'required', 'array'],
+        ];
+
+        foreach ($this->getLocales() as $locale) {
+            $localeRules = [in_array($locale, $required, true) ? 'required' : 'nullable', 'string'];
+
+            if ($this->maxLength !== null) {
+                $localeRules[] = "max:{$this->maxLength}";
+            }
+
+            $rules["{$name}.{$locale}"] = array_values(array_unique(array_merge($localeRules, $extra), SORT_REGULAR));
+        }
+
+        return $rules;
+    }
+
+    /**
+     * Rules added via rules() / addRules(), minus the presence rules handled per locale.
+     */
+    protected function getExtraValidationRules(): array
+    {
+        $rules = parent::getValidationRules();
+
+        if ($rules === null || $rules === '' || $rules === []) {
+            return [];
+        }
+
+        if (is_string($rules)) {
+            $rules = explode('|', $rules);
+        }
+
+        return array_values(array_filter($rules, fn ($rule) => ! in_array($rule, ['required', 'nullable', 'string'], true)));
+    }
+
+    /**
+     * Get the current value, always as an array with every allowed locale present.
+     */
+    public function getValue(): mixed
+    {
+        return $this->normalizeTranslations(parent::getValue());
+    }
+
+    /**
+     * Hydrate from a JSON string, an array or null.
+     */
+    public function hydrateState(mixed $state): mixed
+    {
+        return $this->normalizeTranslations(parent::hydrateState($state));
+    }
+
+    /**
+     * Dehydrate to an array keyed by locale.
+     */
+    public function dehydrateState(mixed $state): mixed
+    {
+        return parent::dehydrateState($this->normalizeTranslations($state));
+    }
+
+    /**
+     * Normalise any input into [locale => string] with every allowed locale present.
+     */
+    public function normalizeTranslations(mixed $state): array
+    {
+        $translations = [];
+
+        if (is_string($state)) {
+            $decoded = json_decode($state, true);
+
+            if (is_array($decoded)) {
+                $translations = $decoded;
+            } elseif ($state !== '') {
+                $translations = [$this->getActiveLocale() => $state];
+            }
+        } elseif (is_array($state)) {
+            $translations = $state;
+        } elseif (is_object($state) && method_exists($state, 'toArray')) {
+            $translations = $state->toArray();
+        }
+
+        $normalized = [];
+
+        foreach ($this->getLocales() as $locale) {
+            $value = $translations[$locale] ?? '';
+
+            $normalized[$locale] = is_scalar($value) ? (string) $value : '';
+        }
+
+        return $normalized;
+    }
+
+    /**
+     * Get the locale metadata for the frontend.
+     *
+     * @return array<int, array{code: string, name: string, label: string, direction: string}>
+     */
+    public function getLocaleMetadata(): array
+    {
+        return Locales::metadata($this->getLocales());
+    }
+
+    /**
+     * Serialize component for Laravilt (Blade + Vue.js).
+     */
+    public function toLaraviltProps(): array
+    {
+        return array_merge(parent::toLaraviltProps(), [
+            'locales' => $this->getLocaleMetadata(),
+            'activeLocale' => $this->getActiveLocale(),
+            'requiredLocales' => $this->getRequiredLocales(),
+            'multiline' => $this->isMultiline(),
+            'rows' => $this->getRows(),
+            'maxLength' => $this->getMaxLength(),
+        ]);
+    }
+}
diff --git a/src/FormsServiceProvider.php b/src/FormsServiceProvider.php
index 9324cad..053a155 100644
--- a/src/FormsServiceProvider.php
+++ b/src/FormsServiceProvider.php
@@ -21,6 +21,7 @@
 use Laravilt\Forms\Components\TextInput;
 use Laravilt\Forms\Components\TimePicker;
 use Laravilt\Forms\Components\Toggle;
+use Laravilt\Forms\Components\TranslatableInput;
 use Laravilt\Forms\View\Components\FieldWrapper;
 use Laravilt\Forms\View\Components\Form;
 
@@ -105,6 +106,7 @@ protected function registerBladeComponents(): void
             // Basic Fields
             TextInput::class,
             Textarea::class,
+            TranslatableInput::class,
             Select::class,
             Checkbox::class,
             Radio::class,
diff --git a/src/Support/Locales.php b/src/Support/Locales.php
new file mode 100644
index 0000000..c9f2154
--- /dev/null
+++ b/src/Support/Locales.php
@@ -0,0 +1,124 @@
+<?php
+
+namespace Laravilt\Forms\Support;
+
+/**
+ * Locale metadata helper for translatable fields.
+ *
+ * Locales are defined in config/laravilt-forms.php under "locales", either as
+ * plain codes or as code => ['name' => ..., 'direction' => ..., 'label' => ...].
+ * This helper normalises both shapes into the metadata the frontend needs.
+ * A code without metadata gets its own code as the name, the uppercased base
+ * code as the label and "ltr" as the direction.
+ */
+class Locales
+{
+    /**
+     * Locale codes from config('laravilt-forms.locales'), falling back to the app locale.
+     */
+    public static function default(): array
+    {
+        $codes = static::codes(config('laravilt-forms.locales'));
+
+        return $codes === [] ? [app()->getLocale()] : $codes;
+    }
+
+    /**
+     * Extract locale codes from either config shape: ['en', 'ar'] or ['en' => [...]].
+     */
+    public static function codes(mixed $locales): array
+    {
+        if (! is_array($locales)) {
+            return [];
+        }
+
+        $codes = [];
+
+        foreach ($locales as $key => $value) {
+            $code = is_string($key) ? $key : $value;
+
+            if (is_string($code) && $code !== '') {
+                $codes[] = $code;
+            }
+        }
+
+        return array_values(array_unique($codes));
+    }
+
+    /**
+     * Metadata for a locale as configured in laravilt-forms.locales, if any.
+     */
+    public static function configured(string $locale): array
+    {
+        $locales = config('laravilt-forms.locales');
+
+        if (! is_array($locales)) {
+            return [];
+        }
+
+        $meta = $locales[$locale] ?? null;
+
+        return is_array($meta) ? $meta : [];
+    }
+
+    /**
+     * Native name from config, else the code itself.
+     */
+    public static function name(string $locale): string
+    {
+        $name = static::configured($locale)['name'] ?? null;
+
+        return is_string($name) && $name !== '' ? $name : $locale;
+    }
+
+    /**
+     * Short label from config, else the base code uppercased ("en-US" => "EN").
+     */
+    public static function label(string $locale): string
+    {
+        $label = static::configured($locale)['label'] ?? null;
+
+        return is_string($label) && $label !== '' ? $label : strtoupper(static::base($locale));
+    }
+
+    /**
+     * Text direction from config ('rtl' or 'ltr'), else 'ltr'.
+     */
+    public static function direction(string $locale): string
+    {
+        return static::isRtl($locale) ? 'rtl' : 'ltr';
+    }
+
+    /**
+     * Check if a locale is configured as right-to-left.
+     */
+    public static function isRtl(string $locale): bool
+    {
+        $direction = static::configured($locale)['direction'] ?? null;
+
+        return is_string($direction) && strtolower($direction) === 'rtl';
+    }
+
+    /**
+     * Frontend metadata for a list of locale codes.
+     *
+     * @return array<int, array{code: string, name: string, label: string, direction: string}>
+     */
+    public static function metadata(array $locales): array
+    {
+        return array_values(array_map(fn (string $locale) => [
+            'code' => $locale,
+            'name' => static::name($locale),
+            'label' => static::label($locale),
+            'direction' => static::direction($locale),
+        ], static::codes($locales)));
+    }
+
+    /**
+     * Base language code: "ar_EG" / "ar-EG" => "ar".
+     */
+    public static function base(string $locale): string
+    {
+        return strtolower(explode('-', explode('_', $locale)[0])[0]);
+    }
+}
diff --git a/tests/Unit/TranslatableInputTest.php b/tests/Unit/TranslatableInputTest.php
new file mode 100644
index 0000000..30639c7
--- /dev/null
+++ b/tests/Unit/TranslatableInputTest.php
@@ -0,0 +1,221 @@
+<?php
+
+use Laravilt\Forms\Components\TranslatableInput;
+use Laravilt\Forms\Support\Locales;
+
+beforeEach(function () {
+    config()->set('laravilt-forms.locales', [
+        'en' => ['name' => 'English', 'direction' => 'ltr'],
+        'ar' => ['name' => 'العربية', 'direction' => 'rtl'],
+        'ckb' => ['name' => 'کوردی', 'direction' => 'rtl'],
+    ]);
+
+    $this->input = TranslatableInput::make('name');
+});
+
+it('can be instantiated with make method', function () {
+    $input = TranslatableInput::make('title');
+
+    expect($input)->toBeInstanceOf(TranslatableInput::class)
+        ->and($input->getName())->toBe('title');
+});
+
+it('uses the locales from config by default', function () {
+    expect($this->input->getLocales())->toBe(['en', 'ar', 'ckb']);
+});
+
+it('falls back to the app locale when config has no locales', function () {
+    config()->set('laravilt-forms.locales', []);
+    app()->setLocale('fr');
+
+    expect($this->input->getLocales())->toBe(['fr']);
+});
+
+it('can set explicit locales', function () {
+    $this->input->locales(['en', 'fr']);
+
+    expect($this->input->getLocales())->toBe(['en', 'fr']);
+});
+
+it('can set locales from a closure', function () {
+    $this->input->locales(fn () => ['de']);
+
+    expect($this->input->getLocales())->toBe(['de']);
+});
+
+it('resolves the active locale', function () {
+    app()->setLocale('ar');
+
+    expect($this->input->getActiveLocale())->toBe('ar');
+
+    $this->input->activeLocale('ckb');
+
+    expect($this->input->getActiveLocale())->toBe('ckb');
+
+    $this->input->activeLocale('fr');
+
+    expect($this->input->getActiveLocale())->toBe('ar');
+
+    app()->setLocale('fr');
+
+    expect($this->input->getActiveLocale())->toBe('en');
+});
+
+it('is single-line by default', function () {
+    expect($this->input->isMultiline())->toBeFalse()
+        ->and($this->input->toArray()['multiline'])->toBeFalse();
+});
+
+it('can be multiline with rows', function () {
+    $this->input->multiline()->rows(5);
+
+    $props = $this->input->toArray();
+
+    expect($this->input->isMultiline())->toBeTrue()
+        ->and($props['multiline'])->toBeTrue()
+        ->and($props['rows'])->toBe(5);
+});
+
+it('exposes locale metadata to the frontend', function () {
+    $props = $this->input->toArray();
+
+    expect($props['locales'])->toBe([
+        ['code' => 'en', 'name' => 'English', 'label' => 'EN', 'direction' => 'ltr'],
+        ['code' => 'ar', 'name' => 'العربية', 'label' => 'AR', 'direction' => 'rtl'],
+        ['code' => 'ckb', 'name' => 'کوردی', 'label' => 'CKB', 'direction' => 'rtl'],
+    ])->and($props['activeLocale'])->toBe('en');
+});
+
+it('supports a custom label and defaults for missing metadata', function () {
+    config()->set('laravilt-forms.locales', [
+        'ckb' => ['name' => 'سۆرانی', 'direction' => 'rtl', 'label' => 'KU'],
+        'xx' => ['direction' => 'rtl'],
+        'fr',
+    ]);
+
+    expect($this->input->getLocales())->toBe(['ckb', 'xx', 'fr'])
+        ->and($this->input->toArray()['locales'])->toBe([
+            ['code' => 'ckb', 'name' => 'سۆرانی', 'label' => 'KU', 'direction' => 'rtl'],
+            ['code' => 'xx', 'name' => 'xx', 'label' => 'XX', 'direction' => 'rtl'],
+            ['code' => 'fr', 'name' => 'fr', 'label' => 'FR', 'direction' => 'ltr'],
+        ]);
+});
+
+it('takes direction only from config', function () {
+    config()->set('laravilt-forms.locales', ['ar' => ['direction' => 'ltr'], 'he']);
+
+    expect(Locales::direction('ar'))->toBe('ltr')
+        ->and(Locales::isRtl('ar'))->toBeFalse()
+        ->and(Locales::direction('he'))->toBe('ltr');
+});
+
+it('accepts metadata shaped locales on the field', function () {
+    $this->input->locales(['fr' => ['name' => 'Français'], 'de']);
+
+    expect($this->input->getLocales())->toBe(['fr', 'de']);
+});
+
+it('derives labels from regional codes', function () {
+    config()->set('laravilt-forms.locales', ['ar_EG' => ['name' => 'العربية', 'direction' => 'rtl'], 'en-US']);
+
+    expect(Locales::direction('ar_EG'))->toBe('rtl')
+        ->and(Locales::direction('en-US'))->toBe('ltr')
+        ->and(Locales::label('en-US'))->toBe('EN')
+        ->and(Locales::label('ar_EG'))->toBe('AR')
+        ->and(Locales::name('ar_EG'))->toBe('العربية');
+});
+
+it('builds nullable validation rules per locale by default', function () {
+    expect($this->input->getValidationRules())->toBe([
+        'name' => ['nullable', 'array'],
+        'name.en' => ['nullable', 'string'],
+        'name.ar' => ['nullable', 'string'],
+        'name.ckb' => ['nullable', 'string'],
+    ]);
+});
+
+it('requires every locale when the field is required', function () {
+    $this->input->required()->maxLength(50);
+
+    expect($this->input->getValidationRules())->toBe([
+        'name' => ['required', 'array'],
+        'name.en' => ['required', 'string', 'max:50'],
+        'name.ar' => ['required', 'string', 'max:50'],
+        'name.ckb' => ['required', 'string', 'max:50'],
+    ]);
+});
+
+it('can restrict the required locales', function () {
+    $this->input->required()->requiredLocales(['en', 'fr']);
+
+    expect($this->input->getRequiredLocales())->toBe(['en'])
+        ->and($this->input->getValidationRules())->toBe([
+            'name' => ['required', 'array'],
+            'name.en' => ['required', 'string'],
+            'name.ar' => ['nullable', 'string'],
+            'name.ckb' => ['nullable', 'string'],
+        ]);
+});
+
+it('appends custom rules to every locale', function () {
+    $this->input->rules(['min:2']);
+
+    expect($this->input->getValidationRules()['name.ar'])->toBe(['nullable', 'string', 'min:2']);
+});
+
+it('hydrates from a json string', function () {
+    $state = $this->input->hydrateState('{"en":"Hello","ar":"مرحبا"}');
+
+    expect($state)->toBe(['en' => 'Hello', 'ar' => 'مرحبا', 'ckb' => '']);
+});
+
+it('hydrates from an array and fills missing locales', function () {
+    expect($this->input->hydrateState(['ckb' => 'سڵاو']))
+        ->toBe(['en' => '', 'ar' => '', 'ckb' => 'سڵاو']);
+});
+
+it('hydrates null to empty strings for every locale', function () {
+    expect($this->input->hydrateState(null))->toBe(['en' => '', 'ar' => '', 'ckb' => '']);
+});
+
+it('hydrates a plain string into the active locale', function () {
+    app()->setLocale('ar');
+
+    expect($this->input->hydrateState('مرحبا'))->toBe(['en' => '', 'ar' => 'مرحبا', 'ckb' => '']);
+});
+
+it('dehydrates to an array with every locale present', function () {
+    expect($this->input->dehydrateState('{"en":"Hello"}'))->toBe(['en' => 'Hello', 'ar' => '', 'ckb' => ''])
+        ->and($this->input->dehydrateState(['en' => 'Hi', 'fr' => 'Salut']))->toBe(['en' => 'Hi', 'ar' => '', 'ckb' => '']);
+});
+
+it('runs custom hydrate and dehydrate callbacks', function () {
+    $this->input
+        ->hydrateStateUsing(fn ($state) => ['en' => strtoupper((string) $state)])
+        ->dehydrateStateUsing(fn ($state) => json_encode($state));
+
+    expect($this->input->hydrateState('hello'))->toBe(['en' => 'HELLO', 'ar' => '', 'ckb' => ''])
+        ->and($this->input->dehydrateState(['en' => 'Hi']))->toBe('{"en":"Hi","ar":"","ckb":""}');
+});
+
+it('serializes the value as a locale keyed array', function () {
+    $this->input->state('{"en":"Hello"}');
+
+    $props = $this->input->toArray();
+
+    expect($props['value'])->toBe(['en' => 'Hello', 'ar' => '', 'ckb' => ''])
+        ->and($props['requiredLocales'])->toBe([])
+        ->and($props['maxLength'])->toBeNull();
+});
+
+it('supports method chaining', function () {
+    $result = $this->input
+        ->multiline()
+        ->rows(4)
+        ->locales(['en'])
+        ->activeLocale('en')
+        ->requiredLocales(['en'])
+        ->maxLength(10);
+
+    expect($result)->toBe($this->input);
+});

From b5271955344ebcb0a2c8f22e3deaff1a0e8331c2 Mon Sep 17 00:00:00 2001
From: swara <swara09@gmail.com>
Date: Wed, 16 Sep 2026 20:48:36 +0200
Subject: [PATCH 2/9] docs(core): Update documentation for translatable input

Add 'ckb' locale example to translatable input documentation.
---
 docs/index.md | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/docs/index.md b/docs/index.md
index bb5b9ca..8fc779c 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -265,7 +265,7 @@ TextInput::make('name')
 ### TranslatableInput
 
 A multi-language text field. Its value is an array keyed by locale code
-(`['en' => 'Title', 'ar' => 'العنوان']`). The main input edits the active
+(`['en' => 'Title', 'ar' => 'العنوان', 'ckb' => 'ناونیشان']`). The main input edits the active
 locale; a globe button inside the input opens a popover with one input per
 locale (RTL locales render with `dir="rtl"`). The globe is hidden when only one
 locale is allowed.
@@ -304,11 +304,12 @@ as its own code, labelled with its uppercased base code, and rendered LTR.
 Validation rules are produced per locale key:
 
 ```php
-TranslatableInput::make('name')->locales(['en', 'ar'])->required()->getValidationRules();
+TranslatableInput::make('name')->locales(['en', 'ar', 'ckb'])->required()->getValidationRules();
 // [
 //     'name'    => ['required', 'array'],
 //     'name.en' => ['required', 'string'],
 //     'name.ar' => ['required', 'string'],
+//     'name.ckb' => ['required', 'string'],
 // ]
 ```
 

From 09e4430b36f6ce35b4da25cf464f4f4e74cdaa27 Mon Sep 17 00:00:00 2001
From: swara <swara09@gmail.com>
Date: Wed, 16 Sep 2026 20:50:06 +0200
Subject: [PATCH 3/9] docs(core): Update language data in index.md

---
 docs/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/index.md b/docs/index.md
index 8fc779c..ac80229 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -293,7 +293,7 @@ metadata; the native name is shown in the popover and the direction sets
 'locales' => [
     'en' => ['name' => 'English', 'direction' => 'ltr'],
     'ar' => ['name' => 'العربية', 'direction' => 'rtl'],
-    'ckb' => ['name' => 'کوردی', 'direction' => 'rtl', 'label' => 'KU'],
+    'ckb' => ['name' => 'کوردی', 'direction' => 'rtl'],
 ],
 // or simply: 'locales' => ['en', 'ar', 'ckb'],
 ```

From 10c2262e68549901bd0fc971507cec27954fdf5e Mon Sep 17 00:00:00 2001
From: swara <swara09@gmail.com>
Date: Wed, 16 Sep 2026 20:52:24 +0200
Subject: [PATCH 4/9] docs(core): Update CHANGELOG for TranslatableInput

Updated TranslatableInput field description in CHANGELOG to include 'ckb' locale example.
---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 08fb432..9747914 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,7 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 - Initial release
-- `TranslatableInput` field: multi-language text/textarea whose value is an array keyed by locale, with a globe popover to edit every locale, per-locale validation rules (`name.en`, `name.ar`, ...) and a new `laravilt-forms.locales` config key that accepts plain codes or per-locale `name`/`direction`/`label` metadata. Shipped for Blade, Vue and React.
+- `TranslatableInput` field: multi-language text/textarea whose value is an array keyed by locale, with a globe popover to edit every locale, per-locale validation rules (`name.en`, `name.ar`, `name.ckb`, ...) and a new `laravilt-forms.locales` config key that accepts plain codes or per-locale `name`/`direction`/`label` metadata. Shipped for Blade, Vue and React.
 
 ### Changed
 

From d79b5b4e32705354f85a2edb3ff9f4ca59a0c204 Mon Sep 17 00:00:00 2001
From: swara <swara09@gmail.com>
Date: Wed, 16 Sep 2026 21:29:58 +0200
Subject: [PATCH 5/9] refactor(core): Improve locale management for
 TranslatableInput

Refactors how `TranslatableInput` resolves locales. It now prioritizes `config('laravilt-forms.locales')`, then falls back to `config('app.available_locales')` (the panel's configured locales), and finally the app locale. This change also updates the `Locales` support class, the configuration file, and relevant documentation and tests to reflect the new locale resolution order.
---
 CHANGELOG.md                         |  2 +-
 config/laravilt-forms.php            | 25 ++++++---
 docs/index.md                        | 33 +++++++++--
 src/Components/TranslatableInput.php |  3 +-
 src/Support/Locales.php              | 84 +++++++++++++++++++++++++---
 tests/Unit/TranslatableInputTest.php | 49 +++++++++++++++-
 6 files changed, 170 insertions(+), 26 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9747914..aac2ff1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,7 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 - Initial release
-- `TranslatableInput` field: multi-language text/textarea whose value is an array keyed by locale, with a globe popover to edit every locale, per-locale validation rules (`name.en`, `name.ar`, `name.ckb`, ...) and a new `laravilt-forms.locales` config key that accepts plain codes or per-locale `name`/`direction`/`label` metadata. Shipped for Blade, Vue and React.
+- `TranslatableInput` field: multi-language text/textarea whose value is an array keyed by locale, with a globe popover to edit every locale, per-locale validation rules (`name.en`, `name.ar`, `name.ckb`, ...) and locale metadata (native name and text direction) read from the panel's `config('app.available_locales')` list by default, so languages are defined once in `config/app.php`. An optional `laravilt-forms.locales` config key, shipped empty, overrides that list with plain codes or per-locale `name`/`direction`/`label` metadata when content languages differ from UI languages. Shipped for Blade, Vue and React.
 
 ### Changed
 
diff --git a/config/laravilt-forms.php b/config/laravilt-forms.php
index eabd891..ebe815b 100644
--- a/config/laravilt-forms.php
+++ b/config/laravilt-forms.php
@@ -35,9 +35,20 @@
     |--------------------------------------------------------------------------
     |
     | The locales offered by TranslatableInput when a field does not call
-    | ->locales() itself. Each entry may be a plain code or a code => metadata
-    | pair with a native "name" and a "direction" (ltr or rtl); an optional
-    | "label" overrides the short badge shown on the globe button.
+    | ->locales() itself. Leave this empty to reuse the languages the panel
+    | already knows about from config('app.available_locales'), the same list
+    | the Locale & Timezone settings page shows, so a project defines its
+    | languages once in config/app.php:
+    |
+    | 'available_locales' => [
+    |     ['value' => 'en', 'label' => 'English', 'dir' => 'ltr'],
+    |     ['value' => 'ar', 'label' => 'العربية', 'dir' => 'rtl'],
+    | ],
+    |
+    | Set it only when the languages content is written in differ from the
+    | languages the UI is shown in. Each entry may be a plain code or a
+    | code => metadata pair with a native "name" and a "direction" (ltr or
+    | rtl); an optional "label" overrides the short badge on the globe button.
     |
     | 'locales' => ['en', 'ar', 'ckb'],
     | 'locales' => [
@@ -46,14 +57,12 @@
     |     'ckb' => ['name' => 'کوردی', 'direction' => 'rtl'],
     | ],
     |
-    | A plain code gets the code as its name and "ltr" as its direction.
-    | Leave empty to fall back to the application locale.
+    | A plain code gets the code as its name and "ltr" as its direction. When
+    | both lists are empty the field falls back to the application locale.
     |
     */
 
-    'locales' => [
-        'en' => ['name' => 'English', 'direction' => 'ltr'],
-    ],
+    'locales' => [],
 
     // Add your configuration options here
 ];
diff --git a/docs/index.md b/docs/index.md
index ac80229..688150b 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -273,7 +273,7 @@ locale is allowed.
 ```php
 TranslatableInput::make('name')
     ->label('Name')
-    ->locales(['en', 'ar', 'ckb']) // defaults to config('laravilt-forms.locales')
+    ->locales(['en', 'ar', 'ckb']) // defaults to the configured locales, see below
     ->activeLocale('en')           // defaults to the app locale when allowed
     ->required()                   // every locale is required...
     ->requiredLocales(['en'])      // ...unless you narrow it down
@@ -284,9 +284,28 @@ TranslatableInput::make('name')
 
 Locales resolve in this order: explicit `locales()`, then
 `config('laravilt-forms.locales')` (published to `config/laravilt-forms.php`),
-then the application locale. The config accepts plain codes or per-locale
-metadata; the native name is shown in the popover and the direction sets
-`dir` on each input:
+then `config('app.available_locales')`, then the application locale.
+
+By default the field reuses the languages the panel already knows about. That
+is the same list the [Locale & Timezone](../auth/profile/preferences.md)
+settings page shows, so a project defines its languages once in
+`config/app.php`; `label` becomes the native name shown in the popover and
+`dir` sets `dir` on each input:
+
+```php
+// config/app.php
+'available_locales' => [
+    ['value' => 'en', 'label' => 'English', 'dir' => 'ltr'],
+    ['value' => 'ar', 'label' => 'العربية', 'dir' => 'rtl'],
+    ['value' => 'ckb', 'label' => 'کوردی', 'dir' => 'rtl'],
+],
+```
+
+Set `laravilt-forms.locales` only when the languages content is written in
+differ from the languages the UI is shown in, for example an English-only
+admin panel that manages content in three languages. It accepts plain codes or
+per-locale metadata, and an optional `label` overrides the short badge on the
+globe button:
 
 ```php
 // config/laravilt-forms.php
@@ -298,8 +317,10 @@ metadata; the native name is shown in the popover and the direction sets
 // or simply: 'locales' => ['en', 'ar', 'ckb'],
 ```
 
-The config is the only source of names and directions: a plain code is shown
-as its own code, labelled with its uppercased base code, and rendered LTR.
+Names and directions are looked up in `laravilt-forms.locales` first and
+`app.available_locales` second, so plain codes in the forms config still pick
+up the names the panel defines. A code found in neither is shown as its own
+code, labelled with its uppercased base code, and rendered LTR.
 
 Validation rules are produced per locale key:
 
diff --git a/src/Components/TranslatableInput.php b/src/Components/TranslatableInput.php
index acdc5e1..e78b6fa 100644
--- a/src/Components/TranslatableInput.php
+++ b/src/Components/TranslatableInput.php
@@ -80,7 +80,8 @@ public function locales(array|Closure $locales): static
     /**
      * Get the allowed locales.
      *
-     * Resolution order: explicit locales(), config('laravilt-forms.locales'), app locale.
+     * Resolution order: explicit locales(), config('laravilt-forms.locales'),
+     * config('app.available_locales'), app locale.
      */
     public function getLocales(): array
     {
diff --git a/src/Support/Locales.php b/src/Support/Locales.php
index c9f2154..04b9138 100644
--- a/src/Support/Locales.php
+++ b/src/Support/Locales.php
@@ -5,21 +5,29 @@
 /**
  * Locale metadata helper for translatable fields.
  *
- * Locales are defined in config/laravilt-forms.php under "locales", either as
- * plain codes or as code => ['name' => ..., 'direction' => ..., 'label' => ...].
- * This helper normalises both shapes into the metadata the frontend needs.
+ * Locales come from config/laravilt-forms.php under "locales" when that key is
+ * set, either as plain codes or as code => ['name' => ..., 'direction' => ...,
+ * 'label' => ...]. When it is empty they come from config('app.available_locales'),
+ * the list the panel's Locale & Timezone page uses, shaped as
+ * ['value' => 'en', 'label' => 'English', 'dir' => 'ltr'] entries.
+ * This helper normalises every shape into the metadata the frontend needs.
  * A code without metadata gets its own code as the name, the uppercased base
  * code as the label and "ltr" as the direction.
  */
 class Locales
 {
     /**
-     * Locale codes from config('laravilt-forms.locales'), falling back to the app locale.
+     * Locale codes from config('laravilt-forms.locales'), else
+     * config('app.available_locales'), else the app locale.
      */
     public static function default(): array
     {
         $codes = static::codes(config('laravilt-forms.locales'));
 
+        if ($codes === []) {
+            $codes = static::codes(static::fromApp());
+        }
+
         return $codes === [] ? [app()->getLocale()] : $codes;
     }
 
@@ -46,19 +54,77 @@ public static function codes(mixed $locales): array
     }
 
     /**
-     * Metadata for a locale as configured in laravilt-forms.locales, if any.
+     * config('app.available_locales') normalised to code => ['name', 'direction'].
+     *
+     * Accepts the panel shape (['value' => 'en', 'label' => 'English', 'dir' => 'ltr'])
+     * as well as the plain-code and code => metadata shapes used by this package.
+     *
+     * @return array<string, array{name?: string, direction?: string}>
      */
-    public static function configured(string $locale): array
+    public static function fromApp(): array
     {
-        $locales = config('laravilt-forms.locales');
+        $locales = config('app.available_locales');
 
         if (! is_array($locales)) {
             return [];
         }
 
-        $meta = $locales[$locale] ?? null;
+        $normalised = [];
+
+        foreach ($locales as $key => $value) {
+            if (is_string($key)) {
+                $normalised[$key] = is_array($value) ? $value : [];
+
+                continue;
+            }
+
+            if (is_string($value) && $value !== '') {
+                $normalised[$value] = [];
+
+                continue;
+            }
+
+            if (! is_array($value)) {
+                continue;
+            }
+
+            $code = $value['value'] ?? $value['code'] ?? null;
+
+            if (! is_string($code) || $code === '') {
+                continue;
+            }
+
+            $meta = [];
+
+            $name = $value['name'] ?? $value['label'] ?? null;
+            $direction = $value['direction'] ?? $value['dir'] ?? null;
+
+            if (is_string($name) && $name !== '') {
+                $meta['name'] = $name;
+            }
+
+            if (is_string($direction) && $direction !== '') {
+                $meta['direction'] = $direction;
+            }
+
+            $normalised[$code] = $meta;
+        }
+
+        return $normalised;
+    }
+
+    /**
+     * Metadata for a locale from laravilt-forms.locales, else app.available_locales, if any.
+     */
+    public static function configured(string $locale): array
+    {
+        $locales = config('laravilt-forms.locales');
+
+        if (is_array($locales) && is_array($locales[$locale] ?? null)) {
+            return $locales[$locale];
+        }
 
-        return is_array($meta) ? $meta : [];
+        return static::fromApp()[$locale] ?? [];
     }
 
     /**
diff --git a/tests/Unit/TranslatableInputTest.php b/tests/Unit/TranslatableInputTest.php
index 30639c7..5f7f065 100644
--- a/tests/Unit/TranslatableInputTest.php
+++ b/tests/Unit/TranslatableInputTest.php
@@ -24,13 +24,60 @@
     expect($this->input->getLocales())->toBe(['en', 'ar', 'ckb']);
 });
 
-it('falls back to the app locale when config has no locales', function () {
+it('falls back to the app locale when neither config has locales', function () {
     config()->set('laravilt-forms.locales', []);
+    config()->set('app.available_locales', []);
     app()->setLocale('fr');
 
     expect($this->input->getLocales())->toBe(['fr']);
 });
 
+it('falls back to app.available_locales when the forms config is empty', function () {
+    config()->set('laravilt-forms.locales', []);
+    config()->set('app.available_locales', [
+        ['value' => 'en', 'label' => 'English', 'dir' => 'ltr'],
+        ['value' => 'ar', 'label' => 'العربية', 'dir' => 'rtl'],
+    ]);
+
+    expect($this->input->getLocales())->toBe(['en', 'ar'])
+        ->and($this->input->toArray()['locales'])->toBe([
+            ['code' => 'en', 'name' => 'English', 'label' => 'EN', 'direction' => 'ltr'],
+            ['code' => 'ar', 'name' => 'العربية', 'label' => 'AR', 'direction' => 'rtl'],
+        ]);
+});
+
+it('prefers laravilt-forms.locales over app.available_locales', function () {
+    config()->set('laravilt-forms.locales', ['de']);
+    config()->set('app.available_locales', [
+        ['value' => 'en', 'label' => 'English', 'dir' => 'ltr'],
+    ]);
+
+    expect($this->input->getLocales())->toBe(['de']);
+});
+
+it('reads metadata from app.available_locales for plain codes in the forms config', function () {
+    config()->set('laravilt-forms.locales', ['ar', 'en' => ['name' => 'Custom']]);
+    config()->set('app.available_locales', [
+        ['value' => 'en', 'label' => 'English', 'dir' => 'ltr'],
+        ['value' => 'ar', 'label' => 'العربية', 'dir' => 'rtl'],
+    ]);
+
+    expect(Locales::name('ar'))->toBe('العربية')
+        ->and(Locales::direction('ar'))->toBe('rtl')
+        ->and(Locales::name('en'))->toBe('Custom');
+});
+
+it('accepts plain codes and keyed metadata in app.available_locales', function () {
+    config()->set('laravilt-forms.locales', []);
+    config()->set('app.available_locales', ['en', 'he' => ['name' => 'עברית', 'direction' => 'rtl'], ['code' => 'fa', 'dir' => 'RTL'], 42, ['label' => 'no code']]);
+
+    expect(Locales::default())->toBe(['en', 'he', 'fa'])
+        ->and(Locales::name('en'))->toBe('en')
+        ->and(Locales::name('he'))->toBe('עברית')
+        ->and(Locales::isRtl('he'))->toBeTrue()
+        ->and(Locales::isRtl('fa'))->toBeTrue();
+});
+
 it('can set explicit locales', function () {
     $this->input->locales(['en', 'fr']);
 

From 2c1ad7ef42e1bdb299645d5c85090415f2796784 Mon Sep 17 00:00:00 2001
From: swara <swara09@gmail.com>
Date: Wed, 16 Sep 2026 21:42:39 +0200
Subject: [PATCH 6/9] refactor(core): Migrate TranslatableInput to use Dialog

Migrate TranslatableInput component from Popover to Dialog for both Vue and React versions to improve user experience.
Update language files with new translation keys for description and done actions.
Reflect changes in CHANGELOG and documentation.
---
 CHANGELOG.md                                  |   2 +-
 docs/index.md                                 |   9 +-
 lang/ar/forms.php                             |   2 +
 lang/ckb/forms.php                            |   2 +
 lang/en/forms.php                             |   2 +
 .../components/fields/TranslatableInput.vue   | 120 +++++++++-------
 .../components/fields/TranslatableInput.tsx   | 132 ++++++++++--------
 7 files changed, 157 insertions(+), 112 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index aac2ff1..a447a4d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,7 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 - Initial release
-- `TranslatableInput` field: multi-language text/textarea whose value is an array keyed by locale, with a globe popover to edit every locale, per-locale validation rules (`name.en`, `name.ar`, `name.ckb`, ...) and locale metadata (native name and text direction) read from the panel's `config('app.available_locales')` list by default, so languages are defined once in `config/app.php`. An optional `laravilt-forms.locales` config key, shipped empty, overrides that list with plain codes or per-locale `name`/`direction`/`label` metadata when content languages differ from UI languages. Shipped for Blade, Vue and React.
+- `TranslatableInput` field: multi-language text/textarea whose value is an array keyed by locale, with a globe button that opens a dialog to edit every locale, per-locale validation rules (`name.en`, `name.ar`, `name.ckb`, ...) and locale metadata (native name and text direction) read from the panel's `config('app.available_locales')` list by default, so languages are defined once in `config/app.php`. An optional `laravilt-forms.locales` config key, shipped empty, overrides that list with plain codes or per-locale `name`/`direction`/`label` metadata when content languages differ from UI languages. Shipped for Blade, Vue and React.
 
 ### Changed
 
diff --git a/docs/index.md b/docs/index.md
index 688150b..fba1105 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -45,7 +45,7 @@ php artisan make:form UserForm --resource
 ### 📝 Basic Fields
 - **TextInput**: Single-line text input with validation
 - **Textarea**: Multi-line text input
-- **TranslatableInput**: Multi-language text input with a per-locale popover
+- **TranslatableInput**: Multi-language text input with a per-locale dialog
 - **NumberField**: Numeric input with min/max
 - **Select**: Dropdown select with search
 - **Checkbox**: Single checkbox
@@ -266,8 +266,9 @@ TextInput::make('name')
 
 A multi-language text field. Its value is an array keyed by locale code
 (`['en' => 'Title', 'ar' => 'العنوان', 'ckb' => 'ناونیشان']`). The main input edits the active
-locale; a globe button inside the input opens a popover with one input per
-locale (RTL locales render with `dir="rtl"`). The globe is hidden when only one
+locale; a globe button inside the input opens a dialog with one input per
+locale (RTL locales render with `dir="rtl"`), so long titles and content stay
+readable. The globe is hidden when only one
 locale is allowed.
 
 ```php
@@ -289,7 +290,7 @@ then `config('app.available_locales')`, then the application locale.
 By default the field reuses the languages the panel already knows about. That
 is the same list the [Locale & Timezone](../auth/profile/preferences.md)
 settings page shows, so a project defines its languages once in
-`config/app.php`; `label` becomes the native name shown in the popover and
+`config/app.php`; `label` becomes the native name shown in the dialog and
 `dir` sets `dir` on each input:
 
 ```php
diff --git a/lang/ar/forms.php b/lang/ar/forms.php
index f1e5665..4df11f3 100644
--- a/lang/ar/forms.php
+++ b/lang/ar/forms.php
@@ -97,5 +97,7 @@
     // TranslatableInput Component
     'translatable_input' => [
         'translations' => 'الترجمات',
+        'description' => 'حرّر هذا الحقل بكل اللغات.',
+        'done' => 'تم',
     ],
 ];
diff --git a/lang/ckb/forms.php b/lang/ckb/forms.php
index 3fb0253..a7eaa7f 100644
--- a/lang/ckb/forms.php
+++ b/lang/ckb/forms.php
@@ -97,5 +97,7 @@
     // TranslatableInput Component
     'translatable_input' => [
         'translations' => 'وەرگێڕانەکان',
+        'description' => 'ئەم خانەیە بە هەموو زمانەکان دەستکاری بکە.',
+        'done' => 'تەواو',
     ],
 ];
diff --git a/lang/en/forms.php b/lang/en/forms.php
index ca4d42a..00ba5ee 100644
--- a/lang/en/forms.php
+++ b/lang/en/forms.php
@@ -97,5 +97,7 @@
     // TranslatableInput Component
     'translatable_input' => [
         'translations' => 'Translations',
+        'description' => 'Edit this field in every language.',
+        'done' => 'Done',
     ],
 ];
diff --git a/resources/js/components/fields/TranslatableInput.vue b/resources/js/components/fields/TranslatableInput.vue
index 5723340..d02344b 100644
--- a/resources/js/components/fields/TranslatableInput.vue
+++ b/resources/js/components/fields/TranslatableInput.vue
@@ -86,12 +86,12 @@
                     :aria-describedby="hasError ? `${name}-error` : undefined"
                 />
 
-                <!-- Globe button opens the per-locale popover (hidden with a single locale) -->
-                <Popover v-if="hasLocaleSwitcher">
-                    <PopoverTrigger as-child>
+                <!-- Globe button opens the per-locale dialog (hidden with a single locale) -->
+                <Dialog v-if="hasLocaleSwitcher" v-model:open="dialogOpen">
+                    <DialogTrigger as-child>
                         <button
                             type="button"
-                            class="absolute end-1.5 flex items-center gap-0.5 text-muted-foreground transition-colors hover:text-foreground disabled:pointer-events-none disabled:opacity-50"
+                            class="absolute inset-e-1.5 flex items-center gap-0.5 text-muted-foreground transition-colors hover:text-foreground disabled:pointer-events-none disabled:opacity-50"
                             :class="multiline ? 'top-2' : 'top-1/2 -translate-y-1/2'"
                             :disabled="disabled"
                             :aria-label="trans('forms::forms.translatable_input.translations')"
@@ -100,52 +100,62 @@
                             <Globe class="h-3.5 w-3.5" />
                             <span class="text-[9px] font-bold uppercase tracking-wide">{{ labelOf(active) }}</span>
                         </button>
-                    </PopoverTrigger>
-                    <PopoverContent class="w-72 space-y-2.5 p-3" align="end">
-                        <p class="text-[10px] font-semibold uppercase tracking-[0.12em] text-muted-foreground">
-                            {{ trans('forms::forms.translatable_input.translations') }}
-                        </p>
-                        <div v-for="locale in availableLocales" :key="locale.code" class="space-y-1">
-                            <Label
-                                :for="`${id || name}-${locale.code}`"
-                                class="flex items-center justify-between text-xs text-muted-foreground"
-                            >
-                                <span>{{ locale.name || locale.code }}</span>
-                                <span class="text-[9px] font-bold uppercase">
-                                    {{ locale.label || locale.code }}
-                                    <span v-if="isLocaleRequired(locale.code)" class="text-destructive">*</span>
-                                </span>
-                            </Label>
-                            <Textarea
-                                v-if="multiline"
-                                :id="`${id || name}-${locale.code}`"
-                                :model-value="localValue[locale.code] ?? ''"
-                                @update:model-value="(val) => setLocale(locale.code, String(val ?? ''))"
-                                :rows="rows"
-                                :maxlength="maxLength"
-                                :disabled="disabled"
-                                :readonly="readonly"
-                                :dir="locale.direction || 'ltr'"
-                                :class="localeHasError(locale.code) ? 'border-destructive focus-visible:ring-destructive' : ''"
-                            />
-                            <Input
-                                v-else
-                                :id="`${id || name}-${locale.code}`"
-                                type="text"
-                                :model-value="localValue[locale.code] ?? ''"
-                                @update:model-value="(val) => setLocale(locale.code, String(val ?? ''))"
-                                :maxlength="maxLength"
-                                :disabled="disabled"
-                                :readonly="readonly"
-                                :dir="locale.direction || 'ltr'"
-                                :class="localeHasError(locale.code) ? 'border-destructive focus-visible:ring-destructive' : ''"
-                            />
-                            <p v-if="localeError(locale.code)" class="text-xs text-destructive">
-                                {{ localeError(locale.code) }}
-                            </p>
+                    </DialogTrigger>
+                    <DialogContent class="flex max-h-[85vh] flex-col gap-0 p-0 sm:max-w-xl">
+                        <DialogHeader class="border-b px-6 py-4">
+                            <DialogTitle>{{ label || trans('forms::forms.translatable_input.translations') }}</DialogTitle>
+                            <DialogDescription>
+                                {{ trans('forms::forms.translatable_input.description') }}
+                            </DialogDescription>
+                        </DialogHeader>
+                        <div class="flex-1 space-y-4 overflow-y-auto px-6 py-4">
+                            <div v-for="locale in availableLocales" :key="locale.code" class="space-y-1.5">
+                                <Label
+                                    :for="`${id || name}-${locale.code}`"
+                                    class="flex items-center justify-between text-sm"
+                                >
+                                    <span>{{ locale.name || locale.code }}</span>
+                                    <span class="text-[10px] font-bold uppercase text-muted-foreground">
+                                        {{ locale.label || locale.code }}
+                                        <span v-if="isLocaleRequired(locale.code)" class="text-destructive">*</span>
+                                    </span>
+                                </Label>
+                                <Textarea
+                                    v-if="multiline"
+                                    :id="`${id || name}-${locale.code}`"
+                                    :model-value="localValue[locale.code] ?? ''"
+                                    @update:model-value="(val) => setLocale(locale.code, String(val ?? ''))"
+                                    :rows="rows"
+                                    :maxlength="maxLength"
+                                    :disabled="disabled"
+                                    :readonly="readonly"
+                                    :dir="locale.direction || 'ltr'"
+                                    :class="localeHasError(locale.code) ? 'border-destructive focus-visible:ring-destructive' : ''"
+                                />
+                                <Input
+                                    v-else
+                                    :id="`${id || name}-${locale.code}`"
+                                    type="text"
+                                    :model-value="localValue[locale.code] ?? ''"
+                                    @update:model-value="(val) => setLocale(locale.code, String(val ?? ''))"
+                                    :maxlength="maxLength"
+                                    :disabled="disabled"
+                                    :readonly="readonly"
+                                    :dir="locale.direction || 'ltr'"
+                                    :class="localeHasError(locale.code) ? 'border-destructive focus-visible:ring-destructive' : ''"
+                                />
+                                <p v-if="localeError(locale.code)" class="text-xs text-destructive">
+                                    {{ localeError(locale.code) }}
+                                </p>
+                            </div>
                         </div>
-                    </PopoverContent>
-                </Popover>
+                        <DialogFooter class="border-t px-6 py-4">
+                            <Button type="button" @click="dialogOpen = false">
+                                {{ trans('forms::forms.translatable_input.done') }}
+                            </Button>
+                        </DialogFooter>
+                    </DialogContent>
+                </Dialog>
             </div>
 
             <!-- Suffix Actions -->
@@ -178,9 +188,18 @@
 </template>
 
 <script setup lang="ts">
+import { Button } from '@/components/ui/button';
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+} from '@/components/ui/dialog';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
 import { Textarea } from '@/components/ui/textarea';
 import { useLocalization } from '@laravilt/support/composables';
 import ActionButton from '@laravilt/actions/components/ActionButton.vue';
@@ -294,6 +313,7 @@ function preferredActive(): string {
 
 const localValue = ref<Translations>(parseTranslations(props.modelValue ?? props.value));
 const active = ref<string>(preferredActive());
+const dialogOpen = ref(false);
 
 // Sync local value when the prop changes from an external source
 watch(
diff --git a/resources/react/components/fields/TranslatableInput.tsx b/resources/react/components/fields/TranslatableInput.tsx
index 272829d..0b37bed 100644
--- a/resources/react/components/fields/TranslatableInput.tsx
+++ b/resources/react/components/fields/TranslatableInput.tsx
@@ -1,6 +1,15 @@
+import { Button } from '@/components/ui/button';
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+} from '@/components/ui/dialog';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
 import { Textarea as UiTextarea } from '@/components/ui/textarea';
 import { cn } from '@/lib/utils';
 import ActionButton from '@laravilt/actions/components/ActionButton';
@@ -167,6 +176,7 @@ export default function TranslatableInput(props: TranslatableInputProps) {
     const incoming = modelValue ?? value;
 
     const [active, setActive] = useState<string>(() => preferredActive(localeCodes, activeLocale));
+    const [dialogOpen, setDialogOpen] = useState(false);
     const [localValue, setLocalValueState] = useState<Translations>(() =>
         parseTranslations(incoming, localeCodes, preferredActive(localeCodes, activeLocale)),
     );
@@ -320,10 +330,10 @@ export default function TranslatableInput(props: TranslatableInputProps) {
                         />
                     )}
 
-                    {/* Globe button opens the per-locale popover (hidden with a single locale) */}
+                    {/* Globe button opens the per-locale dialog (hidden with a single locale) */}
                     {hasLocaleSwitcher && (
-                        <Popover>
-                            <PopoverTrigger asChild>
+                        <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+                            <DialogTrigger asChild>
                                 <button
                                     type="button"
                                     className={cn(
@@ -337,59 +347,67 @@ export default function TranslatableInput(props: TranslatableInputProps) {
                                     <Globe className="h-3.5 w-3.5" />
                                     <span className="text-[9px] font-bold uppercase tracking-wide">{labelOf(active)}</span>
                                 </button>
-                            </PopoverTrigger>
-                            <PopoverContent className="w-72 space-y-2.5 p-3" align="end">
-                                <p className="text-[10px] font-semibold uppercase tracking-[0.12em] text-muted-foreground">
-                                    {trans('forms::forms.translatable_input.translations')}
-                                </p>
-                                {availableLocales.map((locale) => (
-                                    <div key={locale.code} className="space-y-1">
-                                        <Label
-                                            htmlFor={`${fieldId}-${locale.code}`}
-                                            className="flex items-center justify-between text-xs text-muted-foreground"
-                                        >
-                                            <span>{locale.name || locale.code}</span>
-                                            <span className="text-[9px] font-bold uppercase">
-                                                {locale.label || locale.code}
-                                                {isLocaleRequired(locale.code) && <span className="text-destructive">*</span>}
-                                            </span>
-                                        </Label>
-                                        {multiline ? (
-                                            <UiTextarea
-                                                id={`${fieldId}-${locale.code}`}
-                                                value={localValue[locale.code] ?? ''}
-                                                onChange={(e) => setLocale(locale.code, e.target.value)}
-                                                rows={rows}
-                                                maxLength={maxLength}
-                                                disabled={disabled}
-                                                readOnly={readonly}
-                                                dir={locale.direction || 'ltr'}
-                                                className={cn(
-                                                    localeHasError(locale.code) ? 'border-destructive focus-visible:ring-destructive' : '',
-                                                )}
-                                            />
-                                        ) : (
-                                            <Input
-                                                id={`${fieldId}-${locale.code}`}
-                                                type="text"
-                                                value={localValue[locale.code] ?? ''}
-                                                onChange={(e) => setLocale(locale.code, e.target.value)}
-                                                maxLength={maxLength}
-                                                disabled={disabled}
-                                                readOnly={readonly}
-                                                dir={locale.direction || 'ltr'}
-                                                className={cn(
-                                                    localeHasError(locale.code) ? 'border-destructive focus-visible:ring-destructive' : '',
-                                                )}
-                                            />
-                                        )}
-                                        {localeError(locale.code) && (
-                                            <p className="text-xs text-destructive">{localeError(locale.code)}</p>
-                                        )}
-                                    </div>
-                                ))}
-                            </PopoverContent>
-                        </Popover>
+                            </DialogTrigger>
+                            <DialogContent className="flex max-h-[85vh] flex-col gap-0 p-0 sm:max-w-xl">
+                                <DialogHeader className="border-b px-6 py-4">
+                                    <DialogTitle>{label || trans('forms::forms.translatable_input.translations')}</DialogTitle>
+                                    <DialogDescription>{trans('forms::forms.translatable_input.description')}</DialogDescription>
+                                </DialogHeader>
+                                <div className="flex-1 space-y-4 overflow-y-auto px-6 py-4">
+                                    {availableLocales.map((locale) => (
+                                        <div key={locale.code} className="space-y-1.5">
+                                            <Label
+                                                htmlFor={`${fieldId}-${locale.code}`}
+                                                className="flex items-center justify-between text-sm"
+                                            >
+                                                <span>{locale.name || locale.code}</span>
+                                                <span className="text-[10px] font-bold uppercase text-muted-foreground">
+                                                    {locale.label || locale.code}
+                                                    {isLocaleRequired(locale.code) && <span className="text-destructive">*</span>}
+                                                </span>
+                                            </Label>
+                                            {multiline ? (
+                                                <UiTextarea
+                                                    id={`${fieldId}-${locale.code}`}
+                                                    value={localValue[locale.code] ?? ''}
+                                                    onChange={(e) => setLocale(locale.code, e.target.value)}
+                                                    rows={rows}
+                                                    maxLength={maxLength}
+                                                    disabled={disabled}
+                                                    readOnly={readonly}
+                                                    dir={locale.direction || 'ltr'}
+                                                    className={cn(
+                                                        localeHasError(locale.code) ? 'border-destructive focus-visible:ring-destructive' : '',
+                                                    )}
+                                                />
+                                            ) : (
+                                                <Input
+                                                    id={`${fieldId}-${locale.code}`}
+                                                    type="text"
+                                                    value={localValue[locale.code] ?? ''}
+                                                    onChange={(e) => setLocale(locale.code, e.target.value)}
+                                                    maxLength={maxLength}
+                                                    disabled={disabled}
+                                                    readOnly={readonly}
+                                                    dir={locale.direction || 'ltr'}
+                                                    className={cn(
+                                                        localeHasError(locale.code) ? 'border-destructive focus-visible:ring-destructive' : '',
+                                                    )}
+                                                />
+                                            )}
+                                            {localeError(locale.code) && (
+                                                <p className="text-xs text-destructive">{localeError(locale.code)}</p>
+                                            )}
+                                        </div>
+                                    ))}
+                                </div>
+                                <DialogFooter className="border-t px-6 py-4">
+                                    <Button type="button" onClick={() => setDialogOpen(false)}>
+                                        {trans('forms::forms.translatable_input.done')}
+                                    </Button>
+                                </DialogFooter>
+                            </DialogContent>
+                        </Dialog>
                     )}
                 </div>
 

From 0d7dc1ee6580804f9d5f945357818a3d7d59f289 Mon Sep 17 00:00:00 2001
From: swara <swara09@gmail.com>
Date: Wed, 16 Sep 2026 21:46:00 +0200
Subject: [PATCH 7/9] feat(translatable-input): Add TranslationsRule for
 per-locale validation

Introduces `TranslationsRule` to handle validation for translatable fields, allowing per-locale rules and reporting errors under nested keys (e.g., `field.en`).
Updates `TranslatableInput` to leverage this new rule, improving validation logic for multi-language inputs.
Refactors `HasValidation` to better integrate required rules alongside other validation rules.
Adds comprehensive tests for `TranslationsRule` and `TranslatableInput` validation.
Updates documentation to reflect changes in validation for translatable fields.
---
 CHANGELOG.md                         |   3 +-
 docs/index.md                        |  25 +++--
 src/Components/TranslatableInput.php |  86 +++++++++++++++--
 src/Concerns/HasValidation.php       |  29 +++++-
 src/Rules/TranslationsRule.php       | 134 +++++++++++++++++++++++++++
 tests/Unit/FieldTest.php             |  28 ++++++
 tests/Unit/TranslatableInputTest.php |  68 +++++++++++++-
 7 files changed, 353 insertions(+), 20 deletions(-)
 create mode 100644 src/Rules/TranslationsRule.php

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a447a4d..41feb01 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,7 +9,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 - Initial release
-- `TranslatableInput` field: multi-language text/textarea whose value is an array keyed by locale, with a globe button that opens a dialog to edit every locale, per-locale validation rules (`name.en`, `name.ar`, `name.ckb`, ...) and locale metadata (native name and text direction) read from the panel's `config('app.available_locales')` list by default, so languages are defined once in `config/app.php`. An optional `laravilt-forms.locales` config key, shipped empty, overrides that list with plain codes or per-locale `name`/`direction`/`label` metadata when content languages differ from UI languages. Shipped for Blade, Vue and React.
+- `TranslatableInput` field: multi-language text/textarea whose value is an array keyed by locale, with a globe button that opens a dialog to edit every locale, per-locale validation via a `TranslationsRule` (errors reported as `name.en`, `name.ar`, `name.ckb`, ...) and locale metadata (native name and text direction) read from the panel's `config('app.available_locales')` list by default, so languages are defined once in `config/app.php`. An optional `laravilt-forms.locales` config key, shipped empty, overrides that list with plain codes or per-locale `name`/`direction`/`label` metadata when content languages differ from UI languages. Shipped for Blade, Vue and React.
+- `required()` is now mirrored as a `required` validation rule on every field, so it is enforced even when other rules such as `maxLength()` are set (previously the schema only added it for fields with no other rules).
 
 ### Changed
 
diff --git a/docs/index.md b/docs/index.md
index fba1105..26e9a71 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -323,18 +323,31 @@ Names and directions are looked up in `laravilt-forms.locales` first and
 up the names the panel defines. A code found in neither is shown as its own
 code, labelled with its uppercased base code, and rendered LTR.
 
-Validation rules are produced per locale key:
+Every locale is validated on its own and errors are reported per locale key
+(`name.en`, `name.ar`, ...), which the field shows next to the matching input.
+`getValidationRules()` returns one rule list for the field, as the schema
+expects, with a `TranslationsRule` carrying the per-locale rules; use
+`getLocaleValidationRules()` for flat keys when validating by hand:
 
 ```php
-TranslatableInput::make('name')->locales(['en', 'ar', 'ckb'])->required()->getValidationRules();
+$field = TranslatableInput::make('name')->locales(['en', 'ar', 'ckb'])->required()->maxLength(120);
+
+$field->getValidationRules();
+// ['required', 'array', TranslationsRule(en|ar|ckb => ['required', 'string', 'max:120'])]
+
+$field->getLocaleValidationRules();
 // [
-//     'name'    => ['required', 'array'],
-//     'name.en' => ['required', 'string'],
-//     'name.ar' => ['required', 'string'],
-//     'name.ckb' => ['required', 'string'],
+//     'name'     => ['required', 'array'],
+//     'name.en'  => ['required', 'string', 'max:120'],
+//     'name.ar'  => ['required', 'string', 'max:120'],
+//     'name.ckb' => ['required', 'string', 'max:120'],
 // ]
 ```
 
+Messages use the field label plus the locale, e.g. "The Name (EN) field is
+required.", and `validationMessages(['required' => '...'])` applies to every
+locale (`['en.required' => '...']` targets one).
+
 `hydrateState()` / `dehydrateState()` accept a JSON string, an array or `null`
 and always return an array with every allowed locale present, so the field works
 with both storage styles:
diff --git a/src/Components/TranslatableInput.php b/src/Components/TranslatableInput.php
index e78b6fa..40a660e 100644
--- a/src/Components/TranslatableInput.php
+++ b/src/Components/TranslatableInput.php
@@ -3,6 +3,7 @@
 namespace Laravilt\Forms\Components;
 
 use Closure;
+use Laravilt\Forms\Rules\TranslationsRule;
 use Laravilt\Forms\Support\Locales;
 
 /**
@@ -12,7 +13,7 @@
  * e.g. ['en' => 'Title', 'ar' => 'العنوان']. Supports:
  * - Single-line or multiline (textarea) editing
  * - Explicit, config-driven or app-locale based locale lists
- * - Per-locale validation rules (name.en, name.ar, ...)
+ * - Per-locale validation (errors reported as name.en, name.ar, ...)
  * - Hydration from JSON strings, arrays or null
  */
 class TranslatableInput extends Field
@@ -169,17 +170,36 @@ public function getMaxLength(): ?int
     }
 
     /**
-     * Get validation rules keyed by locale: name.en, name.ar, ...
+     * Validation rules for the field: presence, array, and a TranslationsRule
+     * that validates every locale and reports errors as name.en, name.ar, ...
+     *
+     * Schema::getValidationRules() assigns one rule list per field name, so the
+     * per-locale rules travel inside the rule object instead of as extra keys.
+     * Use getLocaleValidationRules() when validating by hand with flat keys.
      */
     public function getValidationRules(): array
     {
-        $name = $this->getName();
+        return [
+            $this->getRequiredLocales() === [] ? 'nullable' : 'required',
+            'array',
+            new TranslationsRule(
+                $this->getLocaleRules(),
+                $this->getLocaleAttributes(),
+                $this->validationMessages,
+            ),
+        ];
+    }
+
+    /**
+     * Rules per locale code: ['en' => ['required', 'string', 'max:120'], ...].
+     *
+     * @return array<string, array<int, mixed>>
+     */
+    public function getLocaleRules(): array
+    {
         $required = $this->getRequiredLocales();
         $extra = $this->getExtraValidationRules();
-
-        $rules = [
-            $name => [$required === [] ? 'nullable' : 'required', 'array'],
-        ];
+        $rules = [];
 
         foreach ($this->getLocales() as $locale) {
             $localeRules = [in_array($locale, $required, true) ? 'required' : 'nullable', 'string'];
@@ -188,12 +208,62 @@ public function getValidationRules(): array
                 $localeRules[] = "max:{$this->maxLength}";
             }
 
-            $rules["{$name}.{$locale}"] = array_values(array_unique(array_merge($localeRules, $extra), SORT_REGULAR));
+            $rules[$locale] = array_values(array_unique(array_merge($localeRules, $extra), SORT_REGULAR));
+        }
+
+        return $rules;
+    }
+
+    /**
+     * Flat rules for manual validation: ['name' => [...], 'name.en' => [...], ...].
+     *
+     * @return array<string, array<int, mixed>>
+     */
+    public function getLocaleValidationRules(): array
+    {
+        $name = $this->getName();
+        $rules = [$name => [$this->getRequiredLocales() === [] ? 'nullable' : 'required', 'array']];
+
+        foreach ($this->getLocaleRules() as $locale => $localeRules) {
+            $rules["{$name}.{$locale}"] = $localeRules;
         }
 
         return $rules;
     }
 
+    /**
+     * Display names per locale code, e.g. ['en' => 'Title (EN)'], so messages
+     * read "The Title (EN) field is required." instead of "The title.en field...".
+     *
+     * @return array<string, string>
+     */
+    public function getLocaleAttributes(): array
+    {
+        $label = $this->getLabel() ?: $this->getName();
+        $attributes = [];
+
+        foreach ($this->getLocaleMetadata() as $locale) {
+            $attributes[$locale['code']] = "{$label} ({$locale['label']})";
+        }
+
+        return $attributes;
+    }
+
+    /**
+     * Validation attributes including the nested locale keys (name.en => Title (EN)).
+     */
+    public function getValidationAttributes(): array
+    {
+        $name = $this->getName();
+        $attributes = parent::getValidationAttributes();
+
+        foreach ($this->getLocaleAttributes() as $locale => $attribute) {
+            $attributes["{$name}.{$locale}"] = $attribute;
+        }
+
+        return $attributes;
+    }
+
     /**
      * Rules added via rules() / addRules(), minus the presence rules handled per locale.
      */
diff --git a/src/Concerns/HasValidation.php b/src/Concerns/HasValidation.php
index 57a17e0..d2bb285 100644
--- a/src/Concerns/HasValidation.php
+++ b/src/Concerns/HasValidation.php
@@ -4,6 +4,7 @@
 
 use Closure;
 use Illuminate\Validation\Rule;
+use Illuminate\Validation\Rules\RequiredIf;
 
 trait HasValidation
 {
@@ -61,7 +62,33 @@ public function addRules(string|array $rules): static
      */
     public function getValidationRules(): string|array|null
     {
-        return $this->evaluate($this->validationRules);
+        $rules = $this->evaluate($this->validationRules);
+
+        if (! method_exists($this, 'isRequired') || ! $this->isRequired()) {
+            return $rules;
+        }
+
+        // required() only sets a flag on the base component. Mirror it as a rule so
+        // validators get it even when other rules (max, email, ...) are present.
+        $list = match (true) {
+            $rules === null, $rules === '', $rules === [] => [],
+            is_string($rules) => explode('|', $rules),
+            default => (array) $rules,
+        };
+
+        foreach ($list as $rule) {
+            if ($rule instanceof RequiredIf) {
+                return $rules;
+            }
+
+            if (is_string($rule) && preg_match('/^(required|nullable|sometimes|present|filled|missing|prohibited|exclude)/', $rule)) {
+                return $rules;
+            }
+        }
+
+        array_unshift($list, 'required');
+
+        return is_string($rules) ? implode('|', $list) : $list;
     }
 
     /**
diff --git a/src/Rules/TranslationsRule.php b/src/Rules/TranslationsRule.php
new file mode 100644
index 0000000..12c28ea
--- /dev/null
+++ b/src/Rules/TranslationsRule.php
@@ -0,0 +1,134 @@
+<?php
+
+namespace Laravilt\Forms\Rules;
+
+use Closure;
+use Illuminate\Contracts\Validation\ValidationRule;
+use Illuminate\Contracts\Validation\ValidatorAwareRule;
+use Illuminate\Support\Facades\Validator;
+use Illuminate\Validation\Validator as ValidatorInstance;
+use JsonSerializable;
+
+/**
+ * Validates a locale-keyed translations array (['en' => ..., 'ar' => ...]).
+ *
+ * Each locale has its own rule list. Failures are reported under the nested
+ * key ("title.en"), exactly as if "title.en" => [...] had been registered on
+ * the parent validator. This lets schema consumers that only read one rule
+ * list per field (Schema::getValidationRules() assigns $rules[$name]) still
+ * validate every locale and surface per-locale errors.
+ */
+class TranslationsRule implements JsonSerializable, ValidationRule, ValidatorAwareRule
+{
+    protected ?ValidatorInstance $validator = null;
+
+    /**
+     * @param  array<string, array<int, mixed>>  $rules  Rules per locale code, e.g. ['en' => ['required', 'string']]
+     * @param  array<string, string>  $attributes  Display names per locale code, e.g. ['en' => 'Title (EN)']
+     * @param  array<string, string>  $messages  Custom messages per rule ('required' => ...) or per locale rule ('en.required' => ...)
+     */
+    public function __construct(
+        protected array $rules,
+        protected array $attributes = [],
+        protected array $messages = [],
+    ) {}
+
+    /**
+     * @param  ValidatorInstance  $validator
+     */
+    public function setValidator($validator): static
+    {
+        $this->validator = $validator;
+
+        return $this;
+    }
+
+    public function validate(string $attribute, mixed $value, Closure $fail): void
+    {
+        // Non-array values are reported by the field's 'array' rule
+        if (! is_array($value)) {
+            return;
+        }
+
+        $nested = $this->makeValidator($attribute, $value);
+
+        if ($nested->passes()) {
+            return;
+        }
+
+        // Standalone usage (no parent validator): fail the attribute itself
+        if ($this->validator === null) {
+            $fail($nested->errors()->first());
+
+            return;
+        }
+
+        // Copy the nested errors (title.en, title.ar, ...) onto the parent validator
+        foreach ($nested->errors()->messages() as $key => $messages) {
+            foreach ($messages as $message) {
+                $this->validator->errors()->add($key, $message);
+            }
+        }
+    }
+
+    /**
+     * Rules per locale code.
+     *
+     * @return array<string, array<int, mixed>>
+     */
+    public function getRules(): array
+    {
+        return $this->rules;
+    }
+
+    /**
+     * Rules keyed by nested attribute: ['title.en' => [...], 'title.ar' => [...]].
+     *
+     * @return array<string, array<int, mixed>>
+     */
+    public function getNestedRules(string $attribute): array
+    {
+        $rules = [];
+
+        foreach ($this->rules as $locale => $localeRules) {
+            $rules["{$attribute}.{$locale}"] = $localeRules;
+        }
+
+        return $rules;
+    }
+
+    protected function makeValidator(string $attribute, array $value): ValidatorInstance
+    {
+        $data = [];
+        data_set($data, $attribute, $value);
+
+        $attributes = [];
+        foreach ($this->attributes as $locale => $name) {
+            $attributes["{$attribute}.{$locale}"] = $name;
+        }
+
+        $messages = [];
+        foreach ($this->messages as $key => $message) {
+            // 'en.required' targets one locale, 'required' applies to every locale
+            if (str_contains($key, '.')) {
+                $messages["{$attribute}.{$key}"] = $message;
+
+                continue;
+            }
+
+            foreach (array_keys($this->rules) as $locale) {
+                $messages["{$attribute}.{$locale}.{$key}"] = $message;
+            }
+        }
+
+        return Validator::make($data, $this->getNestedRules($attribute), $messages, $attributes);
+    }
+
+    /**
+     * Serialized as the per-locale rules so field props stay readable JSON.
+     */
+    public function jsonSerialize(): array
+    {
+        return $this->rules;
+    }
+}
diff --git a/tests/Unit/FieldTest.php b/tests/Unit/FieldTest.php
index e085abb..e36b96c 100644
--- a/tests/Unit/FieldTest.php
+++ b/tests/Unit/FieldTest.php
@@ -101,6 +101,34 @@
     expect($this->field->getValidationRules())->toBe(['required', 'email']);
 });
 
+it('mirrors required() as a validation rule alongside other rules', function () {
+    $this->field->required()->rules(['max:255']);
+
+    expect($this->field->getValidationRules())->toBe(['required', 'max:255']);
+});
+
+it('mirrors required() as a validation rule when there are no other rules', function () {
+    $this->field->required();
+
+    expect($this->field->getValidationRules())->toBe(['required']);
+});
+
+it('keeps string rules as a string when adding required', function () {
+    $this->field->required()->rules('email|max:255');
+
+    expect($this->field->getValidationRules())->toBe('required|email|max:255');
+});
+
+it('does not duplicate or override an explicit presence rule', function () {
+    $this->field->required()->rules(['nullable', 'email']);
+
+    expect($this->field->getValidationRules())->toBe(['nullable', 'email']);
+
+    $this->field->rules(['required', 'email']);
+
+    expect($this->field->getValidationRules())->toBe(['required', 'email']);
+});
+
 it('can add validation rule', function () {
     $this->field->rules(['required']);
 
diff --git a/tests/Unit/TranslatableInputTest.php b/tests/Unit/TranslatableInputTest.php
index 5f7f065..000d7e8 100644
--- a/tests/Unit/TranslatableInputTest.php
+++ b/tests/Unit/TranslatableInputTest.php
@@ -1,6 +1,7 @@
 <?php
 
 use Laravilt\Forms\Components\TranslatableInput;
+use Laravilt\Forms\Rules\TranslationsRule;
 use Laravilt\Forms\Support\Locales;
 
 beforeEach(function () {
@@ -173,7 +174,7 @@
 });
 
 it('builds nullable validation rules per locale by default', function () {
-    expect($this->input->getValidationRules())->toBe([
+    expect($this->input->getLocaleValidationRules())->toBe([
         'name' => ['nullable', 'array'],
         'name.en' => ['nullable', 'string'],
         'name.ar' => ['nullable', 'string'],
@@ -184,7 +185,7 @@
 it('requires every locale when the field is required', function () {
     $this->input->required()->maxLength(50);
 
-    expect($this->input->getValidationRules())->toBe([
+    expect($this->input->getLocaleValidationRules())->toBe([
         'name' => ['required', 'array'],
         'name.en' => ['required', 'string', 'max:50'],
         'name.ar' => ['required', 'string', 'max:50'],
@@ -196,7 +197,7 @@
     $this->input->required()->requiredLocales(['en', 'fr']);
 
     expect($this->input->getRequiredLocales())->toBe(['en'])
-        ->and($this->input->getValidationRules())->toBe([
+        ->and($this->input->getLocaleValidationRules())->toBe([
             'name' => ['required', 'array'],
             'name.en' => ['required', 'string'],
             'name.ar' => ['nullable', 'string'],
@@ -207,7 +208,66 @@
 it('appends custom rules to every locale', function () {
     $this->input->rules(['min:2']);
 
-    expect($this->input->getValidationRules()['name.ar'])->toBe(['nullable', 'string', 'min:2']);
+    expect($this->input->getLocaleRules()['ar'])->toBe(['nullable', 'string', 'min:2']);
+});
+
+it('exposes one rule list per field for schema consumers', function () {
+    $this->input->required()->requiredLocales(['en'])->maxLength(50);
+
+    $rules = $this->input->getValidationRules();
+
+    expect($rules[0])->toBe('required')
+        ->and($rules[1])->toBe('array')
+        ->and($rules[2])->toBeInstanceOf(TranslationsRule::class)
+        ->and($rules[2]->getRules())->toBe([
+            'en' => ['required', 'string', 'max:50'],
+            'ar' => ['nullable', 'string', 'max:50'],
+            'ckb' => ['nullable', 'string', 'max:50'],
+        ])
+        ->and(json_decode(json_encode($rules), true)[2])->toBe($rules[2]->getRules());
+});
+
+it('reports per-locale errors when validated as a schema field', function () {
+    $this->input->label('Name')->required()->requiredLocales(['en'])->maxLength(5);
+
+    $validator = validator(
+        ['name' => ['en' => '', 'ar' => 'طويل جدا', 'ckb' => '']],
+        ['name' => $this->input->getValidationRules()],
+    );
+
+    expect($validator->fails())->toBeTrue()
+        ->and($validator->errors()->keys())->toBe(['name.en', 'name.ar'])
+        ->and($validator->errors()->first('name.en'))->toBe('The Name (EN) field is required.')
+        ->and($validator->errors()->first('name.ar'))->toBe('The Name (AR) field must not be greater than 5 characters.');
+});
+
+it('passes validation when every required locale is filled', function () {
+    $this->input->required()->requiredLocales(['en']);
+
+    $validator = validator(
+        ['name' => ['en' => 'Hello', 'ar' => '', 'ckb' => '']],
+        ['name' => $this->input->getValidationRules()],
+    );
+
+    expect($validator->passes())->toBeTrue();
+});
+
+it('uses custom messages per locale rule', function () {
+    $this->input->required()->requiredLocales(['en'])->validationMessages(['required' => 'Fill me in']);
+
+    $validator = validator(['name' => ['en' => '']], ['name' => $this->input->getValidationRules()]);
+
+    expect($validator->errors()->first('name.en'))->toBe('Fill me in');
+});
+
+it('names nested locale attributes', function () {
+    $this->input->label('Name');
+
+    expect($this->input->getValidationAttributes())->toBe([
+        'name.en' => 'Name (EN)',
+        'name.ar' => 'Name (AR)',
+        'name.ckb' => 'Name (CKB)',
+    ]);
 });
 
 it('hydrates from a json string', function () {

From 61b72ceb4ec3fdab1b43cd90cbf34e713512d07b Mon Sep 17 00:00:00 2001
From: swara <swara09@gmail.com>
Date: Wed, 16 Sep 2026 21:49:11 +0200
Subject: [PATCH 8/9] refactor(core): Improve TranslatableInput dialog headers

---
 resources/js/components/fields/TranslatableInput.vue    | 3 ++-
 resources/react/components/fields/TranslatableInput.tsx | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/fields/TranslatableInput.vue b/resources/js/components/fields/TranslatableInput.vue
index d02344b..6e02f5a 100644
--- a/resources/js/components/fields/TranslatableInput.vue
+++ b/resources/js/components/fields/TranslatableInput.vue
@@ -102,7 +102,8 @@
                         </button>
                     </DialogTrigger>
                     <DialogContent class="flex max-h-[85vh] flex-col gap-0 p-0 sm:max-w-xl">
-                        <DialogHeader class="border-b px-6 py-4">
+                        <!-- Logical alignment + end padding so the title follows the UI direction and clears the close button -->
+                        <DialogHeader class="border-b px-6 py-4 pe-12 text-start sm:text-start">
                             <DialogTitle>{{ label || trans('forms::forms.translatable_input.translations') }}</DialogTitle>
                             <DialogDescription>
                                 {{ trans('forms::forms.translatable_input.description') }}
diff --git a/resources/react/components/fields/TranslatableInput.tsx b/resources/react/components/fields/TranslatableInput.tsx
index 0b37bed..7fe8683 100644
--- a/resources/react/components/fields/TranslatableInput.tsx
+++ b/resources/react/components/fields/TranslatableInput.tsx
@@ -349,7 +349,8 @@ export default function TranslatableInput(props: TranslatableInputProps) {
                                 </button>
                             </DialogTrigger>
                             <DialogContent className="flex max-h-[85vh] flex-col gap-0 p-0 sm:max-w-xl">
-                                <DialogHeader className="border-b px-6 py-4">
+                                {/* Logical alignment + end padding so the title follows the UI direction and clears the close button */}
+                                <DialogHeader className="border-b px-6 py-4 pe-12 text-start sm:text-start">
                                     <DialogTitle>{label || trans('forms::forms.translatable_input.translations')}</DialogTitle>
                                     <DialogDescription>{trans('forms::forms.translatable_input.description')}</DialogDescription>
                                 </DialogHeader>

From 6c6516913a2525f95a98c933342629406478dc32 Mon Sep 17 00:00:00 2001
From: Fady Mondy <EngFadyMondy@gmail.com>
Date: Thu, 17 Sep 2026 16:46:41 +0300
Subject: [PATCH 9/9] Register TranslatableInput in the Section field maps and
 align Vue with React

- forms Section.vue / Section.tsx resolve fields only through their own map,
  so a TranslatableInput inside a Section rendered as an empty div
- Vue re-syncs the value when the allowed locales change, like the React effect
- use the end-1.5 utility on the globe button in both stacks

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 resources/js/components/fields/TranslatableInput.vue | 8 ++++----
 resources/js/components/schema/Section.vue           | 1 +
 resources/react/components/schema/Section.tsx        | 1 +
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/resources/js/components/fields/TranslatableInput.vue b/resources/js/components/fields/TranslatableInput.vue
index 6e02f5a..03cc026 100644
--- a/resources/js/components/fields/TranslatableInput.vue
+++ b/resources/js/components/fields/TranslatableInput.vue
@@ -91,7 +91,7 @@
                     <DialogTrigger as-child>
                         <button
                             type="button"
-                            class="absolute inset-e-1.5 flex items-center gap-0.5 text-muted-foreground transition-colors hover:text-foreground disabled:pointer-events-none disabled:opacity-50"
+                            class="absolute end-1.5 flex items-center gap-0.5 text-muted-foreground transition-colors hover:text-foreground disabled:pointer-events-none disabled:opacity-50"
                             :class="multiline ? 'top-2' : 'top-1/2 -translate-y-1/2'"
                             :disabled="disabled"
                             :aria-label="trans('forms::forms.translatable_input.translations')"
@@ -316,10 +316,10 @@ const localValue = ref<Translations>(parseTranslations(props.modelValue ?? props
 const active = ref<string>(preferredActive());
 const dialogOpen = ref(false);
 
-// Sync local value when the prop changes from an external source
+// Sync local value when the prop or the allowed locales change (React: effect on incoming + localeCodes)
 watch(
-    () => props.modelValue ?? props.value,
-    (value) => {
+    [() => props.modelValue ?? props.value, localeCodes],
+    ([value]) => {
         const next = parseTranslations(value);
         if (JSON.stringify(next) !== JSON.stringify(localValue.value)) {
             localValue.value = next;
diff --git a/resources/js/components/schema/Section.vue b/resources/js/components/schema/Section.vue
index 4df5cae..3f0a031 100644
--- a/resources/js/components/schema/Section.vue
+++ b/resources/js/components/schema/Section.vue
@@ -109,6 +109,7 @@ const componentMap: Record<string, any> = {
     // Form field components
     text_input: defineAsyncComponent(() => import('../fields/TextInput.vue')),
     textarea: defineAsyncComponent(() => import('../fields/Textarea.vue')),
+    translatable_input: defineAsyncComponent(() => import('../fields/TranslatableInput.vue')),
     select: defineAsyncComponent(() => import('../fields/Select.vue')),
     checkbox: defineAsyncComponent(() => import('../fields/Checkbox.vue')),
     checkbox_list: CheckboxList,
diff --git a/resources/react/components/schema/Section.tsx b/resources/react/components/schema/Section.tsx
index 9ab3ae4..41661da 100644
--- a/resources/react/components/schema/Section.tsx
+++ b/resources/react/components/schema/Section.tsx
@@ -27,6 +27,7 @@ const componentMap: Record<string, AnyComponent> = {
     // Form field components
     text_input: lazy(() => import('../fields/TextInput')),
     textarea: lazy(() => import('../fields/Textarea')),
+    translatable_input: lazy(() => import('../fields/TranslatableInput')),
     select: lazy(() => import('../fields/Select')),
     checkbox: lazy(() => import('../fields/Checkbox')),
     checkbox_list: CheckboxList,