FilamentF
Filament•8mo 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'),



📷 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)
image.png
image.png
Was this page helpful?