Filament•12mo ago

Add an Action to a Form label or hint

Is there a way to add an Action to the field label of a Filament Form? Kind of like this (see video). Or add an Action to a field's hint()?

Solution:

there is hint action if you searched the docs ): https://filamentphp.com/docs/3.x/forms/actions#adding-a-hint-action-to-a-field...

Actions - Form Builder - Filament

Jump to solution

11 Replies

Solution

Lara Zeus•12mo ago

there is hint action if you searched the docs ): https://filamentphp.com/docs/3.x/forms/actions#adding-a-hint-action-to-a-field

Actions - Form Builder - Filament

VeurOP•12mo ago

Not sure how I missed that 😅 sorry Any idea on how to show it on hover @Lara Zeus ?

Lara Zeus•12mo ago

np 🙂 you mean trigger the action on hover?!!

VeurOP•12mo ago

No not trigger, showing. So hide it initially and show when hovering over the field

Lara Zeus•12mo ago

you could target that with css and add extra attribute

VeurOP•12mo ago

@Lara Zeus thanks, I tried that using styling based on parent state (.group) and with sibling state (.peer) but none of that works, as the extra attribute is added to the input element wrapper, and the hint is not a child or sibling. Do you have any idea?

Lara Zeus•12mo ago

🤔 what if you add the extraAttributes to the action itself?

VeurOP•12mo ago

This is what I tried @Lara Zeus

TextInput::make('name')
    ->extraAttributes([
        'class' => 'group',
    ])
    ->hintAction(
        Action::make('copy')
            ->icon('heroicon-m-cog')
            ->extraAttributes([
                'class' => 'hidden group-hover:block',
            ])
            ->action(function (Set $set, $state) {
                $set('name', $state);
            })
    );

TextInput::make('name')
    ->extraAttributes([
        'class' => 'group',
    ])
    ->hintAction(
        Action::make('copy')
            ->icon('heroicon-m-cog')
            ->extraAttributes([
                'class' => 'hidden group-hover:block',
            ])
            ->action(function (Set $set, $state) {
                $set('name', $state);
            })
    );

Lara Zeus•12mo ago

you can add transition and stuff to make it smooth and better UI but this is the trick: wrap it in a grid 🙂

Grid::make()
    ->extraAttributes([
        'class' => 'bord group',
    ])
    ->schema([
        TextInput::make('name')
            ->required()
            ->extraInputAttributes([
                'class' => 'bord group',
            ])
            ->hintAction(
                Action::make('copy')
                    ->icon('heroicon-m-cog')
                    ->extraAttributes([
                        'class' => 'bord hidden group-hover:block',
                    ])
                    ->action(function (Set $set, $state) {
                        $set('name', $state);
                    }),
            )
            ->maxLength(255),
]),

Grid::make()
    ->extraAttributes([
        'class' => 'bord group',
    ])
    ->schema([
        TextInput::make('name')
            ->required()
            ->extraInputAttributes([
                'class' => 'bord group',
            ])
            ->hintAction(
                Action::make('copy')
                    ->icon('heroicon-m-cog')
                    ->extraAttributes([
                        'class' => 'bord hidden group-hover:block',
                    ])
                    ->action(function (Set $set, $state) {
                        $set('name', $state);
                    }),
            )
            ->maxLength(255),
]),

VeurOP•12mo ago

@Lara Zeus hero! Thanks!

Gaming

Programming

Add an Action to a Form label or hint