PHPackages daikazu/filament-image-checkbox-group - 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. daikazu/filament-image-checkbox-group ActiveLibrary daikazu/filament-image-checkbox-group ===================================== Image-based checkbox group component for FilamentPHP v2.1.0(3mo ago)41.4k—0%1MITBladePHP ^8.3CI passing Since Mar 21Pushed 2mo ago1 watchersCompare [ Source](https://github.com/daikazu/filament-image-checkbox-group)[ Packagist](https://packagist.org/packages/daikazu/filament-image-checkbox-group)[ Docs](https://github.com/daikazu/filament-image-checkbox-group)[ GitHub Sponsors](https://github.com/:vendor_name)[ RSS](/packages/daikazu-filament-image-checkbox-group/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (4)Dependencies (13)Versions (7)Used By (0) ![Logo for Filament Image Checkbox Group](docs/header-light.png)[![Latest Version on Packagist](https://camo.githubusercontent.com/80a322068c5f2930a9d0cedbdf0db8143a990a888e926a93f226a70fcf311c76/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6461696b617a752f66696c616d656e742d696d6167652d636865636b626f782d67726f75702e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/daikazu/filament-image-checkbox-group)[![GitHub Tests Action Status](https://camo.githubusercontent.com/017cc00458ab1dc1809526c25b176be05706697b7b53384e064b3c817a6b7f86/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f6461696b617a752f66696c616d656e742d696d6167652d636865636b626f782d67726f75702f72756e2d74657374732e796d6c3f6272616e63683d6d61696e266c6162656c3d7465737473267374796c653d666c61742d737175617265)](https://github.com/daikazu/filament-image-checkbox-group/actions?query=workflow%3Arun-tests+branch%3Amain)[![GitHub Code Style Action Status](https://camo.githubusercontent.com/0a5fde8e40b9c6e163911a3990881de85a221ee0db12c0146a92403f4b2ce78f/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f6461696b617a752f66696c616d656e742d696d6167652d636865636b626f782d67726f75702f6669782d7068702d636f64652d7374796c652d6973737565732e796d6c3f6272616e63683d6d61696e266c6162656c3d636f64652532307374796c65267374796c653d666c61742d737175617265)](https://github.com/daikazu/filament-image-checkbox-group/actions?query=workflow%3A%22Fix+PHP+code+style+issues%22+branch%3Amain)[![Total Downloads](https://camo.githubusercontent.com/6387494c3570bbb9e1c12b9a8c8430089fc1d5bf891fa9faee5de8bcde8f848b/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f6461696b617a752f66696c616d656e742d696d6167652d636865636b626f782d67726f75702e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/daikazu/filament-image-checkbox-group) Filament Image Checkbox Group ============================= [](#filament-image-checkbox-group) A custom form component for FilamentPHP v4 that displays checkbox group options as image-based selectable buttons. [![Screenshot of Image Checkbox Group](docs/screenshot.png)](docs/screenshot.png) Features -------- [](#features) - Styled as buttons instead of traditional checkboxes - Contains an image and an optional label for each option - Allows multiple selections - Supports `min` and `max` selection constraints - Optional requirement validation with min/max enforcement - Emits selected values to Livewire as an array - Styled options as cards with hover/active states - Prevents selecting more than max items - Compact label mode for text-only button styling - Image preview popover on hover (in compact mode) - Reusable as a custom form field - Full keyboard accessibility support (WCAG 2.1 AA compliant) - Respects `prefers-reduced-motion` for users with vestibular disorders Installation ------------ [](#installation) You can install the package via composer: ``` composer require daikazu/filament-image-checkbox-group ``` ### Styling Configuration [](#styling-configuration) if you don't have a theme already, you need to create one. check [Filamentphp Theme](https://filamentphp.com/docs/4.x/styling/overview#creating-a-custom-theme) after you're done, add the following to your resources/filament/admin/theme.css (depending on your panel) ``` @source '../../../../vendor/daikazu/filament-image-checkbox-group/resources/views/**/*.blade.php'; ``` finally, run `npm run build` You can publish the config file with: ``` php artisan vendor:publish --tag="filament-image-checkbox-group-config" ``` Optionally, you can publish the views using: ``` php artisan vendor:publish --tag="filament-image-checkbox-group-views" ``` Usage ----- [](#usage) ``` use Daikazu\FilamentImageCheckboxGroup\Forms\Components\ImageCheckboxGroup; // In your form schema ImageCheckboxGroup::make('amenities') ->options([ 'wifi' => [ 'label' => 'Wi-Fi', 'image' => asset('images/amenities/wifi.jpg'), ], 'parking' => [ 'label' => 'Parking', 'image' => asset('images/amenities/parking.jpg'), ], 'pool' => [ 'label' => 'Swimming Pool', 'image' => asset('images/amenities/pool.jpg'), ], ]) ->required() ``` ### Grid Columns Configuration [](#grid-columns-configuration) The component supports two ways to configure the grid layout: 1. Simple integer configuration: ``` ImageCheckboxGroup::make('amenities') ->options([...]) ->gridColumns(4) // Will create a responsive grid that grows up to 4 columns ``` 2. Detailed responsive configuration: ``` ImageCheckboxGroup::make('amenities') ->options([...]) ->gridColumns([ 'default' => 1, // mobile first (xs breakpoint) 'sm' => 2, // small screens (640px) 'md' => 3, // medium screens (768px) 'lg' => 4, // large screens (1024px) 'xl' => 6, // extra large screens (1280px) '2xl' => 8, // 2xl screens (1536px) ]) ``` The responsive configuration supports these breakpoints: - `default`: Mobile first (< 640px) - `sm`: Small screens (≥ 640px) - `md`: Medium screens (≥ 768px) - `lg`: Large screens (≥ 1024px) - `xl`: Extra large screens (≥ 1280px) - `2xl`: 2XL screens (≥ 1536px) You can specify any combination of breakpoints. Unspecified breakpoints will inherit from the previous breakpoint: ``` ImageCheckboxGroup::make('amenities') ->options([...]) ->gridColumns([ 'default' => 1, // 1 column on mobile 'md' => 3, // 3 columns from medium screens up 'xl' => 4, // 4 columns from extra large screens up ]) ``` ### With Min/Max Selection [](#with-minmax-selection) ``` ImageCheckboxGroup::make('amenities') ->options([ 'wifi' => [ 'label' => 'Wi-Fi', 'image' => asset('images/amenities/wifi.jpg'), ], 'parking' => [ 'label' => 'Parking', 'image' => asset('images/amenities/parking.jpg'), ], 'pool' => [ 'label' => 'Swimming Pool', 'image' => asset('images/amenities/pool.jpg'), ], ]) ->minSelect(1) // Must select at least 1 ->maxSelect(2) // Cannot select more than 2 ->required() ``` ### Without Images (Label-only buttons) [](#without-images-label-only-buttons) ``` ImageCheckboxGroup::make('categories') ->options([ 'electronics' => 'Electronics', 'clothing' => 'Clothing', 'food' => 'Food', 'books' => 'Books', ]) ->gridColumns(2) // Show in 2 columns ->required() ``` ### Compact Labels Layout [](#compact-labels-layout) Use `compactLabels()` to display options as compact text buttons instead of square image cards. This is useful when you want a more traditional button-group appearance, or when images are optional supplementary content rather than the primary visual. ``` ImageCheckboxGroup::make('attachments') ->options([ 'swivel-hook' => 'Swivel J-Hook', 'bulldog-clip' => 'Bulldog Clip', 'key-ring' => 'Key Ring', ]) ->compactLabels() // Renders as compact text buttons ->gridColumns(3) ->required() ``` **Behavior differences with `compactLabels()`:** ModeHas ImageResultNormal (default)YesSquare card with image, label on hoverNormal (default)NoSquare card with centered labelCompactYesCompact text button + image popover on hover/focusCompactNoCompact text button**With images and compact labels (popover preview):** When options have images but `compactLabels()` is enabled, the images appear as a popover preview on hover and focus. The popover automatically positions itself based on available screen space (top, bottom, left, or right). ``` ImageCheckboxGroup::make('attachments') ->options([ 'swivel-hook' => [ 'label' => 'Swivel J-Hook', 'image' => asset('images/attachments/swivel-hook.jpg'), ], 'bulldog-clip' => [ 'label' => 'Bulldog Clip', 'image' => asset('images/attachments/bulldog-clip.jpg'), ], 'key-ring' => [ 'label' => 'Key Ring', 'image' => asset('images/attachments/key-ring.jpg'), ], ]) ->compactLabels() // Shows text buttons with image popover on hover ->gridColumns(4) ->required() ``` ### Optional Selection [](#optional-selection) ``` ImageCheckboxGroup::make('additional_features') ->options([ 'feature1' => [ 'label' => 'Feature 1', 'image' => asset('images/features/feature1.jpg'), ], 'feature2' => [ 'label' => 'Feature 2', 'image' => asset('images/features/feature2.jpg'), ], ]) ->maxSelect(3) // Optional but limited to max 3 selections ``` Configuration ------------- [](#configuration) You can configure default behavior for all instances of this component: ``` // config/filament-image-checkbox-group.php return [ 'default_grid_columns' => 4, 'default_min_select' => null, 'default_max_select' => null, ]; ``` Customization ------------- [](#customization) ### Helper Text [](#helper-text) Add helper text to guide users: ``` ImageCheckboxGroup::make('amenities') ->options([...]) ->helperText('Select the amenities available at this property') ``` Validation ---------- [](#validation) The component handles validation automatically: - If the field is marked as `->required()`, it will require at least 1 selection (or the number specified by `->minSelect()`) - If `->maxSelect()` is set, it will enforce a maximum number of selections - If the field is not required, no minimum selection validation is applied, but the max limit is still enforced Data Format ----------- [](#data-format) The component stores an array of selected values in your model: ``` // Example data in your model public $amenities = ['wifi', 'pool']; ``` Examples -------- [](#examples) ### Property Amenities Selection [](#property-amenities-selection) ``` use Daikazu\FilamentImageCheckboxGroup\Forms\Components\ImageCheckboxGroup; // In your form schema Forms\Components\Section::make('Amenities') ->description('Select the amenities available at this property') ->schema([ ImageCheckboxGroup::make('amenities') ->options([ 'wifi' => [ 'label' => 'Wi-Fi', 'image' => asset('images/amenities/wifi.jpg'), ], 'parking' => [ 'label' => 'Parking', 'image' => asset('images/amenities/parking.jpg'), ], 'pool' => [ 'label' => 'Swimming Pool', 'image' => asset('images/amenities/pool.jpg'), ], 'gym' => [ 'label' => 'Fitness Center', 'image' => asset('images/amenities/gym.jpg'), ], 'spa' => [ 'label' => 'Spa', 'image' => asset('images/amenities/spa.jpg'), ], 'breakfast' => [ 'label' => 'Breakfast', 'image' => asset('images/amenities/breakfast.jpg'), ], 'restaurant' => [ 'label' => 'Restaurant', 'image' => asset('images/amenities/restaurant.jpg'), ], 'laundry' => [ 'label' => 'Laundry', 'image' => asset('images/amenities/laundry.jpg'), ], ]) ->minSelect(1) ->maxSelect(5) ->required() ->gridColumns(4) ->helperText('Select between 1 and 5 amenities that best describe your property'), ]), ``` Testing ------- [](#testing) ``` composer test ``` Changelog --------- [](#changelog) Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently. Contributing ------------ [](#contributing) Please see [CONTRIBUTING](CONTRIBUTING.md) for details. Security Vulnerabilities ------------------------ [](#security-vulnerabilities) Please review [our security policy](../../security/policy) on how to report security vulnerabilities. Credits ------- [](#credits) - [Mike Wall](https://github.com/daikazu) - [All Contributors](../../contributors) License ------- [](#license) The MIT License (MIT). Please see [License File](LICENSE.md) for more information. ### Health Score 47 — FairBetter than 94% of packages Maintenance84 Actively maintained with recent releases Popularity25 Limited adoption so far Community13 Small or concentrated contributor base Maturity56 Maturing project, gaining track record Bus Factor1 Top contributor holds 72.1% 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 ~103 days Total 4 Last Release 111d ago Major Versions 1.0.0 → v2.0.02025-08-12 ### Community Maintainers ![](https://avatars.githubusercontent.com/u/4039367?v=4)[Mike Wall](/maintainers/daikazu)[@daikazu](https://github.com/daikazu) --- Top Contributors [![daikazu](https://avatars.githubusercontent.com/u/4039367?v=4)](https://github.com/daikazu "daikazu (31 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (7 commits)")[![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?v=4)](https://github.com/github-actions[bot] "github-actions[bot] (3 commits)")[![Cybrarist](https://avatars.githubusercontent.com/u/38886749?v=4)](https://github.com/Cybrarist "Cybrarist (2 commits)") --- Tags filament-phpdaikazufilament-image-checkbox-group ### Code Quality TestsPest Static AnalysisPHPStan Code StyleLaravel Pint ### Embed Badge ![Health badge](/badges/daikazu-filament-image-checkbox-group/health.svg) ``` [![Health](https://phpackages.com/badges/daikazu-filament-image-checkbox-group/health.svg)](https://phpackages.com/packages/daikazu-filament-image-checkbox-group) ``` ### Alternatives [codewithdennis/filament-select-tree The multi-level select field enables you to make single selections from a predefined list of options that are organized into multiple levels or depths. 320392.1k17](/packages/codewithdennis-filament-select-tree)[vormkracht10/laravel-mails Laravel Mails can collect everything you might want to track about the mails that has been sent by your Laravel app. 24149.7k](/packages/vormkracht10-laravel-mails)[ralphjsmit/laravel-filament-components A collection of reusable components for Filament. 10972.2k2](/packages/ralphjsmit-laravel-filament-components)[rawilk/filament-password-input Enhanced password input component for filament. 52232.4k3](/packages/rawilk-filament-password-input)[codebar-ag/laravel-filament-json-field A Laravel Filament JSON Field integration with CodeMirror support 1124.1k](/packages/codebar-ag-laravel-filament-json-field)[daikazu/laravel-glider Start using Glide on-the-fly instantly in your Laravel blade templates. 882.3k](/packages/daikazu-laravel-glider) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)