Laravel 11 Livewire 3 wire:model - Bind Form Input

Websolutionstuff | Mar-31-2025 | Categories : Laravel

In this tutorial, I’ll show you how to bind form inputs using wire:model in Laravel 11 with Livewire 3. Livewire makes it easy to handle real-time form updates without writing JavaScript. By binding inputs directly to component properties, we can update data instantly and improve the user experience.

Livewire makes it easy to handle real-time input updates and validation without writing complex JavaScript. We’ll go through a step-by-step example to see how wire:model works in a Livewire component.

Laravel 11 Livewire 3 wire:model - Bind Form Input

Step 1: Install Livewire in Laravel 11

If you haven’t installed Livewire yet, you can do so using Composer:

composer require livewire/livewire

Step 2: Create a Livewire Component

Run the following command to generate a new Livewire component:

php artisan make:livewire UserForm

This will create two files:

app/Livewire/UserForm.php (Component class)
resources/views/livewire/user-form.blade.php (View file)

Step 3: Update the Livewire Component

Edit app/Livewire/UserForm.php to add properties and a save method:

namespace App\Livewire;

use Livewire\Component;

class UserForm extends Component
{
    public string $name = '';
    public string $email = '';

    public function save()
    {
        // Perform validation (optional)
        $this->validate([
            'name' => 'required|min:3',
            'email' => 'required|email',
        ]);

        // Process form submission (e.g., save to database)
        session()->flash('message', 'Form submitted successfully!');
    }

    public function render()
    {
        return view('livewire.user-form');
    }
}

Step 4: Create the Blade View

Edit resources/views/livewire/user-form.blade.php to bind inputs:

<div>
    <form wire:submit.prevent="save">
        <div>
            <label for="name">Name:</label>
            <input type="text" id="name" wire:model="name" class="border p-2 w-full">
        </div>

        <div class="mt-2">
            <label for="email">Email:</label>
            <input type="email" id="email" wire:model="email" class="border p-2 w-full">
        </div>

        <button type="submit" class="mt-4 bg-blue-500 text-white px-4 py-2">Submit</button>
    </form>

    @if (session()->has('message'))
        <p class="mt-2 text-green-500">{{ session('message') }}</p>
    @endif
</div>

Step 5: Add Livewire to Your Blade Template

Include Livewire scripts in resources/views/layouts/app.blade.php or your main layout:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Livewire Form</title>
    @livewireStyles
</head>
<body>
    <livewire:user-form />

    @livewireScripts
</body>
</html>

Step 6: Run Your Laravel Application

Run the laravel application using the following command.