Builder

The builder component allows you to create repeatable blocks with different schemas.

Basic Usage

use Filament\Forms\Components\Builder;
use Filament\Forms\Components\FileUpload;
use Filament\Forms\Components\Textarea;
use Filament\Forms\Components\TextInput;

Builder::make('content')
    ->blocks([
        Builder\Block::make('heading')
            ->schema([
                TextInput::make('content')->required(),
                Select::make('level')
                    ->options([
                        'h1' => 'H1',
                        'h2' => 'H2',
                        'h3' => 'H3',
                    ])
                    ->required(),
            ]),
        Builder\Block::make('paragraph')
            ->schema([
                Textarea::make('content')->required(),
            ]),
        Builder\Block::make('image')
            ->schema([
                FileUpload::make('url')->image()->required(),
                TextInput::make('alt')->required(),
            ]),
    ])

Available Methods

method

Defines the available block types.

Builder::make('content')
    ->blocks([
        Builder\Block::make('text')
            ->schema([...]),
        Builder\Block::make('image')
            ->schema([...]),
    ])

method

Shows block numbers.

Builder::make('content')
    ->blocks([...])
    ->blockNumbers()

method

Controls block icons display.

Builder::make('content')
    ->blocks([...])
    ->blockIcons(false)

method

Sets columns for block picker.

Builder::make('content')
    ->blocks([...])
    ->blockPickerColumns(3)

method

Sets block picker width.

Builder::make('content')
    ->blocks([...])
    ->blockPickerWidth('2xl')

method

Customizes the add button label.

Builder::make('content')
    ->blocks([...])
    ->addActionLabel('Add block')

method

Makes blocks collapsible.

Builder::make('content')
    ->blocks([...])
    ->collapsible()

method

Makes blocks collapsed by default.

Builder::make('content')
    ->blocks([...])
    ->collapsible()
    ->collapsed()

method

Allows cloning blocks.

Builder::make('content')
    ->blocks([...])
    ->cloneable()

method

Controls whether blocks can be deleted.

Builder::make('content')
    ->blocks([...])
    ->deletable(false)

method

Controls whether blocks can be reordered.

Builder::make('content')
    ->blocks([...])
    ->reorderable(false)

method

Enables reordering with up/down buttons.

Builder::make('content')
    ->blocks([...])
    ->reorderableWithButtons()

method

Sets minimum number of blocks.

Builder::make('content')
    ->blocks([...])
    ->minItems(1)

method

Sets maximum number of blocks.

Builder::make('content')
    ->blocks([...])
    ->maxItems(10)

Block Configuration

method

Creates a new block type.

Builder\Block::make('heading')
    ->schema([...])
    ->label('Heading')
    ->icon('heroicon-o-h1')

method

Defines the block fields.

Builder\Block::make('text')
    ->schema([
        Textarea::make('content'),
    ])

method

Sets the block label.

Builder\Block::make('heading')
    ->label('Section Heading')

method

Sets the block icon.

use Filament\Support\Icons\Heroicon;

Builder\Block::make('image')
    ->icon(Heroicon::Photo)

method

Sets grid columns for block fields.

Builder\Block::make('columns')
    ->schema([...])
    ->columns(2)

Common Patterns

Page Builder

Builder::make('content')
    ->blocks([
        Builder\Block::make('heading')
            ->schema([
                TextInput::make('content')->required(),
                Select::make('level')
                    ->options(['h2' => 'H2', 'h3' => 'H3'])
                    ->default('h2'),
            ])
            ->icon('heroicon-o-bars-3'),
        Builder\Block::make('paragraph')
            ->schema([
                RichEditor::make('content')->required(),
            ])
            ->icon('heroicon-o-document-text'),
        Builder\Block::make('image')
            ->schema([
                FileUpload::make('image')
                    ->image()
                    ->required(),
                TextInput::make('alt'),
                TextInput::make('caption'),
            ])
            ->icon('heroicon-o-photo'),
    ])
    ->collapsible()
    ->blockNumbers()

Landing Page Builder

Builder::make('blocks')
    ->blocks([
        Builder\Block::make('hero')
            ->schema([
                TextInput::make('heading')->required(),
                Textarea::make('subheading'),
                FileUpload::make('background')->image(),
            ]),
        Builder\Block::make('features')
            ->schema([
                Repeater::make('items')
                    ->schema([
                        TextInput::make('title'),
                        Textarea::make('description'),
                    ])
                    ->columns(2),
            ]),
        Builder\Block::make('cta')
            ->schema([
                TextInput::make('text')->required(),
                TextInput::make('url')->url()->required(),
            ]),
    ])
    ->cloneable()
    ->collapsible()

Database Casting

Add an array cast:

use Illuminate\Database\Eloquent\Model;

class Page extends Model
{
    protected function casts(): array
    {
        return [
            'content' => 'array',
        ];
    }
}

Form Components

Table Components

Layout Components

Infolist Components

Basic Usage

Available Methods

Block Configuration

Common Patterns

Page Builder

Landing Page Builder

Database Casting

​Basic Usage

​Available Methods

​Block Configuration

​Common Patterns

​Page Builder

​Landing Page Builder

​Database Casting

Basic Usage

Available Methods

Block Configuration

Common Patterns

Page Builder

Landing Page Builder

Database Casting