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(2mo ago)0861MITBlade Since Aug 19Pushed 2mo 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 1mo ago READMEChangelogDependencies (1)Versions (8)Used By (1) 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 & 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 & 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 38 — LowBetter than 85% of packages Maintenance86 Actively maintained with recent releases Popularity12 Limited adoption so far Community8 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 69d 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.7k12.1M99](/packages/laravel-pulse)[power-components/livewire-powergrid PowerGrid generates Advanced Datatables using Laravel Livewire. 1.7k1.7M6](/packages/power-components-livewire-powergrid)[livewire/flux The official UI component library for Livewire. 9385.0M85](/packages/livewire-flux)[livewire/volt An elegantly crafted functional API for Laravel Livewire. 4195.3M84](/packages/livewire-volt)[jantinnerezo/livewire-alert This package provides a simple alert utilities for your livewire components. 8041.2M20](/packages/jantinnerezo-livewire-alert)[leandrocfe/filament-apex-charts Apex Charts integration for Filament PHP. 4861.2M8](/packages/leandrocfe-filament-apex-charts) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)