drpshtiwan/livewire-async-select

A powerful async select component for Laravel Livewire with Alpine.js - a modern alternative to Select2

3,769 107

laravel select autocomplete select2 dropdown alpine livewire alpinejs async-select ajax-select

Install
`composer require drpshtiwan/livewire-async-select`
Latest Version:	3.2.0
PHP:	>=8.1

Maintainer: drpshtiwan

Livewire Async Select

A powerful async select component for Laravel Livewire with Alpine.js - a modern, lightweight alternative to Select2.

🎥 Demo

▶️ Watch Full Demo on YouTube

✨ 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-
🔐 Authentication Support - Custom headers and internal authentication
🛡️ Secure Internal Auth - Signed tokens with replay protection

📚 Documentation

📖 Full 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
    {{-- Optional: only if using Bootstrap 4 theme styling --}}
    {{-- @asyncSelectBootstrapV4Styles --}}
    @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..."
/>

Custom Slots (Livewire 3.3+ / 4.x)

<livewire:async-select :options="$users" wire:model="selectedUser">
    <livewire:slot name="slot">
        <div>{{ $option['label'] }}</div>
    </livewire:slot>

    <livewire:slot name="selectedSlot">
        <strong>{{ $option['label'] }}</strong>
    </livewire:slot>
</livewire:async-select>

Slot variables are provided automatically:

option slot: $option, $isSelected, $isDisabled, $multiple
selected slot: $option

API Route with async-auth middleware:

// Default guard (web)
Route::middleware(['async-auth'])->get('/api/users/search', function (Request $request) {
    $users = User::where('name', 'like', "%{$request->get('search')}%")
        ->limit(20)
        ->get();
    
    return response()->json(['data' => $users]);
});

// With Sanctum
Route::middleware(['async-auth:sanctum'])->get('/api/users/search', function (Request $request) {
    // Works with Sanctum tokens or internal auth
    $users = User::where('name', 'like', "%{$request->get('search')}%")
        ->limit(20)
        ->get();
    
    return response()->json(['data' => $users]);
});

// With web guard and session persistence
Route::middleware(['web', 'async-auth:web,persist'])->get('/api/users/search', function (Request $request) {
    // Persists login in session
    $users = User::where('name', 'like', "%{$request->get('search')}%")
        ->limit(20)
        ->get();
    
    return response()->json(['data' => $users]);
});

The async-auth middleware is automatically registered and works exactly like auth middleware, but also handles internal authentication automatically when the X-Internal-User header is present. Supports all guards: async-auth:web, async-auth:sanctum, async-auth:api, etc.

→ View full documentation

📋 Requirements

PHP 8.1+
Laravel 10.x, 11.x, or 12.x
Livewire 3.3+ or 4.x

🆚 Why This Package?

Feature	Livewire Async Select	Select2
jQuery Dependency	❌ No	✅ Yes
Livewire Integration	✅ Native	⚠️ Manual
Bundle Size	🟢 Small	🟡 Large
Modern Stack	✅ Yes	❌ Legacy