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(2mo ago)62.9k↑130.8%3MITPHPPHP ^8.2|^8.3|^8.4CI passing

Since Mar 6Pushed 2mo 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 today

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

49

—

FairBetter than 95% of packages

Maintenance88

Actively maintained with recent releases

Popularity27

Limited adoption so far

Community9

Small or concentrated contributor base

Maturity60

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

61d 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

[asosick/filament-layout-manager

Allow users to create &amp; customize their own FilamentPHP pages composed of Livewire components

5717.5k1](/packages/asosick-filament-layout-manager)[a21ns1g4ts/filament-short-url

This is my package filament-short-url

243.3k](/packages/a21ns1g4ts-filament-short-url)[andreia/filament-ui-switcher

Add a modal with options to switch between different UI layouts and styles (colors, fonts, font sizes).

223.1k](/packages/andreia-filament-ui-switcher)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)
