Custom Field Types

FrankenCMS ships with a set of built-in field types, but you can register your own to support any Filament form component as a template field.

How It Works

A custom field type has three parts:

1. Directive Provider — defines the field type and registers its Blade directive
2. Field Renderer — controls how the stored value is rendered in templates
3. Registration — wires it all up in a service provider

Create a Directive Provider

Extend BaseDirectiveProvider and return a FieldType value object from getFieldType():

namespace App\Directives\Providers;

use FrankenCms\Contracts\FieldTypeInterface;
use FrankenCms\Directives\Providers\BaseDirectiveProvider;
use FrankenCms\ValueObjects\FieldType;
use Filament\Forms\Components\ColorPicker;
use App\Services\FieldRenderers\ColorFieldRenderer;

class ColorPickerDirectiveProvider extends BaseDirectiveProvider
{
    public function getFieldType(): FieldTypeInterface
    {
        return FieldType::make(
            name: 'colorPicker',
            directiveNames: ['ColorPicker'],
            filamentComponentClass: ColorPicker::class,
            rendererClass: ColorFieldRenderer::class,
        );
    }
}

The directiveNames array determines the Blade directive name. A value of ['ColorPicker'] registers @frankenColorPicker.

Create a Field Renderer

The renderer controls how the stored value is output when the directive is used in a template:

namespace App\Services\FieldRenderers;

use FrankenCms\Contracts\FieldRendererInterface;

class ColorFieldRenderer implements FieldRendererInterface
{
    public function render(mixed $value, ?string $fieldName = null): mixed
    {
        if (empty($value)) {
            return '';
        }

        return (string) $value;
    }
}

Register the Field Type

In your AppServiceProvider, register the field type using the FieldTypeManager:

use FrankenCms\Services\FieldTypeManager;
use App\Directives\Providers\ColorPickerDirectiveProvider;

public function boot(): void
{
    $manager = app(FieldTypeManager::class);
    $provider = new ColorPickerDirectiveProvider;

    $manager->register($provider->getFieldType(), $provider);
}

Use It in Templates

Once registered, the new directive is available in your Blade templates:

@frankenColorPicker('brand.color', ['label' => 'Brand Color'])

The Filament admin panel will show a color picker for this field, and the selected value will be rendered through your ColorFieldRenderer when the template is displayed.

FieldType Options

FieldType::make() accepts the following parameters:

Next Steps

• See the built-in field types
• Create settings tabs
• API reference