F
Filament•2d ago
Ink

How to style each Repeater-Form item with a background color

Hey everyone 👋 I’m using Laravel + Filament + Livewire and I’m trying to improve the visual layout of my Repeater. 🎯 What I’m trying to achieve: I want each item in the Repeater to have a background color (e.g., light gray), some padding, and rounded corners — like a "card" layout — to improve readability and visual separation. 🛠️ What I’ve tried: I’m using a standard Repeater inside a Filament form. I tried adding classes using ->extraAttributes(['class' => 'bg-gray-100 p-4 rounded-xl']), but it only applies to the whole repeater instead of each item inside it. 
Repeater::make('categories')
                            ->extraAttributes(function (array $state): array {
                                return ['class' => 'bg-yellow-100 border rounded-xl p-4'];
                            })
                            ->label('Catégories de tickets')
                            ->reorderable(false)
                            ->cloneable()
                            ->collapsed()
                            ->addActionLabel('+ Ajouter une catégorie')
                            ->schema([
                                Hidden::make('_id')
                                    ->default(fn() => bin2hex(random_bytes(12)))
                                    ->required(),

                                Hidden::make('ref')
                                    ->default(fn() => Str::uuid()->toString())
                                    ->required(),

                                TextInput::make('name')
                                    ->label('Nom de la catégorie'),
Repeater::make('categories')
                            ->extraAttributes(function (array $state): array {
                                return ['class' => 'bg-yellow-100 border rounded-xl p-4'];
                            })
                            ->label('Catégories de tickets')
                            ->reorderable(false)
                            ->cloneable()
                            ->collapsed()
                            ->addActionLabel('+ Ajouter une catégorie')
                            ->schema([
                                Hidden::make('_id')
                                    ->default(fn() => bin2hex(random_bytes(12)))
                                    ->required(),

                                Hidden::make('ref')
                                    ->default(fn() => Str::uuid()->toString())
                                    ->required(),

                                TextInput::make('name')
                                    ->label('Nom de la catégorie'),
📷 What I’d like to see: Each item in the repeater should look like a card: with spacing, background, and border radius. 📸 Screenshots: First screenshot: what I currently have (unstyled Repeater items) Second screenshot: what I’d like to achieve (each item styled like a card)
No description
No description
1 Reply
toeknee
toeknee•2d ago
Going to say it's not possible. Might make sense to add an ->extraRowAttributes which accept a closure though?

Did you find this page helpful?