Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

mathewp's avatar

Livewire multiple select

Hi all, i am trying to create an admin panel with user, role and permission manager in livewire. In role management i want to use role as well as permission. I would like to use multiple select for this. How can I bind the permission in blade file using wire:model. Can anybody give an idea about this. What settings required in component and blade.. pls..

0 likes
12 replies
MarianoMoreyra's avatar

Hi @mathewp

If I understand correctly, you should have a public property at your component class set as an empty array:

public $multi = [];

Then at your blade you will have:

<select wire:model="multi" multiple>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>

In order to test it, you can add in the same blade, a span / div / p tag...whatever with the following inside:

<div>
    {{ implode(' - ', $multi) }}
</div>

Hopefully this is what you wanted!

1 like
musheabdulhakim's avatar

@MarianoMoreyra I am having a similar issue and your solution doesn't work for me. My form element is in a bootstrap modal. Is there anything I am doing wrong?.

Inside my livewire component Class:

public $team = [];

Inside my livewire blade file:

<div class="form-group">
<label class="col-form-label" for="teams">Add Team </label>
<select class="select form-control" wire:model="team" id="teams" multiple="">
<option value="1">Trafalgra Law</option>
<option value="2">Bertram Schamberger</option>
</select>
</div>

My form tag is like this:

<form wire:submit.prevent="store">
</form>

I have a store method that takes care of the validations and everything.

musheabdulhakim's avatar

@Snapey My array is not populated it only updates the values to the selected item instead of appending to the previously selected items.

Snapey's avatar

@musheabdulhakim better explained in your own question. Change multiple="" to just multiple

make sure you are using real IDs for the array keys and the option values.

In the component mount method, instantiate $team with the existing values.

mathewp's avatar

in component

public $permissions=[]; $this->permissions = Permission::all();

in blade

	  <select wire:model="permissions" name="p" id="p" class="p"   multiple>
                @foreach($permissions as  $perm)
                <option >{{ $perm->name }}</option>
                @endforeach
                     </select>

this is my code

in view it display the name of permissions in dropdown but when i click on the dropdown for selection it shows the error

Trying to get property 'name' of non-object

what is the proper method to define the wire:model for multiple select in blade...

MarianoMoreyra's avatar
MarianoMoreyra
5 years ago
Best Answer
Level 25

@mathewp where exactly did you put this code: $this->permissions = Permission::all(); ?

I believe that should go inside the render() method.

Also, you should have a separate variable where to save the selected options, different from the one holding all the permissions to list on the dropdown. That separate variable is the one that you should bind to the <select>.

So you'll have something like this.

Component:

public $selection=[];

public function render() {
     return view('your-view', [
          'permissions' => Permission::all(),
     ]);
}

blade:

<select wire:model="selection" name="p" id="p" class="p" multiple>
    @foreach($permissions as $perm)
        <option value={{$perm->id}}>{{ $perm->name }}</option>
    @endforeach
</select>

See that I've added a value to the <option> as that's what it will populate the $selection array. Change the ->id to whatever the ID of the Permissions is

3 likes
mathewp's avatar

thanks for the reply.

		<option value="$perm->id">{{ $perm->name }}</option>

should like

                   <option value={{$perm->id}}>{{ $perm->name }}</option>

then i will get the value id of selected item in $selection in component

one more doubt..

if i want to validate the values in $selection in component ie whether exists in permission table or not how can i do it in rules.. pls..

MarianoMoreyra's avatar

Exactly @mathewp, I missed the curly braces! I've already corrected my previous answer (writing all this on the fly)

Glad it worked! Please remember to mark my answer so others can find the solution!

I'll answer your question about validation in another reply (probably later today)

mathewp's avatar

if i want to validate the values in $selection in component ie whether exists in permission table or not how can i do it in rules.. pls..

MarianoMoreyra's avatar

@mathewp regarding validation...as it's a selection list, it shouldn't be easy to have values that are not in the permissions table.

Anyway, for this case or future ones, you could try adding your rules like this at your component class:

    protected $rules = [
        'p' => 'exists:permissions',
    ];

then at the method that will save the info (submit or whatever):

    public function submit()
    {
        $this->validate();

        // Execution doesn't reach here if validation fails.

        // Here you will have the code that persists your data
    }

Docs:

https://laravel-livewire.com/docs/2.x/input-validation https://laravel.com/docs/8.x/validation#rule-exists

sh6210's avatar

In my case i was needed to work with toggle multi select check box.

The idea is same as @marianomoreyra

toggle-multi-select-box

and the necessary code I've written like

code-sample-for-multi-select-box

1 like

Please or to participate in this conversation.