Skip to main content
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

​
blocks
method
Defines the available block types.
Builder::make('content')
    ->blocks([
        Builder\Block::make('text')
            ->schema([...]),
        Builder\Block::make('image')
            ->schema([...]),
    ])
​
blockNumbers
method
Shows block numbers.
Builder::make('content')
    ->blocks([...])
    ->blockNumbers()
​
blockIcons
method
Controls block icons display.
Builder::make('content')
    ->blocks([...])
    ->blockIcons(false)
​
blockPickerColumns
method
Sets columns for block picker.
Builder::make('content')
    ->blocks([...])
    ->blockPickerColumns(3)
​
blockPickerWidth
method
Sets block picker width.
Builder::make('content')
    ->blocks([...])
    ->blockPickerWidth('2xl')
​
addActionLabel
method
Customizes the add button label.
Builder::make('content')
    ->blocks([...])
    ->addActionLabel('Add block')
​
collapsible
method
Makes blocks collapsible.
Builder::make('content')
    ->blocks([...])
    ->collapsible()
​
collapsed
method
Makes blocks collapsed by default.
Builder::make('content')
    ->blocks([...])
    ->collapsible()
    ->collapsed()
​
cloneable
method
Allows cloning blocks.
Builder::make('content')
    ->blocks([...])
    ->cloneable()
​
deletable
method
Controls whether blocks can be deleted.
Builder::make('content')
    ->blocks([...])
    ->deletable(false)
​
reorderable
method
Controls whether blocks can be reordered.
Builder::make('content')
    ->blocks([...])
    ->reorderable(false)
​
reorderableWithButtons
method
Enables reordering with up/down buttons.
Builder::make('content')
    ->blocks([...])
    ->reorderableWithButtons()
​
minItems
method
Sets minimum number of blocks.
Builder::make('content')
    ->blocks([...])
    ->minItems(1)
​
maxItems
method
Sets maximum number of blocks.
Builder::make('content')
    ->blocks([...])
    ->maxItems(10)

​
Block Configuration

​
Builder\Block::make
method
Creates a new block type.
Builder\Block::make('heading')
    ->schema([...])
    ->label('Heading')
    ->icon('heroicon-o-h1')
​
schema
method
Defines the block fields.
Builder\Block::make('text')
    ->schema([
        Textarea::make('content'),
    ])
​
label
method
Sets the block label.
Builder\Block::make('heading')
    ->label('Section Heading')
​
icon
method
Sets the block icon.
use Filament\Support\Icons\Heroicon;

Builder\Block::make('image')
    ->icon(Heroicon::Photo)
​
columns
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',
        ];
    }
}

Build docs developers (and LLMs) love

Get started for freeTalk to us