F
Filament•3w ago
Shaheen

toggle in input hint

It would be wonderful to be able to achieve something like the following 
TextInput::make('brand_name')
    ->hint(Toggle::make('same_as_company'))
TextInput::make('brand_name')
    ->hint(Toggle::make('same_as_company'))
I think use cases for this would be endless, one for example is to mirror another input maybe something like this 
TextInput::make('company_name')
    ->debounce()
    ->afterStateUpdated(fn ($get, $set, $state) => 
        $get('same_as_company') ? $set('brand_name', $state) : '')
    ),

TextInput::make('brand_name')
    ->hint(Toggle::make('same_as_company')->live())
    ->disabled(fn ($get) => $get('same_as_company'))
TextInput::make('company_name')
    ->debounce()
    ->afterStateUpdated(fn ($get, $set, $state) => 
        $get('same_as_company') ? $set('brand_name', $state) : '')
    ),

TextInput::make('brand_name')
    ->hint(Toggle::make('same_as_company')->live())
    ->disabled(fn ($get) => $get('same_as_company'))
I tried to achieve something similar and after hours of trying I did it using hintAction with a custom action and a custom view which renders a toggle 
<?php

namespace Modules\Dashboard\Filament\Forms;

use Closure;
use Filament\Forms\Components\Actions\Action;
use Filament\Forms\Components\Field;

class ToggleHintAction extends Action
{
    protected string $view = 'dashboard::components.filament.forms.toggle-hint';
    protected ?string $statePath;
    protected mixed $defaultState = false;

    public function getStatePath()
    {
        return $this->evaluate(function ($set, Field $component, $get) {
            $set($this->getName(), $get($this->getName()) ?? $this->getDefaultState());

            return "{$component->getContainer()->getStatePath()}.{$this->getName()}";
        });
    }

    public function default($state): self
    {
        $this->defaultState = $state;

        return $this;
    }

    public function getDefaultState(): mixed
    {
        return $this->evaluate($this->defaultState);
    }
}
<?php

namespace Modules\Dashboard\Filament\Forms;

use Closure;
use Filament\Forms\Components\Actions\Action;
use Filament\Forms\Components\Field;

class ToggleHintAction extends Action
{
    protected string $view = 'dashboard::components.filament.forms.toggle-hint';
    protected ?string $statePath;
    protected mixed $defaultState = false;

    public function getStatePath()
    {
        return $this->evaluate(function ($set, Field $component, $get) {
            $set($this->getName(), $get($this->getName()) ?? $this->getDefaultState());

            return "{$component->getContainer()->getStatePath()}.{$this->getName()}";
        });
    }

    public function default($state): self
    {
        $this->defaultState = $state;

        return $this;
    }

    public function getDefaultState(): mixed
    {
        return $this->evaluate($this->defaultState);
    }
}
and the most interesting part in the toggle view is for chars limits 
x-data={ state: $wire.$entangle('{{ $getStatePath() }}')
x-data={ state: $wire.$entangle('{{ $getStatePath() }}')
which works but I feel it's hacky and not the best way to do it, I'm willing to put the effort to achieve it this is the best I could come up with, any help is appreciated.
1 Reply
Matthew
Matthew•3w ago
Can you post an example of what the code is actally acheiving in the UX ?

Did you find this page helpful?