Custom form input field

To create a custom form input field in Filament Admin with custom functionality and custom CSS, you should create a custom form component by extending Filament's Field class. Here’s a step-by-step solution:

1. Create a Custom Field Class

Generate a new field class using Artisan:

php artisan make:filament-custom-field CustomInput

This will create a new field class in app/Forms/Components/CustomInput.php.

2. Define the Field Logic

Edit the generated class to define your custom logic and view:

<?php

namespace App\Forms\Components;

use Filament\Forms\Components\Field;

class CustomInput extends Field
{
    protected string $view = 'forms.components.custom-input';
}

3. Create the Blade View

Create a Blade file at resources/views/forms/components/custom-input.blade.php:

<div>
    <input
        type="text"
        {{ $applyStateBindingModifiers('wire:model') }}="{{ $getStatePath() }}"
        {!! $attributes->merge([
            'class' => 'custom-input-class ' . ($errors->has($getStatePath()) ? 'border-red-500' : ''),
            'placeholder' => $getPlaceholder(),
        ]) !!}
    >

    @if ($getHelperText())
        <p class="text-sm text-gray-500">{{ $getHelperText() }}</p>
    @endif
</div>

@push('styles')
<style>
.custom-input-class {
    border: 2px solid #4F46E5;
    border-radius: 6px;
    padding: 0.5rem 1rem;
    /* Add your custom CSS here */
}
</style>
@endpush

@push('scripts')
<script>
    // Add your custom JS functionality here, for example:
    document.addEventListener('DOMContentLoaded', function () {
        // Example: focus effect
        document.querySelectorAll('.custom-input-class').forEach(function(input) {
            input.addEventListener('focus', function() {
                input.style.backgroundColor = '#eef2ff';
            });
            input.addEventListener('blur', function() {
                input.style.backgroundColor = '';
            });
        });
    });
</script>
@endpush

4. Use the Custom Field in Your Form

In your Filament form, use the custom field:

use App\Forms\Components\CustomInput;

public static function form(Form $form): Form
{
    return $form
        ->schema([
            CustomInput::make('custom_field')
                ->label('Custom Field')
                ->helperText('This is a custom input field.'),
        ]);
}

Summary:

• Extend Filament's Field class.
• Create a Blade view for your field.
• Add your custom CSS and JS in the Blade file.
• Use the custom field in your Filament forms.

This approach gives you full control over the input’s functionality and appearance.