Other Form Fields: Radio and Checkbox

In this lesson, let's see how easy it is to work with other form fields.

radio and checkbox inputs

Prepare DB

We need to prepare the DB quickly before adding other fields to the form.

dabatase/migrations/xxxx_add_radio_and_checkbox_select_to_products_table.php:

Schema::table('products', function (Blueprint $table) {
    $table->string('color');
    $table->boolean('in_stock')->default(true);
});

app/Models/Product.php:

class Product extends Model
{
    protected $fillable = [
        'name',
        'description',
        'category_id',
        'color', 
        'in_stock', 
    ];
 
    const COLOR_LIST = [ 
        'red' => 'Red',
        'green' => 'Green',
        'blue' => 'Blue',
    ]; 
 
    // ...
}

We will use COLOR_LIST cons to quickly show colors in the form.

Add Fields to Livewire Form

Now let's show fields.

resources/views/livewire/products-create.blade.php:

<form method="POST" wire:submit="save">
    // ...
 
    <div class="mt-4"> 
        <label for="color">Color</label>
        @foreach(\App\Models\Product::COLOR_LIST as $key => $value)
            <div><input type="radio" wire:model="form.color" id="color" value="{{ $key }}" />{{ $value }}</div>
        @endforeach
        @error('form.color')
            <span class="mt-2 text-sm text-red-600">{{ $message }}</span>
        @enderror
    </div>
 
    <div class="mt-4">
        <label for="in_stock">In stock</label>
        <div><input type="checkbox" wire:model="form.in_stock" id="in_stock" value="1" />In stock</div>
        @error('form.in_stock')
            <span class="mt-2 text-sm text-red-600">{{ $message }}</span>
        @enderror
    </div> 
 
    <button class="mt-4 px-4 py-2 bg-gray-800 rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700">
        Save Product
    </button>
</form>

radio and checkbox inputs

So now, let's make them work. Because we are using Form Object, the only file we need to add some logic is there.

app/Livewire/Forms/ProductsForm.php:

class ProductsForm extends Form
{
    public ?Product $product;
    #[Validate('required|min:3')]
    public string $name = '';
    #[Validate('required|min:3')]
    public string $description = '';
    #[Validate('required|exists:categories,id', as: 'category')]
    public int $category_id = 0;
    #[Validate('required|string')] 
    public string $color = '';
    #[Validate('boolean')]
    public bool $in_stock = true; 
 
    public function setProduct(Product $product): void
    {
        $this->product = $product;
        $this->name = $product->name;
        $this->description = $product->description;
        $this->category_id = $product->category_id;
        $this->color = $product->color; 
        $this->in_stock = $product->in_stock; 
    }
 
    // ...
}

And that's it. That's how easy it was. It works now in both create and edit pages.

Edit Product Form: Reusable Form Object? Multi-Select and belongsToMany Relationship

Course Content

Livewire 3 From Scratch: Practical Course

Other Form Fields: Radio and Checkbox

Prepare DB

Add Fields to Livewire Form

Course Content

Introduction: Syntax and Main Structure

Multiple Components and Page Structure

Larger Practical Example: CRUD with Livewire

Smaller Practical Examples

Other Quick Topics