ColorSwatchField

Summary

Preset color picker: horizontal swatch pills with optional section header and tooltips.


Class	`Bjanczak\FilamentFlexFields\Filament\Forms\Components\ColorSwatchField`
State type	`string\|null` — selected color key (not hex)
FieldType	`color_presets`

Basic usage

use Bjanczak\FilamentFlexFields\Filament\Forms\Components\ColorSwatchField;

ColorSwatchField::make('theme_color')
    ->colors([
        'indigo' => '#6366f1',
        'rose' => '#f43f5e',
        'emerald' => '#10b981',
    ])
    ->sectionLabel('Brand colors')
    ->tooltips(true);

ColorSwatchField::make('accent')
    ->colors(['primary' => '#3b82f6', 'white' => '#ffffff'])
    ->tooltips([
        'primary' => 'Primary blue',
        'white' => 'White',
    ])
    ->size('lg');

State format

Stores the array key from colors(), e.g. 'indigo', not #6366f1.

Validation

Rule	Detail
`nullable`	No selection allowed
`Rule::in(...)`	Key must exist in `colors()`

Configuration API

`colors(array|Closure $colors)`

Map of key => hex (or CSS color). Required for meaningful UI.

ColorSwatchField::make('field_name')
    ->colors(['value1', 'value2']);

`sectionLabel(string|Closure|null $label)`

Optional heading above swatches.

ColorSwatchField::make('field_name')
    ->sectionLabel('value');

`sectionIcon(string|BackedEnum|Htmlable|Closure|null $icon)`

Icon next to section label. When label is set and icon omitted, uses config color_swatch_section_icon or GravityIcon::Palette.

ColorSwatchField::make('field_name')
    ->sectionIcon('value');

`tooltips(bool|array|Closure $tooltips = true)`

true = auto labels from keys; false = no tooltips; array = per-key labels.

ColorSwatchField::make('field_name')
    ->tooltips(true);

`size(string|ControlSize|Closure $size)`

sm, md, lg. Default: md.

ColorSwatchField::make('field_name')
    ->size('md');

Public helper methods

Method	Returns	Description
`getColors()`	`array<string, string>`	Key → color map
`getSectionLabel()`	`string\|null`	Header text
`getSectionIcon()`	`string\|BackedEnum\|Htmlable\|null`	Header icon
`getDefaultSectionIcon()`	`string\|BackedEnum\|Htmlable`	Fallback icon
`hasTooltips()`	`bool`	Tooltips enabled
`getColorLabel(string $key)`	`string`	Tooltip for key
`isLightSwatch(string $hex)`	`bool`	Light swatch (border adjustment)

FlexField schema config

Config key	Maps to
`colors`	`colors()`
`section_label`	`sectionLabel()`
`section_icon`	`sectionIcon()`
`size`	`size()`
`tooltips`	`tooltips()`

CSS classes

Class	Role
`fff-color-swatch`	Root wrapper
`fff-color-swatch--{sm\|md\|lg}`	Size modifier
`fff-color-swatch__pill`	Swatch button
`fff-color-swatch__pill--light`	Light color border
`fff-color-swatch__pill.is-selected`	Selected state

Implementation notes

Keys are persisted; map to hex in your application layer or accessor.
isLightSwatch() detects white swatches for contrast borders.

Getting Started

Guides & Resources

Text & Input

Number & Range

Choice & Selection

Date & Time

Media, Color & Location

Rating & Tables

Actions & Enterprise

Layout & Display (Schemas)

Summary

Basic usage

State format

Validation

Configuration API

`colors(array|Closure $colors)`

`sectionLabel(string|Closure|null $label)`

`sectionIcon(string|BackedEnum|Htmlable|Closure|null $icon)`

`tooltips(bool|array|Closure $tooltips = true)`

`size(string|ControlSize|Closure $size)`

Public helper methods

FlexField schema config

CSS classes

Implementation notes

​Summary

​Basic usage

​State format

​Validation

​Configuration API

​colors(array|Closure $colors)

​sectionLabel(string|Closure|null $label)

​sectionIcon(string|BackedEnum|Htmlable|Closure|null $icon)

​tooltips(bool|array|Closure $tooltips = true)

​size(string|ControlSize|Closure $size)

​Public helper methods

​FlexField schema config

​CSS classes

​Implementation notes

Summary

Basic usage

State format

Validation

Configuration API

`colors(array|Closure $colors)`

`sectionLabel(string|Closure|null $label)`

`sectionIcon(string|BackedEnum|Htmlable|Closure|null $icon)`

`tooltips(bool|array|Closure $tooltips = true)`

`size(string|ControlSize|Closure $size)`

Public helper methods

FlexField schema config

CSS classes

Implementation notes