Filament•8mo ago

I can't select the first index. I've been banging my head for hours.

Reference 1: https://www.youtube.com/watch?v=Bcb_A9Sk78s Reference 2: https://github.com/andrewdwallo/erpsaas/blob/2.x/app/Filament/Company/Pages/Setting/Appearance.php

Forms\Components\Select::make('color_id')
                    ->relationship('color', 'name')
                    ->options(
                        CarColor::all()->mapToGroups(static fn($case) => [
                            $case->value => "<span class='flex items-center gap-x-4'>
                            <span class='rounded-full w-4 h-4' style='background-color:" . $case->color . "'></span>
                            <span>" . $case->name . '</span>
                            </span>',
                        ])
                    )

Forms\Components\Select::make('color_id')
                    ->relationship('color', 'name')
                    ->options(
                        CarColor::all()->mapToGroups(static fn($case) => [
                            $case->value => "<span class='flex items-center gap-x-4'>
                            <span class='rounded-full w-4 h-4' style='background-color:" . $case->color . "'></span>
                            <span>" . $case->name . '</span>
                            </span>',
                        ])
                    )

Filament Daily

YouTube

Filament Select with HTML Inside: Color and Font Pickers

Example from an open-source ERP SaaS. Source: https://github.com/andrewdwallo/erpsaas/blob/2.x/app/Filament/Company/Pages/Setting/Appearance.php

GitHub

erpsaas/app/Filament/Company/Pages/Setting/Appearance.php at 2.x · ...

A Laravel and Filament-powered accounting platform, crafting a modern and automated solution for financial management. - andrewdwallo/erpsaas

3 Replies

OzgurOzarpaci•8mo ago

maybe you can add ->default(CarColor::first()->id) ??

Rolland•8mo ago

what if you make the 1st index as a placeholder instead?

Lucky0OP•8mo ago

Forms\Components\Select::make('color_id')
                    ->label('Color')
                    ->options(
                        CarColor::all()->mapWithKeys(function ($color) {
                            return [
                                $color->id => "<span class='flex items-center gap-x-4'>
                                    <span class='rounded-full w-4 h-4' style='background-color: {$color->color};'></span>
                                    <span>{$color->name}</span>
                                </span>",
                            ];
                        })
                    )
                    ->reactive()

Forms\Components\Select::make('color_id')
                    ->label('Color')
                    ->options(
                        CarColor::all()->mapWithKeys(function ($color) {
                            return [
                                $color->id => "<span class='flex items-center gap-x-4'>
                                    <span class='rounded-full w-4 h-4' style='background-color: {$color->color};'></span>
                                    <span>{$color->name}</span>
                                </span>",
                            ];
                        })
                    )
                    ->reactive()

my solutions

Gaming

Programming

I can't select the first index. I've been banging my head for hours.