How do you create a UI Blade component for a Filament field?

For some reason, not all of the Filament form fields have relative UI Blade components. Can someone please explain how to create a Blade component for the Toggle field, as an example?

I know how to use the Filament forms method in a Resource class. I want to use a Blade component like <x-filament::input.toggle /> within a custom Livewire page. I would like to use the existing Filament Toggle field. This is already possible with the Filament Select input field via <x-filament::input.select />, but there is no Toggle UI blade component.

Here are the current available UI Blade components for form fields: https://filamentphp.com/docs/3.x/support/blade-components/overview

I tried adding the following to the AppServiceProvider:

Filament::serving(function () {

    Blade::component('filament::input.toggle', \Filament\Forms\Components\Toggle::class);
});

but got the following error:

[Method Filament\Forms\Components\Toggle::resolve does not exist.](http://localhost/organization/set-preferences?oid=9502ce34-a1f2-4f12-b6a2-553440775a0c#top)

I'm sure there are a lot of gaps in my understanding of the source code thus far as it's pretty complicated.

I also tried extending the Toggle field, but still had same resolve issue.

shomari

1 year ago

Level 1

Did you ever find a solution?

Merklin

1 year ago

Level 7

A simple example of how to create a custom table component. I needed to make a column appear as a progress bar.

In app dir I've created a folder named Tables and a subfolder named Columns. Inside this sub dir I've created the class for my table component:

<?php

declare(strict_types=1);

namespace App\Tables\Columns;

use Filament\Tables\Columns\Column;

class ProgressColumn extends Column
{
    protected string $view = 'tables.columns.progress-column';
}

The blade file for the component in resources/views/tables/columns:

@php
    if ($getState() <= 100) {
        $color = 'primary';
        $fill = $getState();
    } else {
        $color = 'danger';
        $fill = '100';
    }
@endphp

<div class="m-4 h-4 w-full overflow-hidden rounded-md bg-gray-200 shadow-inner dark:bg-gray-800">
    <div
        class="bg-{{ $color }} flex h-full items-center justify-start rounded-md text-xs font-semibold text-white shadow-inner dark:bg-opacity-50"
        style="width: {{ $getState() }}%"
    >
        <span class="pl-1">{{ number_format($getState(), 2) }}%</span>
    </div>
</div>

And that is all. When I need this column in a table I call it like:

use App\Tables\Columns\ProgressColumn;

.....

ProgressColumn::make('progress')

Using this approach you can make whatever table or form field you need. And the folder structure is just for some clarity. You can put the class for your element wherever you want.

Please or to participate in this conversation.