Filament•11mo ago

How do you define the layout for a header action form?

I have a simple section, shown below. I've tried using Grid and Section within the ->form() definition, but I get a type error that the ->form() argument must be of type Filament\Forms\Components\Component

->headerActions([
    Action::make('Edit Address')
        ->label('Edit Address')
        ->outlined(true)
        ->color('primary-blue')
        ->size(ActionSize::ExtraSmall)
        ->icon('heroicon-o-pencil')
        ->modalDescription('Update contact address.')
        ->fillForm(fn ($record): array => [
            'street_one' => $record->street_one,
            'street_two' => $record->street_two,
            'city' => $record->city,
            'state' => $record->state,
            'zip' => $record->zip,
        ])
        ->form([
            TextInput::make('street_one')
                ->label('Street One'),
            TextInput::make('street_two')
                ->label('Street Two'),
            TextInput::make('city')
                ->label('City'),
            Select::make('state')
                ->label('State')
                ->options(State::pluck('abbreviation', 'name')->toArray())
                ->searchable(),
            TextInput::make('zip')
                ->label('Zip'),
            
        ])
        ->action(function ($record, $data) {
            ray($record, $data);
        })

->headerActions([
    Action::make('Edit Address')
        ->label('Edit Address')
        ->outlined(true)
        ->color('primary-blue')
        ->size(ActionSize::ExtraSmall)
        ->icon('heroicon-o-pencil')
        ->modalDescription('Update contact address.')
        ->fillForm(fn ($record): array => [
            'street_one' => $record->street_one,
            'street_two' => $record->street_two,
            'city' => $record->city,
            'state' => $record->state,
            'zip' => $record->zip,
        ])
        ->form([
            TextInput::make('street_one')
                ->label('Street One'),
            TextInput::make('street_two')
                ->label('Street Two'),
            TextInput::make('city')
                ->label('City'),
            Select::make('state')
                ->label('State')
                ->options(State::pluck('abbreviation', 'name')->toArray())
                ->searchable(),
            TextInput::make('zip')
                ->label('Zip'),
            
        ])
        ->action(function ($record, $data) {
            ray($record, $data);
        })

Solution:

Yes. But there’s actually a form component called Group.

Jump to solution

5 Replies

bennettOP•11mo ago

Update: I was able to accomplish the desired effect, but it feels wrong. Any input appreciated.

->form(function($livewire){

    return (new Form($livewire))
        ->schema([
                TextInput::make('street_one')
                    ->label('Street One'),
                TextInput::make('street_two')
                    ->label('Street Two'),
                TextInput::make('city')
                    ->label('City'),
                Select::make('state')
                    ->label('State')
                    ->options(State::pluck('abbreviation', 'name')->toArray())
                    ->searchable(),
                TextInput::make('zip')
                    ->label('Zip'),
                
            ])->columns(2);
})

->form(function($livewire){

    return (new Form($livewire))
        ->schema([
                TextInput::make('street_one')
                    ->label('Street One'),
                TextInput::make('street_two')
                    ->label('Street Two'),
                TextInput::make('city')
                    ->label('City'),
                Select::make('state')
                    ->label('State')
                    ->options(State::pluck('abbreviation', 'name')->toArray())
                    ->searchable(),
                TextInput::make('zip')
                    ->label('Zip'),
                
            ])->columns(2);
})

awcodes•11mo ago

Just put the form fields inside a Group or some other layout component and define the columns there.

bennettOP•11mo ago

Like a Section or a Grid?

Solution

awcodes•11mo ago

Yes. But there’s actually a form component called Group.

bennettOP•10mo ago

Yep, That did it. Thanks!

Gaming

Programming

How do you define the layout for a header action form?