Skip to main content
← Back to Table of Contents

​
Summary

Premium multi-select card group (checkbox behavior). Features rich option metadata, Material-style ripples, and built-in validation for minimum, maximum, or exact selection counts.
ClassBjanczak\FilamentFlexFields\Filament\Forms\Components\ChoiceCheckboxCards
State typearray<int|string> — list of selected option keys
Model cast'tags' => 'array' · 'features' => 'json'
FieldTypechoice_checkbox_cards
Playgroundchoice-checkbox-cards slug in Flex Fields playground

​
Basic usage

​
Feature selection (Stack layout)

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

ChoiceCheckboxCards::make('features')
    ->options([
        'security' => ['label' => 'Security', 'description' => 'Real-time threat detection'],
        'storage' => ['label' => 'Storage', 'description' => 'Unlimited cloud storage'],
        'analytics' => ['label' => 'Analytics', 'description' => 'Advanced reporting'],
    ])
    ->minSelections(1)
    ->default(['security']);

​
Add-ons grid (Check indicator)

ChoiceCheckboxCards::make('addons')
    ->layout('grid')
    ->gridColumns(['default' => 1, 'sm' => 3])
    ->indicator('check')
    ->options([
        'backups' => ['label' => 'Backups', 'price' => '$5/mo'],
        'monitoring' => ['label' => 'Monitoring', 'price' => '$9/mo'],
        'support' => ['label' => 'Support', 'price' => '$15/mo'],
    ]);

​
State & validation

​
Stored value

State is an array of unique option keys. 
$record->features; // ['security', 'analytics']

​
Validation rules (built-in)

RuleDescription
arrayAlways enforced.
Option keysSelected keys must exist in options().
minSelections(n)Minimum number of items (default 1 if required()).
maxSelections(n)Maximum number; UI blocks further selection.
exactSelections(n)Requires exactly n items; overrides min/max.

​
Configuration API

Shares the core card API with ChoiceCards.
MethodTypeDefaultDescription
options(array|Closure $options)Setup[]Rich option map (label, description, price, icon, etc.).
minSelections(int|Closure $n)ValidationnullMinimum required selections.
maxSelections(int|Closure $n)ValidationnullMaximum allowed selections.
exactSelections(int|Closure $n)ValidationnullRequires exactly n selections.
layout(string|Closure $layout)Setup'stack'stack, grid, media, featured.
gridColumns(int|array|Closure $cols)Setup1Responsive columns (max 4).
indicator(string|Closure $type)Setupautocheckbox, check, none.
variant(string|Closure $variant)Setup'default'default, primary, secondary.
color(string|Closure $color)Setup'primary'Accent color for selection.
ripple(bool|Closure $on)SetupfalseEnable Material-style click ripple.

​
Real-world examples

​
Pizza toppings with limits

ChoiceCheckboxCards::make('toppings')
    ->label('Select up to 3 toppings')
    ->options([
        'cheese' => 'Extra Cheese',
        'pepperoni' => 'Pepperoni',
        'mushrooms' => 'Mushrooms',
        'olives' => 'Olives',
    ])
    ->minSelections(1)
    ->maxSelections(3);

​
Integration selector with icons

ChoiceCheckboxCards::make('integrations')
    ->layout('media')
    ->gridColumns(3)
    ->indicator('none')
    ->options([
        'github' => ['label' => 'GitHub', 'icon' => 'gravityui-github'],
        'slack' => ['label' => 'Slack', 'icon' => 'gravityui-slack'],
        'linear' => ['label' => 'Linear', 'icon' => 'gravityui-linear'],
    ]);

​
Playground

/admin/flex-fields-playground/choice-checkbox-cards See Playground for setup.
ComponentWhen to use instead
ChoiceCardsFor single-select card groups.
FlexChecklistFor a more compact multi-select list.
MatrixChoiceFieldFor complex grid-based multi-selection.

​
CSS classes (reference)

ClassRole
fff-choice-cardsRoot wrapper (shared with ChoiceCards)
fff-choice-cardIndividual card element
fff-choice-card--selectedActive card state
fff-choice-card__indicatorCheckbox/check marker wrapper
Uses the same BEM structure as ChoiceCards.