Weave Code
Weaver
Helps Laravel developers discover, compare, and choose open-source packages. See popularity, security, maintainers, and scores at a glance to make better decisions.
Feedback
Share your thoughts, report bugs, or suggest improvements.
Subject
Message
Livewire Async Select

Livewire Async Select Laravel Package

drpshtiwan/livewire-async-select

A lightweight async select component for Laravel Livewire and Alpine.js, offering a modern Select2 alternative with dynamic option loading, debounced search, multi-select chips, Tailwind styling, custom slots, and full wire:model binding.

View on GitHub
Deep Wiki
Context7

Livewire Async Select is a powerful async select component for Laravel Livewire and Alpine.js — a modern, lightweight alternative to Select2. It loads options dynamically from API endpoints, supports search with debouncing, multiple selection with chip display, and full wire:model binding. Styled with Tailwind CSS using a las- prefix to avoid style conflicts, with custom slots for full rendering control.

  • 🚀 Async loading from API endpoints
  • 🔍 Search & filter with debouncing
  • 🎯 Multiple selection with chips/tags
  • 🔐 Auth support — custom headers and signed internal tokens
  • 🎭 Custom slots for flexible rendering

Install via Composer and publish the CSS assets to get started.

Frequently asked questions about Livewire Async Select
What Laravel and Livewire versions does this package support?
The package requires Livewire 3.3+ or 4.x and is fully compatible with Laravel 9.x and 10.x. Check the [documentation](https://livewire-select.thejano.com/) for specific version notes, as Livewire 4.x introduced slot rendering changes that were addressed in recent updates.
How do I integrate this with an existing Laravel API endpoint?
The component expects JSON responses in the format `{ "data": [...] }` with optional `pagination` metadata. Use Laravel’s API resources or Eloquent queries to return data, and ensure your endpoint supports the required HTTP methods (GET for search, POST for selection). Authentication is handled via async-auth middleware.
Can I use this without Tailwind CSS or Bootstrap?
Yes, the package includes prefixed classes (`las-*`) for easy customization. You can override the default styles by targeting these classes in your global CSS. The documentation provides examples for custom styling, including disabling Tailwind/Bootstrap entirely.
Does this work with Sanctum or Passport for API authentication?
Yes, the package supports Sanctum and Passport out of the box. Use the `auth` property to pass your auth token or configure the `async-auth` middleware in your Livewire component to include the `Authorization` header automatically.
How do I handle large datasets efficiently?
For large datasets, enable debouncing (default: 300ms) and implement server-side pagination in your API endpoint. The component supports pagination metadata in the response, and you can customize the debounce delay via the `debounce` property.
Is there a way to customize the dropdown template beyond the default slots?
Yes, the component leverages Livewire’s slot system for full customization. You can override the `options`, `selected`, and `empty` slots in your Blade template. For advanced use cases, refer to the [documentation](https://livewire-select.thejano.com/) for slot examples and Livewire 4.x compatibility notes.
Will this conflict with other Alpine.js scripts in my project?
Conflicts are rare but possible if other Alpine.js scripts modify global state or event listeners. The package isolates its Alpine.js functionality, but ensure your project’s Alpine.js version (v3.x) matches the package’s requirements. Test thoroughly in a staging environment if using multiple Alpine.js-powered components.
How do I test this component in my Laravel application?
The package includes feature tests for async loading, selection validation, and slot rendering. For your application, use Laravel’s Livewire testing helpers (`Livewire::test()`) to simulate user interactions. Mock API responses with Laravel’s HTTP test helpers to avoid external dependencies.
What are the alternatives to this package for async selects in Livewire?
Alternatives include `alpinejs-select` (pure Alpine.js, no Livewire), `livewire-select` (older package with jQuery dependencies), or custom solutions using Livewire’s native features. This package stands out for its seamless Livewire integration, Alpine.js power, and Tailwind CSS support without jQuery bloat.
How do I upgrade this package if Livewire or Laravel versions change?
Monitor the package’s [release notes](https://github.com/drpshtiwan/livewire-async-select/releases) for breaking changes, especially around Livewire 4.x slot rendering. Use Composer’s `update` command and test thoroughly in a staging environment. The package’s MIT license allows forks if maintenance lags.
Weaver

How can I help you explore Laravel packages today?

Conversation history is not saved when not logged in.
Prompt
Add packages to context
No packages found.
mehedimi/laravel-amp-mail
happones/laravel-vue-i18n-generator
jwerd/inertia-table
siberfx/flysystem-wasabi
hollyit/token-replace
ippanelcom/laravel-sdk
adachsoft/changelog-linter
adachsoft/collection
payerurl/telegrambot-crypto-payment-instant-payout
dskripchenko/laravel-hybrid-search
riorizkyrainey/lara-ced
mehedimi/static-vel
zharp/zharp
nonsapiens/bigquery-model-sync
lgu-bayambang-ict-office/lgu-laravel-development-standards
andydefer/laravel-support
se7enxweb/flysystem
lampwick/laravel
jeslage/statamic-emojis
micahdshackelford/rmap-laravel