Filament Translatable Spatie & Astrotomic

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

• jegex
• All Contributors

License

The MIT License (MIT). Please see License File for more information.