Livewire Async Select
Livewire Async Select stats
- Downloads
- 1
- Stars
- 1
- Open Issues
- 0
- Forks
- 0
A powerful async select component for Laravel Livewire with Alpine.js - a modern alternative to Select2
Livewire Async Select
A powerful async select component for Laravel Livewire with Alpine.js - a modern, lightweight alternative to Select2.
🎥 Demo
✨ Features
- 🚀 Asynchronous Loading - Load options dynamically from API endpoints
- 🔍 Search & Filter - Built-in search with debouncing
- 🎯 Multiple Selection - Beautiful chip/tag display
- ⚡ Alpine.js Powered - Lightweight, no jQuery dependency
- 🎨 Styled with Tailwind CSS - Pre-built styles with
las-prefix - 🎭 Custom Slots - Fully customizable rendering
- 📦 Easy Integration - Native Livewire component
- 🔄 Two-way Binding - Full wire:model support
- 🔒 No Style Conflicts - All classes prefixed with
las-
📚 Documentation
Complete guides, examples, and API reference available at:
https://livewire-select.thejano.com/
To build and view the documentation locally, see DOCS.md.
⚡ Quick Install
- Install via Composer:
composer require drpshtiwan/livewire-async-select
- Publish the CSS assets:
php artisan vendor:publish --tag=async-select-assets
- Setup your layout (important!):
<head> @asyncSelectStyles @livewireStyles</head><body> {{ $slot }} @livewireScripts @stack('scripts') {{-- Required! --}}</body>
⚠️ Important: The
@stack('scripts')directive is required for the component to work properly.
🎯 Basic Usage
<livewire:async-select name="user_id" wire:model="selectedUser" endpoint="/api/users/search" placeholder="Search users..."/>
📋 Requirements
- PHP 8.1+
- Laravel 10.x, 11.x, or 12.x
- Livewire 3.3+
🆚 Why This Package?
| Feature | Livewire Async Select | Select2 |
|---|---|---|
| jQuery Dependency | ❌ No | ✅ Yes |
| Livewire Integration | ✅ Native | ⚠️ Manual |
| Bundle Size | 🟢 Small | 🟡 Large |
| Modern Stack | ✅ Yes | ❌ Legacy |
🤝 Contributing
Contributions are welcome! Please see the documentation for details.
📄 License
The MIT License (MIT). Please see License File for more information.
