Filament Image Radio Button

A Filament form component that replaces traditional radio buttons with image selection. Supports RTL and Dark Mode.

Requirements

Installation

composer require alkoumi/filament-image-radio-button

Theme Setup (Filament 4+)

1. Create a custom theme: Filament Docs

2. Add the package views to your theme CSS:

@source '../../../../vendor/alkoumi/filament-image-radio-button/resources/views/**/*.blade.php';

3. Register the theme in your Panel Provider:

->viteTheme('resources/css/filament/admin/theme.css')

4. Build assets:

npm run build

Usage

Basic Usage

use Alkoumi\FilamentImageRadioButton\Forms\Components\ImageRadioGroup;

ImageRadioGroup::make('report_id')
    ->disk('reports')
    ->options(fn () => Report::pluck('file', 'id')->toArray())

Full API

use Alkoumi\FilamentImageRadioButton\Forms\Components\ImageRadioGroup;

ImageRadioGroup::make('report_id')
    ->label(__('Report Design'))
    ->required()
    ->disk('reports')                    // Storage disk name
    ->options(fn () => [...])            // Array of [ id => image_path ]
    ->gridColumns(4)                     // Number of columns (default: 3)
    ->live()                             // Enable live updates

Dynamic Options

ImageRadioGroup::make('report_id')
    ->disk('reports')
    ->options(fn (Get $get) => Report::whereType($get('type_id'))->pluck('file', 'id')->toArray())
    ->afterStateUpdated(fn (Get $get, Set $set, ?string $state) =>
        $set('selected_report', Report::find($state))
    )
    ->live()

Configuration

Storage Disk Setup

Define a disk in config/filesystems.php:

'reports' => [
    'driver' => 'local',
    'root' => storage_path('app/public/reports'),
    'url' => env('APP_URL') . '/storage/reports',
    'visibility' => 'public',
],

Options Format

Options must be an array where:

• Key: The value to store (e.g., model ID)
• Value: The image path relative to the disk

// Example: ['1' => 'storage/template1.jpg', '2' => 'storage/template2.png']
Report::pluck('image_path', 'id')->toArray()

Screenshots

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

• Mohamed alkoumi
• All Contributors

License

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