Filament v3 Custom Field: Colour-Swatch Picker | Mohamed Said        [  ![Mohamed Said](https://cdn.msaied.com/01KT78WE565VEMM3PSNQAAB0MH.png)   Mohamed Said Laravel Backend Engineer  ](https://www.msaied.com) [ Home ](https://www.msaied.com) [ Projects ](https://www.msaied.com/projects) [ Articles  ](https://www.msaied.com/articles) [ Certificates ](https://www.msaied.com/certificates) [ Contact ](https://www.msaied.com#contact-section) 

       [  ](https://github.com/EG-Mohamed)       

 [ Home ](https://www.msaied.com) [ Projects ](https://www.msaied.com/projects) [ Articles ](https://www.msaied.com/articles) [ Certificates ](https://www.msaied.com/certificates) [ Contact ](https://www.msaied.com#contact-section) 

  [ home ](https://www.msaied.com)    [ articles ](https://www.msaied.com/articles)    Filament v3 Custom Form Fields: Building a Reusable Colour-Swatch Picker        On this page       1. [  Why Roll Your Own Filament Field? ](#why-roll-your-own-filament-field)
2. [  Scaffolding the Field Class ](#scaffolding-the-field-class)
3. [  The Blade View ](#the-blade-view)
4. [  Registering and Using the Field ](#registering-and-using-the-field)
5. [  Adding a Custom Validation Rule ](#adding-a-custom-validation-rule)
6. [  Dark-Mode Consideration ](#dark-mode-consideration)
7. [  Takeaways ](#takeaways)

  ![Filament v3 Custom Form Fields: Building a Reusable Colour-Swatch Picker](https://cdn.msaied.com/162/f6902e8b2586bcf97f6f1b87edb85bca.png)

  #filament   #laravel   #livewire   #custom-fields  

 Filament v3 Custom Form Fields: Building a Reusable Colour-Swatch Picker 
==========================================================================

     14 Jun 2026      1 min read    ![Mohamed Said](https://cdn.msaied.com/01KT78WE565VEMM3PSNQAAB0MJ.jpg)  Mohamed Said  

       Table of contents

1. [  01   Why Roll Your Own Filament Field?  ](#why-roll-your-own-filament-field)
2. [  02   Scaffolding the Field Class  ](#scaffolding-the-field-class)
3. [  03   The Blade View  ](#the-blade-view)
4. [  04   Registering and Using the Field  ](#registering-and-using-the-field)
5. [  05   Adding a Custom Validation Rule  ](#adding-a-custom-validation-rule)
6. [  06   Dark-Mode Consideration  ](#dark-mode-consideration)
7. [  07   Takeaways  ](#takeaways)

 Why Roll Your Own Filament Field?
---------------------------------

Filament v3 ships with a rich field library, but product teams inevitably hit requirements that fall outside it — a star-rating input, a drag-rank list, or in our case a **colour-swatch picker** where users choose from a curated brand palette rather than an arbitrary hex string. Building this as a proper `Field` subclass (not a raw Blade hack) means you get schema-level validation, `->disabled()`, `->live()`, `->hint()`, and every other Filament modifier for free.

---

Scaffolding the Field Class
---------------------------

Filament custom fields extend `Filament\Forms\Components\Field`. The minimum surface area is:

```php