Skip to main content
ItemCardGroup ← Back to Table of Contents

​
Summary

Grouped list surface that wraps multiple ItemCard rows in a single bordered container. Features optional group headers, row separators, group-level variants, and group-wide pressable row behavior.
ClassBjanczak\FilamentFlexFields\Filament\Schemas\Components\ItemCardGroup
StateNone — display/layout component
Playgrounditem-card-group slug in Flex Fields playground
ExtendsFilament\Schemas\Components\Component

​
Basic usage

​
Standard settings group

use Bjanczak\FilamentFlexFields\Filament\Schemas\Components\ItemCard;
use Bjanczak\FilamentFlexFields\Filament\Schemas\Components\ItemCardGroup;

ItemCardGroup::make('Account Settings')
    ->description('Manage your profile and security')
    ->separated()
    ->schema([
        ItemCard::make('Profile')->icon('heroicon-o-user')->chevron(),
        ItemCard::make('Security')->icon('heroicon-o-lock')->chevron(),
    ]);

​
Outside header with pressable rows

ItemCardGroup::make('Notifications')
    ->headerStyle('outside')
    ->pressable()
    ->schema([
        ItemCard::make('Email')->description('Manage email alerts'),
        ItemCard::make('Push')->description('Manage mobile alerts'),
    ]);

​
Configuration API

All methods accept Closure unless noted.
MethodTypeDefaultDescription
heading(string|Htmlable|Closure $text)SetupnullGroup title text.
description(string|Htmlable|Closure $text)SetupnullGroup subtitle text.
schema(array|Closure $components)Setup[]Child rows (typically ItemCard instances).
variant(string|Closure $variant)Setup'default'Surface style: default, secondary, tertiary, outline, transparent.
layout(string|Closure $layout)Setup'list'Child arrangement: list or grid.
divided(bool|Closure $on)SetupfalseEnable horizontal separators between rows. Alias: separated().
headerStyle(string|Closure $style)Setup'embedded'embedded (inside box) or outside (above box).
pressable(bool|Closure $on)SetupfalseEnable group-wide hover/ripple for child rows.

​
Public helper methods

MethodReturnsDescription
getLayout()stringlist or grid.
getVariant()stringResolved group variant.
isDivided()boolWhether row separators are active.
getHeaderStyle()stringembedded or outside.
areRowsPressable()boolGroup-level pressable flag.

​
Real-world examples

​
Mixed controls group

ItemCardGroup::make('Settings')
    ->separated()
    ->schema([
        ItemCard::make('Language')
            ->schema([
                SelectField::make('lang')->options(['en' => 'English'])->variant('item-card'),
            ]),
        ItemCard::make('Dark mode')
            ->schema([
                SwitchField::make('dark')->inline()->size('sm'),
            ]),
    ]);

​
Grid layout for cards

ItemCardGroup::make('Quick Actions')
    ->layout('grid')
    ->columns(['default' => 1, 'sm' => 2])
    ->schema([
        ItemCard::make('New Post')->icon('heroicon-o-plus')->standalone(),
        ItemCard::make('View Stats')->icon('heroicon-o-chart-bar')->standalone(),
    ]);

​
Playground

/admin/flex-fields-playground/item-card-group See Playground for setup.
ComponentWhen to use instead
ItemCardFor individual list rows outside of a group.
ChoiceCardsWhen the group represents a selectable form state.
SegmentTabsFor switching between different form schemas using segments.

​
CSS classes (reference)

ClassRole
item-card-groupMain group container
item-card-group-hostOutside-header wrapper
item-card-group--{layout}List or grid layout modifier
item-card-group--{variant}Surface variant modifier
item-card-group--dividedRow separators active
item-card-group-headerTitle and description container
item-card-group-surfaceThe bordered box element
item-card-group-contentChild components container