Filament•5mo ago

Display two sections next to each other

I would like to have a Filament Form where I have two sections next to each other. I was looking into the documentation but it seems not to be possible. Grid columns does seem to create two columns but inside a section. I don't want that, I want two independent sections next to each other I have been trying the following:

    public static function form(Form $form): Form
    {
        return $form
            ->schema([
                Section::make('Voucher Information')
                    ->schema([

                        Section::make('General Information')
                            ->schema([Forms\Components\TextInput::make('name')]),

                        Section::make('Product Information')
                            ->schema([Forms\Components\TextInput::make('code')])

                    ])->columns(2)

            ]);
    }

    public static function form(Form $form): Form
    {
        return $form
            ->schema([
                Section::make('Voucher Information')
                    ->schema([

                        Section::make('General Information')
                            ->schema([Forms\Components\TextInput::make('name')]),

                        Section::make('Product Information')
                            ->schema([Forms\Components\TextInput::make('code')])

                    ])->columns(2)

            ]);
    }

and

    public static function form(Form $form): Form
    {
        return $form
            ->schema([
                Section::make('General Information')
                    ->schema([Forms\Components\TextInput::make('name')]),
                Section::make('Product Information')
                    ->schema([Forms\Components\TextInput::make('code')])

            ])->columns(2);
    }

    public static function form(Form $form): Form
    {
        return $form
            ->schema([
                Section::make('General Information')
                    ->schema([Forms\Components\TextInput::make('name')]),
                Section::make('Product Information')
                    ->schema([Forms\Components\TextInput::make('code')])

            ])->columns(2);
    }

Both don't work.

Section - Form Builder - Filament

Solution:

Hey - i think i achieved what youre trying to do by doing this: ``` return $form ->schema([...

Jump to solution

4 Replies

Solution

jlove1672•5mo ago

Hey - i think i achieved what youre trying to do by doing this:

        return $form
            ->schema([
                Grid::make(2)
                    ->schema([
                        Section::make([
                            TextInput::make('')
                                ->required(),
                            Grid::make()
                                ->schema([
                                    Toggle::make('')
                                        ->reactive(),
                                    Toggle::make('')
                                        ->reactive(),
                                ])
                        ])->columnSpan(1),
                        Section::make([
                            Select::make('')
                                ->label(' to ')
                                ->searchable()
                                ->options(),
                            Select::make('')
                                ->label( )
                                ->searchable()
                                ->options(),
                        ])
                            ->visible(fn ($get) => !$get(''))
                            ->columnSpan(1)
                    ]),
            ]);

        return $form
            ->schema([
                Grid::make(2)
                    ->schema([
                        Section::make([
                            TextInput::make('')
                                ->required(),
                            Grid::make()
                                ->schema([
                                    Toggle::make('')
                                        ->reactive(),
                                    Toggle::make('')
                                        ->reactive(),
                                ])
                        ])->columnSpan(1),
                        Section::make([
                            Select::make('')
                                ->label(' to ')
                                ->searchable()
                                ->options(),
                            Select::make('')
                                ->label( )
                                ->searchable()
                                ->options(),
                        ])
                            ->visible(fn ($get) => !$get(''))
                            ->columnSpan(1)
                    ]),
            ]);

jlove1672•5mo ago

It creates this layout

jlove1672•5mo ago

let me know if thats want you needed, if not, try draw what what you mean 👍

Wim•5mo ago

Yes, this is exactly what I needed. Your answer is much appreciated! I did it as follows:

        return $form
            ->schema([
                Grid::make(4)
                    ->schema([
                        Section::make([])->columnSpan(3),
                        Section::make([])
                            ->visible(fn ($get) => !$get(''))
                            ->columnSpan(1)
                    ]),
            ]);

        return $form
            ->schema([
                Grid::make(4)
                    ->schema([
                        Section::make([])->columnSpan(3),
                        Section::make([])
                            ->visible(fn ($get) => !$get(''))
                            ->columnSpan(1)
                    ]),
            ]);

Gaming

Programming

Display two sections next to each other