jegex / filament-translatable
Translation component for Filament PHP.
Requires
- php: ^8.2
- filament/filament: ^4.3.1|^5.0
- spatie/laravel-package-tools: ^1.15
Requires (Dev)
- astrotomic/laravel-translatable: ^11.0
- laravel/pint: ^1.0
- orchestra/testbench: ^9.16|^10.0
- pestphp/pest: ^3.0|^4.2
- pestphp/pest-plugin-laravel: ^3.0|^4.0
- pestphp/pest-plugin-livewire: ^3.0|^4.0
- spatie/laravel-translatable: ^6.0
Suggests
- astrotomic/laravel-translatable: Alternative way for handling translations in Laravel using separate database tables.
- spatie/laravel-translatable: For handling translations in Laravel using JSON fields.
This package is auto-updated.
Last update: 2026-04-10 21:51:25 UTC
README
Filament Translatable is a flexible package that provides a complete solution for managing multilingual content in Filament admin panels. It uses a tabbed interface with Repeater component, allowing you to easily create translatable form fields with an intuitive UI.
Key Features
- Tab-Based UI with Repeater — extends Filament Repeater, leveraging all Repeater features
- Locale Tabs with Flags — horizontal or vertical tabs with 200+ built-in SVG flags
- Clone Locale — duplicate translations between locales
- Multiple Translation Backends — supports both spatie/laravel-translatable and astrotomic/laravel-translatable
- Flexible Locale Configuration — define locales globally or per-component
- Vertical & Horizontal Tabs — choose your preferred layout
- Scrollable Tabs — for managing many languages
Installation
You can install the package via composer:
composer require jegex/filament-translatable
Publish the assets:
php artisan filament:assets
Configuration
With spatie/laravel-translatable
The Spatie package is the default translation backend. Follow the instructions in the Spatie documentation to properly configure your models.
With astrotomic/laravel-translatable
The Astrotomic package is an alternative translation backend.
Follow the Astrotomic documentation to configure your models.
When using the Astrotomic package, configure the plugin to use Astrotomic mode:
use Jegex\FilamentTranslatable\Enums\TranslationMode; FilamentTranslatablePlugin::make() ->translationMode(TranslationMode::Astrotomic)
Setup
use Jegex\FilamentTranslatable\FilamentTranslatablePlugin; public function panel(Panel $panel): Panel { return $panel ->plugin(FilamentTranslatablePlugin::make()); }
Setting translatable locales
To set up the locales that can be used to translate content, pass an array of locales to the locales() plugin method:
FilamentTranslatablePlugin::make() ->locales(['en', 'id', 'fr', 'de']),
You can set locale labels using key => value array:
FilamentTranslatablePlugin::make() ->locales([ 'en' => __('('English'), 'id' => __('Indonesian'), 'fr' => __('French'), ])
Also, you can pass a Closure:
FilamentTranslatablePlugin::make() ->locales(fn () => Language::pluck('code', 'name'))
Setting default locale
You can set the default locale using the defaultLocale() method:
FilamentTranslatablePlugin::make() ->defaultLocale('en'),
Enable or disable flags in locale labels
You can enable or disable flags in locale labels (disabled by default):
FilamentTranslatablePlugin::make() ->displayFlagsInLocaleLabels(true)
Setting flag width
You can set the flag width using:
FilamentTranslatablePlugin::make() ->flagWidth('24px')
Usage
Basic Usage
use Jegex\FilamentTranslatable\Forms\Component\Translations; use Filament\Forms\Components\TextInput; use Filament\Forms\Components\Textarea; Translations::make('translations') ->schema([ TextInput::make('title'), Textarea::make('content'), ])
Vertical Tabs
You can display translations as vertical tabs:
use Jegex\FilamentTranslatable\Forms\Component\Translations; Translations::make('translations') ->vertical() ->schema([ TextInput::make('title'), Textarea::make('content'), ])
Scrollable Tabs
Enable horizontal scroll for tabs when you have many languages:
Translations::make('translations') ->scrollable() ->locales(['en', 'id', 'fr', 'de', 'es', 'it', 'pt', 'ru', 'zh', 'ja', 'ko', 'ar']) ->schema([...])
Clone Locale
The package includes a built-in clone locale feature that allows you to duplicate translations from one locale to another:
use Jegex\FilamentTranslatable\Forms\Component\Translations; Translations::make('translations') ->schema([ TextInput::make('title'), ])
Display Flags
Enable flags in locale labels:
use Jegex\FilamentTranslatable\Forms\Component\Translations; Translations::make('translations') ->displayFlagsInLocaleLabels(true) ->flagWidth('24px') ->schema([...])
Using with Astrotomic Mode
use Jegex\FilamentTranslatable\Enums\TranslationMode; use Jegex\FilamentTranslatable\Forms\Component\Translations; Translations::make('translations') ->translationMode(TranslationMode::Astrotomic) ->schema([ TextInput::make('name'), ])
Overriding Plugin Settings per Component
You can override the global plugin settings directly on individual components:
use Jegex\FilamentTranslatable\Forms\Component\Translations; Translations::make() ->displayNamesInLocaleLabels(false) ->displayFlagsInLocaleLabels(true) ->flagWidth('32px')
Full Example
use Jegex\FilamentTranslatable\FilamentTranslatablePlugin; use Jegex\FilamentTranslatable\Forms\Component\Translations; use Filament\Forms\Components\TextInput; use Filament\Forms\Components\RichEditor; public function panel(Panel $panel): Panel { return $panel ->plugin( FilamentTranslatablePlugin::make() ->locales(['en', 'id', 'fr', 'de']) ->defaultLocale('en') ->displayFlagsInLocaleLabels(true) ->displayNamesInLocaleLabels(true) ->flagWidth('24px') ); } public static function form(Form $form): Form { return $form->schema([ TextInput::make('slug'), Translations::make('translations') ->vertical() ->displayFlagsInLocaleLabels() ->schema([ TextInput::make('title'), RichEditor::make('content'), ]) ->columns(1), ]); }
Changelog
Please see CHANGELOG for more information on what has changed recently.
Contributing
Please see CONTRIBUTING for details.
Security Vulnerabilities
Please review our security policy on how to report security vulnerabilities.
Credits
License
The MIT License (MIT). Please see License File for more information.