PHPackages                             jaocero/radio-deck - 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. [Utility & Helpers](/categories/utility)
4. /
5. jaocero/radio-deck

ActiveLibrary[Utility & Helpers](/categories/utility)

jaocero/radio-deck
==================

Turn filament default radio button into a selectable card with icons, title and description.

v3.0(3mo ago)83281.2k—6.3%33[3 issues](https://github.com/199ocero/radio-deck/issues)[2 PRs](https://github.com/199ocero/radio-deck/pulls)3MITPHPPHP ^8.2CI passing

Since Dec 28Pushed 3mo ago3 watchersCompare

[ Source](https://github.com/199ocero/radio-deck)[ Packagist](https://packagist.org/packages/jaocero/radio-deck)[ Docs](https://github.com/jaocero/radio-deck)[ GitHub Sponsors](https://github.com/jaocero)[ RSS](/packages/jaocero-radio-deck/feed)WikiDiscussions 4.x Synced 1mo ago

READMEChangelog (10)Dependencies (9)Versions (23)Used By (3)

Radio Deck
==========

[](#radio-deck)

[![Header](https://raw.githubusercontent.com/199ocero/radio-deck/main/art/images/jaocero-radio-deck.jpeg)](https://raw.githubusercontent.com/199ocero/radio-deck/main/art/images/jaocero-radio-deck.jpeg)

[![Latest Version on Packagist](https://camo.githubusercontent.com/57cc8d9d46e74f8f7ecead605f99b04970f6a5e379e2ace48ed263f171f5f6fb/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6a616f6365726f2f726164696f2d6465636b2e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/jaocero/radio-deck)[![Total Downloads](https://camo.githubusercontent.com/36bf8983b261417278f7f47cd3c92d966fccabff693b0d270e5ec28bb86be74c/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f6a616f6365726f2f726164696f2d6465636b2e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/jaocero/radio-deck)

Turn filament default radio button into a selectable card with icons, title and description.

Requirements
------------

[](#requirements)

- FilamentPHP v4.x
- PHP 8.2+
- Laravel v11.28+
- Tailwind CSS v4.0+

Installation
------------

[](#installation)

You can install the package via composer:

```
composer require jaocero/radio-deck
```

### For FilamentPHP v4 Users

[](#for-filamentphp-v4-users)

To adhere to Filament's theming approach, you'll be required to employ a personalized theme in order to utilize this plugin.

> **Custom Theme Installation**[Filament v4 Docs - Creating a Custom Theme](https://filamentphp.com/docs/4.x/styling/overview#creating-a-custom-theme)

Instead of adding the plugin's views to your `tailwind.config.js` file, add the following source directive to your custom theme's CSS file (usually `resources/css/filament/admin/theme.css`):

```
@source '../../../../vendor/jaocero/radio-deck/resources/views';
```

This will include the plugin's styles during the compilation process.

Migration from v3 to v4
-----------------------

[](#migration-from-v3-to-v4)

If you're upgrading from Radio Deck v3 to v4, please follow these steps:

### 1. Update Dependencies

[](#1-update-dependencies)

```
composer require jaocero/radio-deck:^2.0
```

### 2. Create a Custom Theme

[](#2-create-a-custom-theme)

Since FilamentPHP v4 requires custom themes for plugins, you need to create one:

```
php artisan make:filament-theme
```

### 3. Update Theme Configuration

[](#3-update-theme-configuration)

**Remove** the old configuration from your `tailwind.config.js`:

```
// Remove this from tailwind.config.js
content: [
    ...
    './vendor/jaocero/radio-deck/resources/views/**/*.blade.php', // Remove this line
]
```

**Add** the source directive to your theme's CSS file instead:

```
/* Add this to resources/css/filament/admin/theme.css */
@source '../../../../vendor/jaocero/radio-deck/resources/views';
```

### 4. Update Import Statements

[](#4-update-import-statements)

Update your import statements to use the new namespace structure:

```
// Old (v1.x)
use JaOcero\RadioDeck\Forms\Components\RadioDeck;

// New (v2.x) - Same import, but make sure you're using v2.x
use JaOcero\RadioDeck\Forms\Components\RadioDeck;
```

### 5. Method Changes

[](#5-method-changes)

Some method names have been updated for better consistency:

```
// Old method
->gap('gap-4')

// New method (renamed for clarity & to avoid conflicts with Filament’s built-in gap)
->optionsGap('gap-4')
```

Usage
-----

[](#usage)

```
use JaOcero\RadioDeck\Forms\Components\RadioDeck;
use Filament\Support\Enums\IconSize;
use Filament\Support\Enums\Alignment;
use Filament\Support\Enums\IconPosition;

public static function form(Form $form): Form
{
    return $form
        ->schema([
            RadioDeck::make('name')
                ->options([
                    'ios' => 'iOS',
                    'android' => 'Android',
                    'web' => 'Web',
                    'windows' => 'Windows',
                    'mac' => 'Mac',
                    'linux' => 'Linux',
                ])
                ->descriptions([
                    'ios' => 'iOS Mobile App',
                    'android' => 'Android Mobile App',
                    'web' => 'Web App',
                    'windows' => 'Windows Desktop App',
                    'mac' => 'Mac Desktop App',
                    'linux' => 'Linux Desktop App',
                ])
                ->icons([
                    'ios' => 'heroicon-m-device-phone-mobile',
                    'android' => 'heroicon-m-device-phone-mobile',
                    'web' => 'heroicon-m-globe-alt',
                    'windows' => 'heroicon-m-computer-desktop',
                    'mac' => 'heroicon-m-computer-desktop',
                    'linux' => 'heroicon-m-computer-desktop',
                ])
                ->required()
                ->iconSizes(IconSize::Medium) // Medium | Small | Large | ExtraLarge | TwoExtraLarge
                ->iconPosition(IconPosition::Before) // Before | After
                ->alignment(Alignment::Center) // Start | Center | End
                ->optionGap('gap-5') // Gap between Options and Descriptions between the Icon
                ->padding('px-4 py-6') // Padding around the deck
                ->extraCardsAttributes([ // Extra attributes for card elements
                    'class' => 'rounded-xl'
                ])
                ->extraOptionsAttributes([ // Extra attributes for option elements
                    'class' => 'text-3xl leading-none w-full flex flex-col items-center justify-center p-4'
                ])
                ->extraDescriptionsAttributes([ // Extra attributes for description elements
                    'class' => 'text-sm font-light text-center'
                ])
                ->multiple() // Enable multiple selection (returns array)
                ->colors('primary')
                // or you can use an array of colors per option or you can use one color for all options
                // ->colors([
                //     'ios' => 'blue',
                //     'android' => 'green',
                //     'web' => 'purple',
                // ])
                ->columns(3)
                // or you can use how many columns every screen size
                // ->columns([
                //     'sm' => 1,
                //     'md' => 2,
                //     'lg' => 3,
                // ])
                ->columnSpanFull()
        ]);
}
```

### Using Enums

[](#using-enums)

You can also utilize an Enum class for `->options()`, `->descriptions()`, and `->icons()`. Here's an example:

```