FilamentF
Filament•16mo ago
Jon Mason

Custom field with HasAffixes trait

Trying to set up this custom field and want to add a prefix $ icon. I can't seem to get a prefix to work on this field and wondering what I'm doing wrong.

use Filament\Forms\Components\Field;
use Filament\Forms\Components\Concerns\HasAffixes;

class MathInput extends Field
{
    use HasAffixes;

    protected string $view = 'forms.components.math-input';

    protected function setUp(): void
    {
        parent::setUp();

        $this->live(onBlur: true)
            ->afterStateUpdated(function (?string $state, ?string $old) {
                if ($state != null) {
                    $updatedState = $this->performMathOperation($state);
                    $this->state($updatedState);
                }
            });
    }

    public function getPrefixIcon(): ?string
    {
        return  'heroicon-o-currency-dollar';
    }


<x-dynamic-component :component="$getFieldWrapperView()" :field="$field">

    <div x-data="{
    state: $wire.entangle('{{ $getStatePath() }}'),
    updateState() {
        this.$wire.set('{{ $getStatePath() }}', this.state);
    }
}">
        <x-filament::input.wrapper>
            <x-filament::input type="text" x-model="state" @blur="updateState" />
        </x-filament::input.wrapper>
    </div>
</x-dynamic-component>
Solution
You need to pass the prefix to the wrapper since you’re in a custom view. See https://github.com/filamentphp/filament/blob/3.x/packages/forms/resources/views/components/text-input.blade.php
GitHub
filament/packages/forms/resources/views/components/text-input.blade...
A collection of beautiful full-stack components for Laravel. The perfect starting point for your next app. Using Livewire, Alpine.js and Tailwind CSS. - filamentphp/filament
Jump to solution
Was this page helpful?