PHPackages alkoumi/filament-image-radio-button - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Templating & Views](/categories/templating) 4. / 5. alkoumi/filament-image-radio-button ActiveLibrary[Templating & Views](/categories/templating) alkoumi/filament-image-radio-button =================================== Filament Form Radio Button But With Images v2.0.3(1mo ago)73.0k↓30.6%31MITPHPPHP ^8.2|^8.3|^8.4CI passing Since Mar 6Pushed 1mo ago1 watchersCompare [ Source](https://github.com/alkoumi/filament-image-radio-button)[ Packagist](https://packagist.org/packages/alkoumi/filament-image-radio-button)[ Docs](https://github.com/alkoumi/filament-image-radio-button)[ GitHub Sponsors](https://github.com/alkoumi)[ RSS](/packages/alkoumi-filament-image-radio-button/feed)WikiDiscussions main Synced 3w ago READMEChangelog (10)Dependencies (12)Versions (13)Used By (1) Filament Image Radio Button =========================== [](#filament-image-radio-button) A Filament form component that replaces traditional radio buttons with image selection. Supports RTL and Dark Mode. [![Total Downloads](https://camo.githubusercontent.com/b02d5d80d13481ae5dbdba472d1f432e1802a5207d2d0ea6b286dea86806ac40/68747470733a2f2f706f7365722e707567782e6f72672f616c6b6f756d692f66696c616d656e742d696d6167652d726164696f2d627574746f6e2f646f776e6c6f616473)](https://packagist.org/packages/alkoumi/filament-image-radio-button)[![Packagist Stars](https://camo.githubusercontent.com/312a37a9f02ad7f52479d481d2e9d2f614ecfe02119e58c0b8b7e42fdeeb8d59/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f73746172732f616c6b6f756d692f66696c616d656e742d696d6167652d726164696f2d627574746f6e3f636f6c6f723d79656c6c6f77)](https://camo.githubusercontent.com/312a37a9f02ad7f52479d481d2e9d2f614ecfe02119e58c0b8b7e42fdeeb8d59/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f73746172732f616c6b6f756d692f66696c616d656e742d696d6167652d726164696f2d627574746f6e3f636f6c6f723d79656c6c6f77)[![License](https://camo.githubusercontent.com/f11c67a039b14e5f6a3b1c2b45392c0dc8547c682f20a8b50f0c72897071adf2/68747470733a2f2f706f7365722e707567782e6f72672f616c6b6f756d692f66696c616d656e742d696d6167652d726164696f2d627574746f6e2f6c6963656e7365)](https://packagist.org/packages/alkoumi/filament-image-radio-button)[![Latest Version on Packagist](https://camo.githubusercontent.com/49493e0586699087141989466f79c31941a092966c731f3453f60a008cb7677e/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f616c6b6f756d692f66696c616d656e742d696d6167652d726164696f2d627574746f6e2e737667)](https://packagist.org/packages/alkoumi/filament-image-radio-button)[![GitHub Tests Action Status](https://camo.githubusercontent.com/a7ac986994bc9cff9b44db13b3e6f0f53d5f8de35dadc134901f14c3df3764b3/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f616c6b6f756d692f66696c616d656e742d696d6167652d726164696f2d627574746f6e2f72756e2d74657374732e796d6c3f6272616e63683d6d61696e266c6162656c3d7465737473)](https://github.com/alkoumi/filament-image-radio-button/actions?query=workflow%3Arun-tests+branch%3Amain) [![Demo](art/filament-image-radio-button.gif)](art/filament-image-radio-button.gif) Requirements ------------ [](#requirements) VersionPHPFilamentLivewireLaravel2.x8.2+3.x, 4.x, 5.x3.x, 4.x10.x, 11.x, 12.x1.x8.1+3.x, 4.x3.x10.x, 11.xInstallation ------------ [](#installation) ``` composer require alkoumi/filament-image-radio-button ``` ### Theme Setup (Filament 4+) [](#theme-setup-filament-4) 1. Create a custom theme: [Filament Docs](https://filamentphp.com/docs/3.x/panels/themes#creating-a-custom-theme) 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 ----- [](#usage) ### Basic Usage [](#basic-usage) ``` use Alkoumi\FilamentImageRadioButton\Forms\Components\ImageRadioGroup; ImageRadioGroup::make('report_id') ->disk('reports') ->options(fn () => Report::pluck('file', 'id')->toArray()) ``` ### Full API [](#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 [](#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 ------------- [](#configuration) ### Storage Disk Setup [](#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-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 ----------- [](#screenshots) [![Modes](art/filament-plugin-modes.jpg)](art/filament-plugin-modes.jpg) Changelog --------- [](#changelog) Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently. Contributing ------------ [](#contributing) Please see [CONTRIBUTING](.github/CONTRIBUTING.md) for details. Security Vulnerabilities ------------------------ [](#security-vulnerabilities) Please review [our security policy](../../security/policy) on how to report security vulnerabilities. Credits ------- [](#credits) - [Mohamed alkoumi](https://github.com/alkoumi) - [All Contributors](../../contributors) License ------- [](#license) The MIT License (MIT). Please see [License File](LICENSE.md) for more information. ### Health Score 52 — FairBetter than 96% of packages Maintenance92 Actively maintained with recent releases Popularity28 Limited adoption so far Community11 Small or concentrated contributor base Maturity62 Established project with proven stability Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~43 days Recently: every ~80 days Total 11 Last Release 38d ago Major Versions v1.1.7 → 2.0.02026-01-22 PHP version history (2 changes)v1.1.0PHP ^8.1|^8.2|^8.3|^8.4 2.0.0PHP ^8.2|^8.3|^8.4 ### Community Maintainers ![](https://www.gravatar.com/avatar/7347145dd8f0802bd4458a339dd6ed9431c4e2533ba3e8808137c706cef1f5a4?d=identicon)[alkoumi](/maintainers/alkoumi) --- Top Contributors [![alkoumi](https://avatars.githubusercontent.com/u/10585943?v=4)](https://github.com/alkoumi "alkoumi (31 commits)") --- Tags laravelfilamentalkoumiimage-selectimage-radio-buttonfilament-image-radio-button ### Code Quality TestsPest ### Embed Badge ![Health badge](/badges/alkoumi-filament-image-radio-button/health.svg) ``` [![Health](https://phpackages.com/badges/alkoumi-filament-image-radio-button/health.svg)](https://phpackages.com/packages/alkoumi-filament-image-radio-button) ``` ### Alternatives [rawilk/profile-filament-plugin Profile & MFA starter kit for filament. 3913.7k](/packages/rawilk-profile-filament-plugin)[stephenjude/filament-jetstream A Laravel starter kit built with Filament inspired by Jetstream. 17758.9k2](/packages/stephenjude-filament-jetstream)[stephenjude/filament-two-factor-authentication Filament Two Factor Authentication: Google 2FA + Passkey Authentication 84192.9k8](/packages/stephenjude-filament-two-factor-authentication)[marcelweidum/filament-passkeys Use passkeys in your filamentphp app 6643.3k1](/packages/marcelweidum-filament-passkeys)[andreia/filament-ui-switcher Add a modal with options to switch between different UI layouts and styles (colors, fonts, font sizes). 245.8k](/packages/andreia-filament-ui-switcher)[mradder/filament-logger Audit logging, activity tracking, exports, alerts, and dashboards for Filament admin panels. 2310.5k](/packages/mradder-filament-logger) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)