PHPackages                             lara-pack/livewire-select2 - 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. lara-pack/livewire-select2

ActiveLibrary

lara-pack/livewire-select2
==========================

Livewire Component : Select2

v1.0.6(2w ago)086MITBlade

Since Aug 19Pushed 2w agoCompare

[ Source](https://github.com/bhagaskara/lara-pack-livewire-select2)[ Packagist](https://packagist.org/packages/lara-pack/livewire-select2)[ RSS](/packages/lara-pack-livewire-select2/feed)WikiDiscussions main Synced today

READMEChangelogDependencies (1)Versions (8)Used By (0)

Livewire Select2 Component
==========================

[](#livewire-select2-component)

A custom Livewire V3/V4 component wrapper for **Select2**. This component simplifies the usage of Select2 in your Livewire projects, supporting both static options arrays and AJAX-based remote data loading, along with multiple selections capabilities.

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

[](#requirements)

- PHP 8.1+
- Laravel 10+ / 11+
- Livewire ^3.0|^4.0
- jQuery
- Select2 (JS &amp; CSS)

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

[](#installation)

You can install the package via composer:

```
composer require lara-pack/livewire-select2
```

> **Note:** Ensure you have already included jQuery and Select2 assets in your layout file/app.

Usage
-----

[](#usage)

You can use the component in your Livewire blade views using the `` tag.

### 1. Basic Usage (Static Options)

[](#1-basic-usage-static-options)

Provide an array of arrays containing `id` and `text` keys.

```

```

### 2. AJAX Remote Data (Load from API / URL)

[](#2-ajax-remote-data-load-from-api--url)

Instead of passing static options, you can provide an endpoint URL. The component will handle the AJAX calls and debounce internally.

The API should return an array of objects structured as `[{ "id": 1, "text": "Option 1" }, ...]`.

```

```

### 3. Multiple Selections

[](#3-multiple-selections)

Enable multiple selection mode by passing `:multiple="true"`.

```

```

### 4. Custom "Select All Filtered" for Multiple AJAX

[](#4-custom-select-all-filtered-for-multiple-ajax)

This component comes with a special feature for AJAX Multiple Select. If you pass `:multipleSelection="true"`, an extra option *"--- Pilih Semua Yang Tampil ---"* will appear at the top. Selecting it will fetch and select all data matching the search term.

```

```

Available Properties
--------------------

[](#available-properties)

PropertyTypeDefaultDescription`wire:model``string``null`Bind the selected value. Must be `{ "id": ..., "text": ... }` for single select, or an array of objects for multiple.`options``array``[]`Static array of options: `[['id'=>1, 'text'=>'Opt']]`.`url``string``""`The API Endpoint for AJAX data loading.`minimumInputLength``int``0`Number of characters required to trigger the search.`placeholder``string``""`Placeholder text for the input.`allowClear``bool``true`Show a clear button (X) to reset the value.`dropdownParent``string``""`Appends the dropdown to a specific element. Very useful inside Bootstrap Modals (e.g., `'#myModal'`).`debounceTime``int``500`Delay in milliseconds before firing the AJAX request.`class``string``''`Extra CSS classes injected directly to the `` element.`theme``string``''`Select2 theme (e.g., `'bootstrap-5'`).`multiple``bool``false`Set to true to allow arrays of selections.`multipleSelection``bool``false`When true in AJAX `multiple` mode, allows selecting all loaded search results at once.`disabled``bool``false`Disables the Select2 input entirely.Data Binding &amp; Format
-------------------------

[](#data-binding--format)

Because Livewire components pass data over the wire, **the bound value representation is always an object or an array of objects**, representing the selected `id` and `text`.

For single selection:

```
// In your Livewire Component Controller
public $selectedCity = ['id' => '1', 'text' => 'Jakarta'];
```

For multiple selections:

```
// In your Livewire Component Controller
public $selectedTags = [
    ['id' => '1', 'text' => 'PHP'],
    ['id' => '2', 'text' => 'Laravel']
];
```

Troubleshooting: Modals
-----------------------

[](#troubleshooting-modals)

If your Select2 input isn't clickable or doesn't show properly inside a Bootstrap Modal, you need to set the `dropdownParent` property to target your modal element.

```

```

License
-------

[](#license)

This package is distributed under the [MIT license](LICENSE).

###  Health Score

41

—

FairBetter than 89% of packages

Maintenance96

Actively maintained with recent releases

Popularity12

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity40

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 ~32 days

Recently: every ~43 days

Total

7

Last Release

20d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/63814bcebe20646b82976951817f1210b6c06138037b49772b844af9a876116c?d=identicon)[bhagaskara](/maintainers/bhagaskara)

---

Top Contributors

[![bhagaskara](https://avatars.githubusercontent.com/u/24548806?v=4)](https://github.com/bhagaskara "bhagaskara (10 commits)")

### Embed Badge

![Health badge](/badges/lara-pack-livewire-select2/health.svg)

```
[![Health](https://phpackages.com/badges/lara-pack-livewire-select2/health.svg)](https://phpackages.com/packages/lara-pack-livewire-select2)
```

###  Alternatives

[laravel/pulse

Laravel Pulse is a real-time application performance monitoring tool and dashboard for your Laravel application.

1.7k11.3M80](/packages/laravel-pulse)[livewire/flux

The official UI component library for Livewire.

9194.2M68](/packages/livewire-flux)[livewire/volt

An elegantly crafted functional API for Laravel Livewire.

4184.9M67](/packages/livewire-volt)[filament/support

Core helper methods and foundation code for all Filament packages.

2322.0M123](/packages/filament-support)

PHPackages © 2026

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