PHPackages                             mt1sk/livewire-multiselect - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. mt1sk/livewire-multiselect

ActiveLibrary[Utility & Helpers](/categories/utility)

mt1sk/livewire-multiselect
==========================

Livewire multiselect

v1.0.1(3y ago)24462[1 issues](https://github.com/mt1sk/livewire-multiselect/issues)proprietaryPHPPHP >=7.4

Since Apr 1Pushed 3y ago1 watchersCompare

[ Source](https://github.com/mt1sk/livewire-multiselect)[ Packagist](https://packagist.org/packages/mt1sk/livewire-multiselect)[ RSS](/packages/mt1sk-livewire-multiselect/feed)WikiDiscussions main Synced today

READMEChangelogDependencies (3)Versions (3)Used By (0)

Livewire multiselect component
==============================

[](#livewire-multiselect-component)

Requirements
------------

[](#requirements)

- [Tailwind](https://tailwindcss.com/)
- [Alpine JS](https://github.com/alpinejs/alpine)
- @stack('scripts') in layout blade

Installation
------------

[](#installation)

You can install the package via composer:

```
composer require mt1sk/livewire-multiselect
```

Usage
-----

[](#usage)

### 1) Add `LivewireMultiselect\HasSelect` trait to your component

[](#1-add-livewiremultiselecthasselect-trait-to-your-component)

```
class Index extends Component
{
    use LivewireMultiselect\HasSelect;
```

### 2) Add select listener to your component

[](#2-add-select-listener-to-your-component)

```
protected $listeners = ['select'];
```

### 3) Add variables for an available options and a selected ones to your component

[](#3-add-variables-for-an-available-options-and-a-selected-ones-to-your-component)

```
// for selected options - multiple
public ?array $teamFilter = null;
// for selected option - single
public int|string|null $teamFilter = null;

// available options
public ?Collection $teams = null;
```

### 4) Add the select to your page

[](#4-add-the-select-to-your-page)

```

```

### Events

[](#events)

Multiselect component emits a `select` event, which is caught by `HasSelect` trait and sets values to a proper variables in your component.
This trait also calls `selected` function on your component, if it exists, and passes a select name and selected items. You can define a `selected` method in your component to react on the changes:
**Works only if `:simpleForm="false"`**

#### multiselect

[](#multiselect)

```
public function selected(string $name, array $value)
{
    if ($name === 'teamFilter') {
        // do something
    }
}
```

#### select

[](#select)

```
public function selected(string $name, int|string|null $value)
```

### Props

[](#props)

PropertyArgumentsDefaultExample**trackBy***<String>* - Used to compare objects.id`trackBy="id"`**label***<String>* - Object property in option, that will be visible in the dropdown.name`label="name"`**name***<String>* - Used to name inputs & identify multiple selects on a page.
**Must be the same as a variable name in your component which accepts selected items**
*required*`name="teamFilter"`**options***<Illuminate\\Support\\Collection>* - Available options.*required*`:options="$teams"`**selected***<Array,Integer,String>* - Used to define selected options on a page loading.
**Variable name should be the same as a `name` prop value.**`null``:selected="$teamFilter"`**title***<String>* - Label title for the select on a page.`null``title="Teams"`**multiselect***<Boolean>* - Determines if the select is multiple.`false``:multiselect="true"`**showEmptyOption***<Boolean>* - Determines if an empty option displays on the select.
**Works only for single selects (`:multiselect="false"`)**`true``:showEmptyOption="false"`**simpleForm***<Boolean>* - Determines if a html input should be added to a page.
Useful when a select is placed outside a livewire component, like a html form which makes a regular http request.`false``:simpleForm="true"`**parentId***<String>* - Determines which component a select belongs to.
**Highly recommended to define it when you have more then one level component depth, with the same selects name on each level.**`null``parentId="{{ $this->id }}"`**styles***<String>* - Classes of the root select wrapper.col-span-1`styles="w-full"`---

### Additional functionality

[](#additional-functionality)

You can refresh selected items by calling in your component

```
// reset component variables
$this->reset('teamFilter');
$this->anotherFilter = [2,3];
// reset options on all component selects
$this->emitTo('multiselect', 'refresh', $this);

// you can also do something like this,
// BUT ALL NOT PASSED SELECTS, WITHIN THE COMPONENT, WILL BE RESET TO EMPTY.
$this->emitTo('multiselect', 'refresh', ['id' => $this->id, 'teamFilter' => [2]]);
```

You can also refresh available options

```
$teams = $this->teams->take(3);
// $teams - available options
// 'teamFilter' - select name
// $this->id - component id(parentId)
$this->emitTo('multiselect', 'refreshOptions', $teams, 'teamFilter', $this->id);
```

### Customizing

[](#customizing)

You can customize a select look by publishing its view

```
php artisan vendor:publish --tag=multiselect:views
```

License
-------

[](#license)

The MIT License (MIT). Please see [License File](LICENSE.md) for more information.

###  Health Score

24

—

LowBetter than 32% of packages

Maintenance10

Infrequent updates — may be unmaintained

Popularity17

Limited adoption so far

Community9

Small or concentrated contributor base

Maturity49

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~157 days

Total

2

Last Release

1343d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/8b74d564497cca43482cb4c4837e01f444db2607b35f3cf5178df319ef64a4db?d=identicon)[mt1sk](/maintainers/mt1sk)

---

Top Contributors

[![mt1sk](https://avatars.githubusercontent.com/u/14818961?v=4)](https://github.com/mt1sk "mt1sk (2 commits)")

### Embed Badge

![Health badge](/badges/mt1sk-livewire-multiselect/health.svg)

```
[![Health](https://phpackages.com/badges/mt1sk-livewire-multiselect/health.svg)](https://phpackages.com/packages/mt1sk-livewire-multiselect)
```

###  Alternatives

[barryvdh/laravel-ide-helper

Laravel IDE Helper, generates correct PHPDocs for all Facade classes, to improve auto-completion.

14.9k123.0M683](/packages/barryvdh-laravel-ide-helper)[orchestra/canvas

Code Generators for Laravel Applications and Packages

21017.2M157](/packages/orchestra-canvas)[spatie/laravel-livewire-wizard

Build wizards using Livewire

4061.0M4](/packages/spatie-laravel-livewire-wizard)[kirschbaum-development/commentions

A package to allow you to create comments, tag users and more

12369.2k](/packages/kirschbaum-development-commentions)[glhd/special

1929.4k](/packages/glhd-special)[bjuppa/laravel-blog

Add blog functionality to your Laravel project

483.3k1](/packages/bjuppa-laravel-blog)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)