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. alkoumi/filament-image-radio-button ActiveLibrary alkoumi/filament-image-radio-button =================================== Filament Form Radio Button But With Images 2.0.0(3mo ago)62.9k↑130.8%3MITPHPPHP ^8.2|^8.3|^8.4CI passing Since Mar 6Pushed 3mo 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 1mo ago READMEChangelog (9)Dependencies (6)Versions (10)Used By (0) 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](filament-image-radio-button.gif)](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](filament-plugin-modes.jpg)](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 48 — FairBetter than 94% of packages Maintenance79 Regular maintenance activity Popularity27 Limited adoption so far Community9 Small or concentrated contributor base Maturity61 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 ~40 days Recently: every ~55 days Total 9 Last Release 110d 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 (24 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 [jibaymcs/filament-tour Bring the power of DriverJs to your Filament panels and start a tour ! 12247.8k](/packages/jibaymcs-filament-tour)[guava/filament-modal-relation-managers Allows you to embed relation managers inside filament modals. 7565.0k4](/packages/guava-filament-modal-relation-managers)[andreia/filament-ui-switcher Add a modal with options to switch between different UI layouts and styles (colors, fonts, font sizes). 233.8k](/packages/andreia-filament-ui-switcher)[a2insights/filament-saas Filament Saas for A2Insights 161.1k](/packages/a2insights-filament-saas)[tapp/filament-webhook-client Add a Filament resource and a policy for Spatie Webhook client 1120.2k](/packages/tapp-filament-webhook-client)[jeffersongoncalves/filament-topbar A simple yet effective Filament plugin that automatically adds a customized topbar to your Filament admin panel. This plugin enhances your Filament panel's user experience by replacing the default topbar component with an improved version that displays navigation and user interface elements in strategic locations. 171.2k](/packages/jeffersongoncalves-filament-topbar) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)