Prime components - Schemas

Introduction

Within Filament schemas, prime components are the most basic building blocks that can be used to insert arbitrary content into a schema, such as text and images. As the name suggests, prime components are not divisible and cannot be made simpler. Filament provides a set of built-in prime components:

Text
Icon
Image
Unordered list

You may also create your own custom components to add your own arbitrary content to a schema.

An example of using prime components to set up two-factor authentication.

In this example, prime components are being used to display instructions to the user, a QR code that the user can scan, and list of recovery codes that the user can save:

use Filament\Actions\Action;
use Filament\Schemas\Components\Image;
use Filament\Schemas\Components\Section;
use Filament\Schemas\Components\Text;
use Filament\Schemas\Components\UnorderedList;
use Filament\Support\Enums\FontWeight;
use Filament\Support\Enums\TextSize;

$schema
    ->components([
        Text::make('Scan this QR code with your authenticator app:')
            ->color('neutral'),
        Image::make(
            url: asset('images/qr.jpg'),
            alt: 'QR code to scan with an authenticator app',
        )
            ->imageHeight('12rem')
            ->alignCenter(),
        Section::make()
            ->schema([
                Text::make('Please save the following recovery codes in a safe place. They will only be shown once, but you\'ll need them if you lose access to your authenticator app:')
                    ->weight(FontWeight::Bold)
                    ->color('neutral'),
                UnorderedList::make(fn (): array => array_map(
                    fn (string $recoveryCode): Text => Text::make($recoveryCode)
                        ->copyable()
                        ->fontFamily(FontFamily::Mono)
                        ->size(TextSize::ExtraSmall)
                        ->color('neutral'),
                    ['tYRnCqNLUx-3QOLNKyDiV', 'cKok2eImKc-oWHHH4VhNe', 'C0ZstEcSSB-nrbyk2pv8z', '49EXLRQ8MI-FpWywpSDHE', 'TXjHnvkUrr-KuiVJENPmJ', 'BB574ookll-uI20yxP6oa', 'BbgScF2egu-VOfHrMtsCl', 'cO0dJYqmee-S9ubJHpRFR'],
                ))
                    ->size(TextSize::ExtraSmall),
            ])
            ->compact()
            ->secondary(),
    ])

Although text can be rendered in a schema using an infolist text entry, entries are intended to render a label-value detail about an entity (like an Eloquent model), and not to render arbitrary text. Prime components are more suitable for this purpose. Infolists can be considered more similar to description lists in HTML.

Prime component classes can be found in the Filament\Schemas\Components namespace. They reside within the schema array of components.

Text component

Text can be inserted into a schema using the Text component. Text content is passed to the make() method:

use Filament\Schemas\Components\Text;

Text::make('Modifying these permissions may give users access to sensitive information.')

To render raw HTML content, you can pass an HtmlString object to the make() method:

use Filament\Schemas\Components\Text;
use Illuminate\Support\HtmlString;

Text::make(new HtmlString('<strong>Warning:</strong> Modifying these permissions may give users access to sensitive information.'))

NOTE

Be aware that you will need to ensure that the HTML is safe to render, otherwise your application will be vulnerable to XSS attacks.

To render Markdown, you can use Laravel’s str() helper to convert Markdown to HTML, and then transform it into an HtmlString object:

use Filament\Schemas\Components\Text;

Text::make(
    str('**Warning:** Modifying these permissions may give users access to sensitive information.')
        ->inlineMarkdown()
        ->toHtmlString(),
)

As well as allowing a static value, the make() method also accepts a function to dynamically calculate it. You can inject various utilities into the function as parameters.

Utility	Type	Parameter	Description
Component	`Filament\Schemas\Components\Component`	`$component`	The current component instance.
Get function	`Filament\Schemas\Components\Utilities\Get`	`$get`	A function for retrieving values from the current schema data. Validation is not run on form fields.
Livewire	`Livewire\Component`	`$livewire`	The Livewire component instance.
Eloquent model FQN	`?string<Illuminate\Database\Eloquent\Model>`	`$model`	The Eloquent model FQN for the current schema.
Operation	`string`	`$operation`	The current operation being performed by the schema. Usually `create`, `edit`, or `view`.
Eloquent record	`?Illuminate\Database\Eloquent\Model`	`$record`	The Eloquent record for the current schema.

#Introduction

#Text component

#Customizing the text color

#Using a neutral color

#Displaying as a “badge”

#Adding an icon to the badge

#Customizing the text size

#Customizing the font weight

#Customizing the font family

#Adding a tooltip to the text

#Using JavaScript to determine the content of the text

#Icon component

#Customizing the icon color

#Adding a tooltip to the icon

#Image component

#Customizing the image size

#Aligning the image

#Adding a tooltip to the image

#Unordered list component

#Customizing the bullet size

#Adding extra HTML attributes to a prime component

Introduction

Text component

Customizing the text color

Using a neutral color

Displaying as a “badge”

Adding an icon to the badge

Customizing the text size

Customizing the font weight

Customizing the font family

Adding a tooltip to the text

Using JavaScript to determine the content of the text

Icon component

Customizing the icon color

Adding a tooltip to the icon

Image component

Customizing the image size

Aligning the image

Adding a tooltip to the image

Unordered list component

Customizing the bullet size

Adding extra HTML attributes to a prime component