DEV Community

waziri ally amiri
waziri ally amiri

Posted on

How to use multiple checkboxes in Livewire3

Livewire is a powerful framework for building dynamic web applications. One of its features is the ability to easily bind checkboxes to Livewire properties. This allows you to create multiple checkbox inputs that are all bound to the same Livewire property, and the value of the property will be updated whenever any of the checkboxes are checked or unchecked.

To use multiple checkboxes in Livewire version three, you can use the following steps:

Create a public property in your Livewire component to store the values of the checkboxes. For example:

public $classes = [];
Enter fullscreen mode Exit fullscreen mode

In your Blade view, loop through the checkbox options and generate a checkbox input for each option. Be sure to set the wire:model attribute of the checkbox inputs to the name of your Livewire property. For example:

@foreach ($classes as $c )
    <x-tall-crud-checkbox class="ml-2" wire:model="classes" value="{{$c->id}}" /> {{$c->name}}
@endforeach
Enter fullscreen mode Exit fullscreen mode

the value of public $class propery now will be the array contain array of class ids that user checked like this

$class=[
0 => 1
1 => 2
]

so you can now do whatever you want with those array in your component.

Happy Coding!


About the Author
Hi there, I'm a Full Stack Developer based in Tanzania with a passion for Laravel, Livewire, VueJs, TailwandCss, and web development. As a freelancer, I'm always ready to take on exciting projects and collaborate on remote work related to Laravel.

If you're looking for a dedicated Laravel developer who can help you bring your web application to life or enhance your existing Laravel project, feel free to reach out to me. I'm eager to work with you to create robust and innovative solutions for your business needs.

You can contact me at [wazirially1994@gmail.com] or connect with me at [https://github.com/WAZIRI123] and WhatsApp via:[+255653039317].

Let's turn your Laravel project into a success story together!

Top comments (0)