Select2 for Livewire components.

Two-way wire:model binding, dynamic and dependent selects, and templates, built on Livewire Assistant.

Installation

composer require pharaonic/livewire-select2

Load jQuery and Select2 as usual, then add the scripts once in your layout, before or after @livewireScripts:

@livewireScripts
@livewireSelect2Scripts

No Node build is needed. The 4.x line supports Livewire 4.3.4+ on Laravel 10.16+, 11, 12, and 13 with PHP 8.1 to 8.5.

Coming from 1.2? Run composer require pharaonic/livewire-select2:^4.0. Your markup keeps working; the documentation lists what changed.

Usage

<div wire:ignore>
    <select data-pharaonic="select2" wire:model.live="country" data-placeholder="Choose a country" data-clear>
        <option value=""></option>
        <option value="1">Egypt</option>
        <option value="2">Jordan</option>
    </select>
</div>

The select follows country both ways: picking an option updates the component, and setting the property on the server updates the widget. Shorthands such as data-tags, data-clear, data-search-off, and data-parent cover common options; data-options takes any other Select2 option as JSON.

Documentation

Read the full Livewire Select2 documentation for options, dependent selects, templates, bundlers such as Vite, and upgrading from 1.2.

Support & Security

See SUPPORT.md and SECURITY.md.

License

MIT. See LICENSE.