PHPackages                             microweber-deps/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. microweber-deps/radio-deck

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

microweber-deps/radio-deck
==========================

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

1.0(11mo ago)02MITPHPPHP ^8.1

Since Jul 19Pushed 11mo agoCompare

[ Source](https://github.com/microweber-deps/radio-deck)[ Packagist](https://packagist.org/packages/microweber-deps/radio-deck)[ Docs](https://github.com/jaocero/radio-deck)[ GitHub Sponsors](https://github.com/jaocero)[ RSS](/packages/microweber-deps-radio-deck/feed)WikiDiscussions main Synced today

READMEChangelog (1)DependenciesVersions (2)Used By (0)

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.

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

[](#installation)

You can install the package via composer:

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

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 Docs](https://filamentphp.com/docs/3.x/panels/themes#creating-a-custom-theme)

Add the plugin's views to your `tailwind.config.js` file.

```
content: [
    ...
    './vendor/jaocero/radio-deck/resources/views/**/*.blade.php',
]
```

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()
                ->iconSize(IconSize::Large) // Small | Medium | Large | (string - sm | md | lg)
                ->iconSizes([ // Customize the values for each icon size
                    'sm' => 'h-12 w-12',
                    'md' => 'h-14 w-14',
                    'lg' => 'h-16 w-16',
                ])
                ->iconPosition(IconPosition::Before) // Before | After | (string - before | after)
                ->alignment(Alignment::Center) // Start | Center | End | (string - start | center | end)
                ->gap('gap-5') // Gap between Icon and Description (Any TailwindCSS gap-* utility)
                ->padding('px-4 px-6') // Padding around the deck (Any TailwindCSS padding utility)
                ->direction('column') // Column | Row (Allows to place the Icon on top)
                ->extraCardsAttributes([ // Extra Attributes to add to the card HTML element
                    'class' => 'rounded-xl'
                ])
                ->extraOptionsAttributes([ // Extra Attributes to add to the option HTML element
                    'class' => 'text-3xl leading-none w-full flex flex-col items-center justify-center p-4'
                ])
                ->extraDescriptionsAttributes([ // Extra Attributes to add to the description HTML element
                    'class' => 'text-sm font-light text-center'
                ])
                ->color('primary') // supports all color custom or not
                ->multiple() // Select multiple card (it will also returns an array of selected card values)
                ->columns(3)
        ])
        ->columns('full');
}
```

You can also utilize an Enum class for `->options()`, `->descriptions()`, and `->icons()` . Here's an example of how to create a simple enum class for this purpose:

```