Filament v3 Custom Field: Colour-Swatch Picker | Mohamed Said       [Skip to content](#main)  [ ![](https://cdn.msaied.com/01KT78WE565VEMM3PSNQAAB0MH.png) Mohamed SaidLaravel Backend Engineer ](https://www.msaied.com/public) - [Home](https://www.msaied.com/public)
- [Projects](https://www.msaied.com/public/projects)
- [Articles](https://www.msaied.com/public/articles)
- [Certificates](https://www.msaied.com/public/certificates)
- [About](https://www.msaied.com/public#about)

           [  Contact](https://www.msaied.com/public#contact) Menu 

Menu
----

Close 

 - [HomeStart here](https://www.msaied.com/public)
- [ProjectsCase studies](https://www.msaied.com/public/projects)
- [ArticlesEngineering notes](https://www.msaied.com/public/articles)
- [CertificatesCredentials](https://www.msaied.com/public/certificates)
- [AboutHow I work](https://www.msaied.com/public#about)
- [ContactGet in touch](https://www.msaied.com/public#contact)

  [Start a conversation](https://www.msaied.com/public#contact) [WhatsApp](https://wa.me/201094619204) [Email](mailto:hello@msaied.com) 

 1. [Home](https://www.msaied.com/public)
2. /
3. [Articles](https://www.msaied.com/public/articles)
4. /
5. Filament v3 Custom Form Fields: Building a Reusable Colour-Swatch Picker

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

 Learn how to build a fully reusable, Livewire-powered colour-swatch picker as a first-class Filament v3 custom field — with state, validation, and dark-mode support baked in.

 ![](https://cdn.msaied.com/01M22N44A70A5MC2S599JP0MPH.webp) [Mohamed Said](https://www.msaied.com/public#person) Published 14 Jun 2026 · Updated 14 Jun 2026 · 1 min read

ShareCopy linkCopied

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

  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)

 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