Creating Custom Fields in Filament

filament laravel javascript alpinejs
December 5, 2025
2 min read
By Nour Sallam

Table of Contents

This is a list of all the sections in this post. Click on any of them to jump to that section.

Creating Custom Fields in Filament

Filament comes with many fields (TextInput, Select, etc.), but sometimes you need something specific—like a color picker, a map input, or a custom star rating.

The View

First, define the view for your field. Filament relies heavily on Alpine.js for interactivity.

<!-- resources/views/filament/forms/components/range-slider.blade.php -->
<x-dynamic-component
    :component="$getFieldWrapperView()"
    :field="$field"
>
    <div x-data="{ state: $wire.entangle('{{ $getStatePath() }}') }">
        <input 
            type="range" 
            x-model="state" 
            min="0" 
            max="100" 
            class="w-full"
        />
        <span x-text="state"></span>
    </div>
</x-dynamic-component>

The Class

Create a PHP class that extends Field.

namespace App\Forms\Components;
 
use Filament\Forms\Components\Field;
 
class RangeSlider extends Field
{
    protected string $view = 'filament.forms.components.range-slider';
}

Usage

Now you can use it in any Resource form:

use App\Forms\Components\RangeSlider;
 
RangeSlider::make('rating')
    ->label('User Rating')

Conclusion

Custom fields allow you to break out of the standard UI limitations without losing the benefits of Filament’s state management and validation handling.