Custom Select box in filament

Certainly! To create a custom select box (or any custom form input) in Filament Admin with custom functionality and Tailwind CSS, you should create a custom form component. Here’s a step-by-step solution:

1. Generate a Custom Field Component

First, generate a new field component using Filament’s artisan command:

php artisan make:filament-component CustomSelect

This will create a new component class and Blade view.

---

2. Edit the Blade View

Open resources/views/filament/components/custom-select.blade.php and add your custom select box. Here’s an example using Tailwind CSS:

<select
    {{ $attributes->merge(['class' => 'block w-full mt-1 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-500 focus:ring-opacity-50']) }}
    wire:model="{{ $getStatePath() }}"
>
    <option value="">Select an option</option>
    @foreach ($getOptions() as $value => $label)
        <option value="{{ $value }}">{{ $label }}</option>
    @endforeach
</select>

You can add any custom JavaScript or Alpine.js for extra functionality.

---

3. Update the Component Class

Open app/Filament/Components/CustomSelect.php (or wherever your component was generated) and define the options and any custom logic:

<?php

namespace App\Filament\Components;

use Filament\Forms\Components\Field;

class CustomSelect extends Field
{
    protected string $view = 'filament.components.custom-select';

    protected array $options = [];

    public function options(array $options): static
    {
        $this->options = $options;
        return $this;
    }

    public function getOptions(): array
    {
        return $this->options;
    }
}

---

4. Use Your Custom Field in a Filament Form

In your Filament resource or form, use your custom field:

use App\Filament\Components\CustomSelect;

CustomSelect::make('status')
    ->label('Status')
    ->options([
        'draft' => 'Draft',
        'published' => 'Published',
        'archived' => 'Archived',
    ])
    ->required(),

---

5. Add Custom Functionality

If you need custom JS, you can use Alpine.js directly in your Blade view, or include scripts as needed.

---

Summary

• Generate a custom Filament field component.
• Style it with Tailwind in the Blade view.
• Add custom logic and options in the PHP class.
• Use it in your Filament forms.

This approach gives you full control over the select box’s appearance and behavior in Filament Admin.