Select2: Select2 that speaks wire:model
Livewire Select2 turns any <select> in a Livewire component into a Select2 widget bound to a property in both directions. Rows added with wire:click, dependent dropdowns, nested components, and modals keep working without custom JavaScript.
Everything a Select2 field needs inside Livewire
One attribute on the select, one directive in the layout.
Two-way binding
User choices reach the property, and server-side changes reach the widget, with no echo requests.
Native wire:model
Use wire:model with its modifiers, and short attributes such as data-tags and data-clear.
Dynamic and dependent selects
New rows mount, removed ones clean up, and selects with new options from the server are rebuilt.
Right component, always
Each select binds to the component around it; data-component-id is optional.
Images and templates
data-image on an option for flags or avatars, or data-template with a function you name once.
No Node build
Loads with @livewireSelect2Scripts, or as an ES module for Vite and other bundlers.
A quick look
Mark the select and bind it; the widget follows the property both ways.
1<div wire:ignore>2 <select data-pharaonic="select2" wire:model="country"3 data-placeholder="Choose a country" data-clear>4 <option value=""></option>5 @foreach ($countries as $id => $name)6 <option value="{{ $id }}">{{ $name }}</option>7 @endforeach8 </select>9</div>Select2 Questions
Quick answers about installing and using Select2.
What is Select2?
Select2 for Livewire components, with two-way wire:model binding, dynamic and dependent selects, templates, and automatic cleanup. It's a free, open-source Livewire package by Pharaonic.
How do I install Select2?
Run composer require pharaonic/livewire-select2 in your project's root directory, then add @livewireSelect2Scripts to your layout.
What does Select2 require?
The latest release requires PHP 7.4+, Laravel 7 – 8 and Livewire 1. jQuery and Select2 are loaded by your application.
Which Livewire versions are supported?
Every Livewire major has its own line, and Composer installs the one that matches your Livewire version. See the compatibility section of the documentation.
How do I make one select depend on another?
Give the ignored block of the dependent select a wire:key that changes with the parent value, or leave it outside wire:ignore. The documentation shows both.
Does it work with Vite?
Yes. Set window.jQuery and attach Select2 to it in your bundle, or import the package's ES module. No global $ is needed.
Is Select2 free to use?
Yes. Select2 is open source under the MIT license, so you can use it in personal and commercial projects.
Where can I find the Select2 documentation?
Read the Select2 documentation for setup, binding, options, templates, and examples.
How do I report a bug or contribute to Select2?
Open an issue or a pull request on GitHub, or ask in the Pharaonic Discord.
Ready to dig in?
Read the full documentation for installation, binding, shorthand attributes and Select2 options, templates and callbacks, dynamic and dependent selects, and examples.