Form in Livewire component not displaying grid

Below is the form I am trying to render, but the form is not honouring the grid columns. The form is rendering all the fields vertically as full width inputs.

When I use the same structure in the admin panel, it renders as expected, but not in a frontend livewire component. Any ideas?

public function form(Form $form): Form
    {
        return $form
            ->schema([
                Section::make()->schema([
                    Grid::make()->columns(2)->schema([
                        TextInput::make('first_name')->label('First Name')->required()->maxLength(255),
                        TextInput::make('last_name')->label('Last Name'),
                    ]),
                ]),

                Grid::make()->columns(2)->schema([
                    TextInput::make('first_name')->label('First Name')->columnSpan(1)->nullable(),
                    TextInput::make('last_name')->label('Last Name')->columnSpan(1)->nullable(),
                ]),

                TextInput::make('email_address')->label('Email Address')->nullable(),
                TextInput::make('mobile_phone')->label('Mobile Phone')->nullable(),
                TextInput::make('address_1')->label('Address 1')->nullable(),
                TextInput::make('address_2')->label('Address 2')->nullable(),
                TextInput::make('suburb')->label('Suburb')->nullable(),
                Select::make('state')->label('State')->options([
                    'ACT' => 'ACT',
                    'NT' => 'NT',
                    'NSW' => 'NSW',
                    'QLD' => 'QLD',
                    'SA' => 'SA',
                    'Tas' => 'Tas',
                    'Vic' => 'Vic',
                    'WA' => 'WA',
                ])->nullable(),
                TextInput::make('postcode')->label('Postcode')->nullable(),
            ])
            ->statePath('data')
            ->model($this->record);
    }
Was this page helpful?