Skip to main content
← Back to Table of Contents

​
Summary

A modern replacement for Filament’s native Radio component. FlexRadiolist adds support for per-option icons, rich descriptions, and custom sizing via CSS variables. It also features a “label-only” variant for compact layouts.
ClassBjanczak\FilamentFlexFields\Filament\Forms\Components\FlexRadiolist
State typestring|int|null
Model cast'plan_type' => 'string' · 'category_id' => 'integer'
FieldTyperadiolist
Playgroundflex-radiolist slug in Flex Fields playground
Default variantdefault

​
Basic usage

​
Standard list with descriptions

use Bjanczak\FilamentFlexFields\Filament\Forms\Components\FlexRadiolist;

FlexRadiolist::make('plan')
    ->options([
        'basic' => 'Basic Plan',
        'pro' => 'Professional',
        'ent' => 'Enterprise',
    ])
    ->descriptions([
        'basic' => 'Great for individuals starting out.',
        'pro' => 'Advanced features for growing teams.',
        'ent' => 'Custom solutions for large organizations.',
    ]);

​
List with icons and colors

FlexRadiolist::make('status')
    ->options([
        'active' => 'Active',
        'pending' => 'Pending',
        'closed' => 'Closed',
    ])
    ->icons([
        'active' => 'heroicon-o-check-circle',
        'pending' => 'heroicon-o-clock',
        'closed' => 'heroicon-o-x-circle',
    ])
    ->color('success');

​
State & validation

​
Stored value

State is the option key from options(). 
$record->plan; // string|null — e.g. 'pro'

​
Validation

The field automatically validates that the selected value exists in the configured options. 
FlexRadiolist::make('category_id')
    ->options(Category::pluck('name', 'id'))
    ->required();

​
Variants

​
Default

Shows labels, descriptions (if set), and icons (if set) in a vertical list of cards.

​
Label-only

A more compact version that hides icons and descriptions, focusing only on the labels. 
FlexRadiolist::make('size')
    ->options(['sm' => 'Small', 'md' => 'Medium', 'lg' => 'Large'])
    ->variant('label-only');

​
Configuration API

All methods accept Closure unless noted.
MethodTypeDefaultDescription
options(array|Closure $options)Setup[]Key => Label mapping
icons(array|Closure $icons)Setup[]Key => Icon string
descriptions(array|Closure $desc)Setup[]Key => Description string
disabledOptions(array|Closure $keys)Setup[]Keys to disable
color(string|Closure|null $color)Setup'primary'Active option color
variant(string|Closure $variant)Setup'default'default or label-only
size(string|Closure $size)Setup'md'sm, md, lg

​
Real-world examples

​
Plan Selection Card

FlexRadiolist::make('subscription')
    ->label('Choose your plan')
    ->options([
        'monthly' => 'Monthly Billing',
        'yearly' => 'Yearly Billing (Save 20%)',
    ])
    ->descriptions([
        'monthly' => 'Billed every 30 days.',
        'yearly' => 'One annual payment.',
    ])
    ->icons([
        'monthly' => 'heroicon-o-calendar',
        'yearly' => 'heroicon-o-sparkles',
    ])
    ->size('lg')
    ->required();

​
Playground

/admin/flex-fields-playground/flex-radiolist See Playground for setup.
ComponentWhen to use instead
FlexChecklistMultiple selection instead of single
ChoiceCardsLarge visual cards with images
SegmentControlHorizontal sliding selection

​
CSS classes (reference)

ClassRole
fff-flex-radiolistRoot wrapper
fff-flex-radiolist--{sm|md|lg}Size variant
fff-flex-radiolist--{variant}Variant class
fff-flex-radiolist__itemIndividual option card
fff-flex-radiolist__labelOption label
fff-flex-radiolist__descriptionOption description
fff-flex-radiolist__iconOption icon wrapper
fff-flex-radiolist__indicatorRadio dot indicator