Komponen Filament

Ringkasan

Custom component Filament ada di app/Filament/Forms/Components/ (form fields) dan app/Filament/Schemas/Components/ (infolist). Dipakai ketika built-in component tidak memenuhi kebutuhan desain.

---

Struktur Folder

app/Filament/
├── Forms/Components/
│   ├── Inputs/       → Text input dengan custom formatting
│   ├── Selects/      → Searchable select dengan custom rendering
│   ├── Editors/      → Rich text editor
│   ├── Pickers/      → Date/time picker
│   ├── Media/        → File upload dengan preview
│   └── Containers/   → Layout container (tab, wizard)
└── Schemas/Components/
    ├── Cards/        → Info card dengan icon, status, action
    ├── Stats/        → Widget statistik
    ├── Timeline/     → Activity log timeline
    └── Layout/       → Column layouts, sections

---

Kapan Buat Custom Component

Skenario	Pakai Built-in	Pakai Custom
Text input biasa	✅	—
Input dengan CSS custom	—	✅
Dropdown 5 opsi	✅	—
Dropdown dengan search + icon	—	✅
Text display biasa	✅	—
Card dengan status badge dinamis	—	✅

---

Struktur Component

class NamaComponent extends BaseClass
{
    protected function setUp(): void
    {
        parent::setUp();
        // Konfigurasi default di sini
    }

    public static function make(string $name = 'default'): static
    {
        return parent::make($name);
    }
}

Contoh Form Component

namespace App\Filament\Forms\Components\Selects;

use Filament\Forms\Components\Select;

class CountrySelect extends Select
{
    protected function setUp(): void
    {
        parent::setUp();
        $this->label('Country')
             ->placeholder('Select a country...')
             ->searchable()
             ->options(fn () => Country::pluck('name', 'code')->toArray());
    }

    public static function make(string $name = 'country_code'): static
    {
        return parent::make($name);
    }
}

Pemakaian: CountrySelect::make()->required()

---

Aturan

Aturan	Deskripsi
Extend base class	Selalu extends class Filament (Select, TextInput, Entry, dll)
Pakai setUp()	Konfigurasi default di setUp(), bukan make()
Override make()	Override make() untuk default name
Satu tujuan	Satu component = satu purpose
Cek existing dulu	Cek app/Filament/Forms/Components/ sebelum buat baru

---

File Penting

File	Tujuan
app/Filament/Forms/Components/Inputs/	Custom form input
app/Filament/Forms/Components/Selects/	Custom select
app/Filament/Forms/Components/Editors/	Custom editor
app/Filament/Schemas/Components/Cards/	Custom infolist card
app/Filament/Schemas/Components/Timeline/	Custom timeline