Filament•3mo ago

How to customize select option label (different when open/closed)

Is there a way to have a different render for the "preview" (when the select is closed) and for when the select is open ? Here is my code

Filament\Forms\Components\Select::make('ethnicity')
    ->label('Groupe ethnique')
    ->native(false)
    ->searchable()
    ->allowHtml()
    ->options(EthnicityEnum::class)
    ->default(EthnicityEnum::EUROPEAN_WHITE)
    ->live()
    ->required(),

Filament\Forms\Components\Select::make('ethnicity')
    ->label('Groupe ethnique')
    ->native(false)
    ->searchable()
    ->allowHtml()
    ->options(EthnicityEnum::class)
    ->default(EthnicityEnum::EUROPEAN_WHITE)
    ->live()
    ->required(),

6 Replies

BenjaminOP•3mo ago

I didn't specify it but the label is defined in my Enum using HasLabel interface and getLabel() method.

jawaad•3mo ago

How you get this feature? Is it FIlament 4? I have try it and Description is not showed in Select Field. In the docs also mentioned "HasDescription" applied for Radio and CheckboxList: https://filamentphp.com/docs/3.x/support/enums#enum-descriptions

Enums - Core Concepts - Filament

jawaad•3mo ago

my bad, you said that it is implemented with getLabel, and using allowHtml, make sense.

BenjaminOP•3mo ago

Any hint ? If it can help, here is my enum code :

<?php

declare(strict_types=1);

namespace App\Enums;

use Filament\Support\Contracts\HasLabel;

enum EthnicityEnum: string implements HasLabel
{
    case AFRICAN_BLACK = 'african_black';
    case ASIAN = 'asian';
    case EUROPEAN_WHITE = 'european_white';
    case HISPANO_LATINO = 'hispano_latino';
    case MIDDLE_EAST_NORTH_AFRICA = 'middle_east_north_africa';
    case INDIGENOUS_AMERICAS = 'indigenous_americas';
    case METIS_MIXED = 'metis_mixed';
    case OCEANIAN = 'oceanian';
    case CARIBBEAN = 'caribbean';
    case OTHER = 'other';

    public function getLabel(): string
    {
        return match ($this) {
            self::AFRICAN_BLACK => 'Africain/Noir',
            self::ASIAN => 'Asiatique',
            self::EUROPEAN_WHITE => <<<HTML
            <div class="flex flex-col">
                <span>Européen/Blanc</span>
                <span class="text-xs text-gray-500 text-wrap">
                    (Caucasien, Américains du Nord, Canadiens, Australiens)
                </span>
            </div>
            HTML,
            self::HISPANO_LATINO => 'Hispano/Latino',
            self::MIDDLE_EAST_NORTH_AFRICA => 'Moyen-Orient et Afrique du Nord',
            self::INDIGENOUS_AMERICAS => 'Amérindien/Autochtone des Amériques',
            self::METIS_MIXED => 'Métis/Mixte (veuillez préciser)',
            self::OCEANIAN => 'Océanien (Polynésien, Mélanésien, etc.)',
            self::CARIBBEAN => 'Caribéen',
            self::OTHER => 'Autre',
        };
    }
}

<?php

declare(strict_types=1);

namespace App\Enums;

use Filament\Support\Contracts\HasLabel;

enum EthnicityEnum: string implements HasLabel
{
    case AFRICAN_BLACK = 'african_black';
    case ASIAN = 'asian';
    case EUROPEAN_WHITE = 'european_white';
    case HISPANO_LATINO = 'hispano_latino';
    case MIDDLE_EAST_NORTH_AFRICA = 'middle_east_north_africa';
    case INDIGENOUS_AMERICAS = 'indigenous_americas';
    case METIS_MIXED = 'metis_mixed';
    case OCEANIAN = 'oceanian';
    case CARIBBEAN = 'caribbean';
    case OTHER = 'other';

    public function getLabel(): string
    {
        return match ($this) {
            self::AFRICAN_BLACK => 'Africain/Noir',
            self::ASIAN => 'Asiatique',
            self::EUROPEAN_WHITE => <<<HTML
            <div class="flex flex-col">
                <span>Européen/Blanc</span>
                <span class="text-xs text-gray-500 text-wrap">
                    (Caucasien, Américains du Nord, Canadiens, Australiens)
                </span>
            </div>
            HTML,
            self::HISPANO_LATINO => 'Hispano/Latino',
            self::MIDDLE_EAST_NORTH_AFRICA => 'Moyen-Orient et Afrique du Nord',
            self::INDIGENOUS_AMERICAS => 'Amérindien/Autochtone des Amériques',
            self::METIS_MIXED => 'Métis/Mixte (veuillez préciser)',
            self::OCEANIAN => 'Océanien (Polynésien, Mélanésien, etc.)',
            self::CARIBBEAN => 'Caribéen',
            self::OTHER => 'Autre',
        };
    }
}

toeknee•3mo ago

Not out of the box, you could target the css and hide it by default in the select display

BenjaminOP•3mo ago

Okay thanks ! Here is my solution, if anyone else want to use it (@jawaad) : In my EthnicityEnum.php

public function getLabel(): string
{
    return match ($this) {
        self::EUROPEAN_WHITE => <<<HTML
        <div class="flex flex-col">
            <span>Européen/Blanc</span>
            <span class="text-xs text-gray-500 __hidden-in-select text-wrap">
                (Caucasien, Américains du Nord, Canadiens, Australiens)
            </span>
        </div>
        HTML,
        self::OTHER => 'Autre',
    };
}

public function getLabel(): string
{
    return match ($this) {
        self::EUROPEAN_WHITE => <<<HTML
        <div class="flex flex-col">
            <span>Européen/Blanc</span>
            <span class="text-xs text-gray-500 __hidden-in-select text-wrap">
                (Caucasien, Américains du Nord, Canadiens, Australiens)
            </span>
        </div>
        HTML,
        self::OTHER => 'Autre',
    };
}

And in my app.css :

.choices__inner .__hidden-in-select {
    display: none;
}

.choices__inner .__hidden-in-select {
    display: none;
}

Gaming

Programming

How to customize select option label (different when open/closed)