diff --git a/CHANGELOG.md b/CHANGELOG.md
index 735c003..41feb01 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +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 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/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..ebe815b 100644
--- a/config/laravilt-forms.php
+++ b/config/laravilt-forms.php
@@ -29,5 +29,40 @@
         'middleware' => ['web', 'auth', 'throttle:120,1'],
     ],
 
+    /*
+    |--------------------------------------------------------------------------
+    | Locales
+    |--------------------------------------------------------------------------
+    |
+    | The locales offered by TranslatableInput when a field does not call
+    | ->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' => [
+    |     '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. When
+    | both lists are empty the field falls back to the application locale.
+    |
+    */
+
+    'locales' => [],
+
     // Add your configuration options here
 ];
diff --git a/docs/index.md b/docs/index.md
index c48fe61..26e9a71 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 dialog
 - **NumberField**: Numeric input with min/max
 - **Select**: Dropdown select with search
 - **Checkbox**: Single checkbox
@@ -261,6 +262,116 @@ 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' => 'العنوان', 'ckb' => 'ناونیشان']`). The main input edits the active
+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
+TranslatableInput::make('name')
+    ->label('Name')
+    ->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
+    ->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 `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 dialog 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
+'locales' => [
+    'en' => ['name' => 'English', 'direction' => 'ltr'],
+    'ar' => ['name' => 'العربية', 'direction' => 'rtl'],
+    'ckb' => ['name' => 'کوردی', 'direction' => 'rtl'],
+],
+// or simply: 'locales' => ['en', 'ar', 'ckb'],
+```
+
+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.
+
+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
+$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', '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:
+
+```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 +703,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..4df11f3 100644
--- a/lang/ar/forms.php
+++ b/lang/ar/forms.php
@@ -93,4 +93,11 @@
         'search_placeholder' => 'بحث في الصلاحيات...',
         'no_results' => 'لم يتم العثور على صلاحيات',
     ],
+
+    // TranslatableInput Component
+    'translatable_input' => [
+        'translations' => 'الترجمات',
+        'description' => 'حرّر هذا الحقل بكل اللغات.',
+        'done' => 'تم',
+    ],
 ];
diff --git a/lang/ckb/forms.php b/lang/ckb/forms.php
index 0e7e055..a7eaa7f 100644
--- a/lang/ckb/forms.php
+++ b/lang/ckb/forms.php
@@ -93,4 +93,11 @@
         'search_placeholder' => 'گەڕان بۆ دەسەڵاتەکان...',
         'no_results' => 'هیچ دەسەڵاتێک نەدۆزرایەوە',
     ],
+
+    // TranslatableInput Component
+    'translatable_input' => [
+        'translations' => 'وەرگێڕانەکان',
+        'description' => 'ئەم خانەیە بە هەموو زمانەکان دەستکاری بکە.',
+        'done' => 'تەواو',
+    ],
 ];
diff --git a/lang/en/forms.php b/lang/en/forms.php
index 26632d3..00ba5ee 100644
--- a/lang/en/forms.php
+++ b/lang/en/forms.php
@@ -93,4 +93,11 @@
         'search_placeholder' => 'Search permissions...',
         'no_results' => 'No permissions found',
     ],
+
+    // TranslatableInput Component
+    'translatable_input' => [
+        'translations' => 'Translations',
+        'description' => 'Edit this field in every language.',
+        'done' => 'Done',
+    ],
 ];
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..03cc026
--- /dev/null
+++ b/resources/js/components/fields/TranslatableInput.vue
@@ -0,0 +1,379 @@
+<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 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="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>
+                    </DialogTrigger>
+                    <DialogContent class="flex max-h-[85vh] flex-col gap-0 p-0 sm:max-w-xl">
+                        <!-- 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') }}
+                            </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>
+                        <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 -->
+            <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 { 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 { 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());
+const dialogOpen = ref(false);
+
+// Sync local value when the prop or the allowed locales change (React: effect on incoming + localeCodes)
+watch(
+    [() => props.modelValue ?? props.value, localeCodes],
+    ([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/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/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..7fe8683
--- /dev/null
+++ b/resources/react/components/fields/TranslatableInput.tsx
@@ -0,0 +1,435 @@
+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 { 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 [dialogOpen, setDialogOpen] = useState(false);
+    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 dialog (hidden with a single locale) */}
+                    {hasLocaleSwitcher && (
+                        <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+                            <DialogTrigger 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>
+                            </DialogTrigger>
+                            <DialogContent className="flex max-h-[85vh] flex-col gap-0 p-0 sm:max-w-xl">
+                                {/* 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>
+                                <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>
+
+                {/* 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/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,
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..40a660e
--- /dev/null
+++ b/src/Components/TranslatableInput.php
@@ -0,0 +1,365 @@
+<?php
+
+namespace Laravilt\Forms\Components;
+
+use Closure;
+use Laravilt\Forms\Rules\TranslationsRule;
+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 (errors reported as 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'),
+     * config('app.available_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;
+    }
+
+    /**
+     * 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
+    {
+        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 = [];
+
+        foreach ($this->getLocales() as $locale) {
+            $localeRules = [in_array($locale, $required, true) ? 'required' : 'nullable', 'string'];
+
+            if ($this->maxLength !== null) {
+                $localeRules[] = "max:{$this->maxLength}";
+            }
+
+            $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.
+     */
+    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/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/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/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/src/Support/Locales.php b/src/Support/Locales.php
new file mode 100644
index 0000000..04b9138
--- /dev/null
+++ b/src/Support/Locales.php
@@ -0,0 +1,190 @@
+<?php
+
+namespace Laravilt\Forms\Support;
+
+/**
+ * Locale metadata helper for translatable fields.
+ *
+ * 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'), 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;
+    }
+
+    /**
+     * 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));
+    }
+
+    /**
+     * 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 fromApp(): array
+    {
+        $locales = config('app.available_locales');
+
+        if (! is_array($locales)) {
+            return [];
+        }
+
+        $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 static::fromApp()[$locale] ?? [];
+    }
+
+    /**
+     * 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/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
new file mode 100644
index 0000000..000d7e8
--- /dev/null
+++ b/tests/Unit/TranslatableInputTest.php
@@ -0,0 +1,328 @@
+<?php
+
+use Laravilt\Forms\Components\TranslatableInput;
+use Laravilt\Forms\Rules\TranslationsRule;
+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 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']);
+
+    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->getLocaleValidationRules())->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->getLocaleValidationRules())->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->getLocaleValidationRules())->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->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 () {
+    $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);
+});