Image Radio Button by Mohamed Alkoumi

• Requirements
• Installation
  • Theme Setup (Filament 4+)
• Usage
  • Basic Usage
  • Full API
  • Dynamic Options
• Configuration
  • Storage Disk Setup
  • Options Format
• Screenshots
• Changelog
• Contributing
• Security Vulnerabilities
• Credits
• License

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.