Filament•2mo ago

Help Needed with ToggleButtons in Filament Form

Hi everyone, I'm struggling with an issue that I believe (and hope) has a simple solution. I have a custom Livewire component where I'm using the Filament 3 form.

Fieldset::make('Allocazione')
    ->schema([
        ToggleButtons::make('allocazione')
            ->label('')
            ->multiple()
            ->required()
            ->markAsRequired(false)
            ->options([
                'obbligazionaria' => 'Obbligazionaria',
                'prudente' => 'Prudente',
                'moderata' => 'Moderata',
                'azionaria' => 'Azionaria',
                'libera' => 'Libera',
            ])
            ->rules([new Allocazione])
            ->inline(),
    ])
    ->columnSpan(2),

Fieldset::make('Allocazione')
    ->schema([
        ToggleButtons::make('allocazione')
            ->label('')
            ->multiple()
            ->required()
            ->markAsRequired(false)
            ->options([
                'obbligazionaria' => 'Obbligazionaria',
                'prudente' => 'Prudente',
                'moderata' => 'Moderata',
                'azionaria' => 'Azionaria',
                'libera' => 'Libera',
            ])
            ->rules([new Allocazione])
            ->inline(),
    ])
    ->columnSpan(2),

The problem lies with the ToggleButtons. As you can see, I have 5 options. The first 4 (obbligazionaria, prudente, moderata, azionaria) can be selected freely, but they exclude the last one (libera) and vice versa. I would like to disable "libera" as soon as one of the other 4 is clicked, and disable the other 4 as soon as "libera" is clicked. I'm pretty sure this can be done. I've tried several methods, but none have worked properly. Could you help me out? Thanks!

12 Replies

SirAlyon•2mo ago

Anyone? 😦

toeknee•2mo ago

->disableOptionWhen(fn (string $value): bool => $value === 'published') yeah it will https://filamentphp.com/docs/3.x/forms/fields/toggle-buttons#disabling-specific-options

Toggle buttons - Form Builder - Filament

SirAlyon•2mo ago

Ye i tried with this method but coudn't work as excepted 😦

toeknee•2mo ago

Why?

SirAlyon•2mo ago

I'm trying, im gonna paste the code asap. Thanks for help Sorry but im not understanding how to use this function:

ToggleButtons::make('allocazione')
                                        ->label('')
                                        ->multiple()
                                        ->required()
                                        ->markAsRequired(false)
                                        ->options([
                                            'obbligazionaria' => 'Obbligazionaria',
                                            'prudente' => 'Prudente',
                                            'moderata' => 'Moderata',
                                            'azionaria' => 'Azionaria',
                                            'libera' => 'Libera',
                                        ])
                                        ->disableOptionWhen(function (string $value) {
                                            switch ($value) {
                                                case 'obbligazionaria':
                                                    return 'libera';
                                                    break;
                                                case 'prudente':
                                                    return 'libera';
                                                    break;
                                                case 'moderata':
                                                    return 'libera';
                                                    break;
                                                case 'azionaria':
                                                    return 'libera';
                                                    break;
                                
                                            }
                                        })
                                        ->rules([new Allocazione])
                                        ->inline()

ToggleButtons::make('allocazione')
                                        ->label('')
                                        ->multiple()
                                        ->required()
                                        ->markAsRequired(false)
                                        ->options([
                                            'obbligazionaria' => 'Obbligazionaria',
                                            'prudente' => 'Prudente',
                                            'moderata' => 'Moderata',
                                            'azionaria' => 'Azionaria',
                                            'libera' => 'Libera',
                                        ])
                                        ->disableOptionWhen(function (string $value) {
                                            switch ($value) {
                                                case 'obbligazionaria':
                                                    return 'libera';
                                                    break;
                                                case 'prudente':
                                                    return 'libera';
                                                    break;
                                                case 'moderata':
                                                    return 'libera';
                                                    break;
                                                case 'azionaria':
                                                    return 'libera';
                                                    break;
                                
                                            }
                                        })
                                        ->rules([new Allocazione])
                                        ->inline()

