Livewire Async Select
A powerful async select component for Laravel Livewire with Alpine.js
🚀 Asynchronous Loading
Load options dynamically from API endpoints with built-in search and filtering capabilities.
🎯 Multiple Selection
Support for both single and multiple selection modes with beautiful chip/tag display.
⚡ Alpine.js Powered
Lightweight and reactive with Alpine.js integration. No jQuery dependency required.
🎨 Theme Support
Built-in support for Tailwind CSS and Bootstrap. Fully customizable styling.
🎭 Custom Slots
Customize option and selected item rendering with powerful Blade slot support.
📦 Easy Integration
Simple Livewire component integration with two-way binding and Laravel ecosystem.
🎥 Demo Video
Quick Start
Install via Composer:
composer require drpshtiwan/livewire-async-select
Use in your Blade views:
<livewire:async-select
name="user_id"
wire:model="selectedUser"
:options="$users"
placeholder="Select a user..."
/>
Why Livewire Async Select?
Traditional select libraries like Select2 rely on jQuery and can be heavy and difficult to integrate with modern reactive frameworks. This package provides a native Livewire solution that:
- ✅ Works seamlessly with Livewire's reactive components
- ✅ Uses Alpine.js for lightweight interactivity
- ✅ Eliminates jQuery dependency
- ✅ Provides better integration with Laravel's ecosystem
- ✅ Offers cleaner, more maintainable code
Features at a Glance
| Feature | Livewire Async Select | Select2 |
|---|---|---|
| jQuery Dependency | ❌ No | ✅ Yes |
| Livewire Integration | ✅ Native | ⚠️ Requires workarounds |
| Bundle Size | 🟢 Small (~10KB) | 🟡 Large (~60KB+) |
| Alpine.js | ✅ Yes | ❌ No |
| Modern Stack | ✅ Yes | ❌ Legacy |
| Two-way Binding | ✅ Native | ⚠️ Manual |
| Laravel Integration | ✅ First-class | 🟡 Generic |
| Collection Support | ✅ Yes | ❌ No |
| Built-in Validation | ✅ Yes | ⚠️ Manual |