This code is disabling 'obbligazionaria', 'prudente','moderata', 'azionaria' by default.. and trying with something like

->disableOptionWhen(fn (string $value): bool => $value === 'libera')

->disableOptionWhen(fn (string $value): bool => $value === 'libera')

result in:

SirAlyon•2mo ago

SirAlyon•2mo ago

as you can see "libera" is disabled by default Pump

toeknee•2mo ago

So build a function instead of an arrow function. And condition if value = x return true, for each option.

SirAlyon•2mo ago

Something like that:

ToggleButtons::make('allocazione')
                                        ->label('')
                                        ->multiple()
                                        ->required()
                                        ->markAsRequired(false)
                                        ->options([
                                            'obbligazionaria' => 'Obbligazionaria',
                                            'prudente' => 'Prudente',
                                            'moderata' => 'Moderata',
                                            'azionaria' => 'Azionaria',
                                            'libera' => 'Libera',
                                        ])
                                        //->disableOptionWhen(fn (string $value): bool => $value === 'libera')
                                        ->disableOptionWhen(function (string $value) {
                                            switch ($value) {
                                                case 'obbligazionaria':
                                                    return 'true';
                                                    break;
                                                case 'prudente':
                                                    return 'true';
                                                    break;
                                                case 'moderata':
                                                    return 'true';
                                                    break;
                                                case 'azionaria':
                                                    return 'true';
                                                    break;
                                            }
                                        })

ToggleButtons::make('allocazione')
                                        ->label('')
                                        ->multiple()
                                        ->required()
                                        ->markAsRequired(false)
                                        ->options([
                                            'obbligazionaria' => 'Obbligazionaria',
                                            'prudente' => 'Prudente',
                                            'moderata' => 'Moderata',
                                            'azionaria' => 'Azionaria',
                                            'libera' => 'Libera',
                                        ])
                                        //->disableOptionWhen(fn (string $value): bool => $value === 'libera')
                                        ->disableOptionWhen(function (string $value) {
                                            switch ($value) {
                                                case 'obbligazionaria':
                                                    return 'true';
                                                    break;
                                                case 'prudente':
                                                    return 'true';
                                                    break;
                                                case 'moderata':
                                                    return 'true';
                                                    break;
                                                case 'azionaria':
                                                    return 'true';
                                                    break;
                                            }
                                        })

(still not working) I have some doubts this is the right method to accomplish what i need :/

Tally•2mo ago

try this

->disableOptionWhen(function ($value, $state) {
    $libera_selected = in_array('libera', $state);

    // something is selected but nog libera
    if (count($state)>0 && !$libera_selected)
    {
        // disable libera
        if ($value==='libera')
        {
            return true;
        }
    }

    // when libera is selected
    if ($libera_selected)
    {
        // you must be able to deselect it
        if ($value==="libera")
        {
            return false;
        }

        // disable the rest
        return true;
    }

    return false;
})

->disableOptionWhen(function ($value, $state) {
    $libera_selected = in_array('libera', $state);

    // something is selected but nog libera
    if (count($state)>0 && !$libera_selected)
    {
        // disable libera
        if ($value==='libera')
        {
            return true;
        }
    }

    // when libera is selected
    if ($libera_selected)
    {
        // you must be able to deselect it
        if ($value==="libera")
        {
            return false;
        }

        // disable the rest
        return true;
    }

    return false;
})

you also need the ->live() to work the $state is the current array of options ow I used a Forms\Components\CheckboxList for testing in my project

SirAlyon•2mo ago

@Tally You have saved me from days of futile attempts. I don't know how to thank you! Thank you so much. It is working perfectly fine 🙂 ❤️

Tally•2mo ago

you're welcome 🙏🏻

Gaming

Programming

Help Needed with ToggleButtons in Filament Form