PHPackages                             uluumbch/alpine-select-livewire - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. uluumbch/alpine-select-livewire

ActiveLibrary[Utility & Helpers](/categories/utility)

uluumbch/alpine-select-livewire
===============================

Powerful searchable select components with multi-select and drag-ordering support for Laravel Livewire & Alpine.js

v1.1.0(5mo ago)02MITBladePHP ^8.2

Since Nov 30Pushed 5mo agoCompare

[ Source](https://github.com/uluumbch/alpine-select-livewire)[ Packagist](https://packagist.org/packages/uluumbch/alpine-select-livewire)[ RSS](/packages/uluumbch-alpine-select-livewire/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (2)Dependencies (3)Versions (4)Used By (0)

Alpine Select Livewire
======================

[](#alpine-select-livewire)

Powerful searchable select components with multi-select and drag-ordering support for Laravel Livewire & Alpine.js.

Features
--------

[](#features)

- **Single & Multi-select variants** - Choose between single selection or multiple selections with chips
- **Searchable/filterable options** - Built-in search functionality for large option lists
- **Drag & drop reordering** - Reorder selected items in multi-select mode
- **Dark mode support** - Full support for dark mode styling
- **Full Livewire integration** - Seamless wire:model binding with defer support
- **Zero JavaScript compilation** - Uses Livewire's bundled Alpine.js
- **TailwindCSS styled** - Fully customizable with TailwindCSS
- **Flexible options format** - Supports arrays, objects, or mixed formats

Requirements
------------

[](#requirements)

- PHP ^8.2
- Laravel ^11.0 or ^12.0
- Livewire ^3.0
- TailwindCSS ^3.0 or ^4.0

Installation
------------

[](#installation)

### Step 1: Install via Composer

[](#step-1-install-via-composer)

```
composer require uluumbch/alpine-select-livewire
```

### Step 2: Configure TailwindCSS

[](#step-2-configure-tailwindcss)

Add the package views to your TailwindCSS content configuration.

**For TailwindCSS v3** (tailwind.config.js):

```
export default {
  content: [
    './resources/**/*.blade.php',
    './vendor/uluumbch/alpine-select-livewire/resources/**/*.blade.php',
  ],
  // ... rest of config
}
```

**For TailwindCSS v4** (resources/css/app.css):

```
@import 'tailwindcss';

@source '../views';
@source '../../vendor/uluumbch/alpine-select-livewire/resources';
```

### Step 3: Rebuild Assets

[](#step-3-rebuild-assets)

```
npm run build
```

The service provider will be automatically registered via Laravel's package discovery.

Usage
-----

[](#usage)

### Single Select

[](#single-select)

Basic single-select dropdown:

```

```

With object options (value/label):

```

```

### Multi Select

[](#multi-select)

Basic multi-select with chips:

```

```

With drag-and-drop ordering:

```

```

Component API
-------------

[](#component-api)

### Single Select (``)

[](#single-select-x-alpine-selectdefault)

PropTypeDefaultDescription`options`array`[]`Array of options (strings or objects)`placeholder`string`'Pilih opsi...'`Placeholder text when no selection`no_results_text`string`'Tidak ada hasil'`Text shown when search returns no results`searchable`boolean`false`Enable search functionality`clearable`boolean`false`Show clear button to reset selection`disabled`boolean`false`Disable the select input`floating`boolean`true`Use floating dropdown (false for inline)`selected`string/int`null`Initial selected value`class`string`''`Additional CSS classes for trigger### Multi Select (``)

[](#multi-select-x-alpine-selectmultiple)

PropTypeDefaultDescription`options`array`[]`Array of options (strings or objects)`placeholder`string`'Pilih opsi...'`Placeholder text when no selection`no_results_text`string`'Tidak ada hasil'`Text shown when search returns no results`searchable`boolean`false`Enable search functionality`clearable`boolean`false`Show clear button to reset all selections`disabled`boolean`false`Disable the select input`floating`boolean`true`Use floating dropdown (false for inline)`selected`array`[]`Initial selected values (array of IDs)`orderable`boolean`false`Enable drag-and-drop reordering of chips`select_all_text`string`'Pilih Semua'`Text for "Select All" button`clear_all_text`string`'Hapus Semua'`Text for "Clear All" button`class`string`''`Additional CSS classes for triggerOptions Format
--------------

[](#options-format)

The package intelligently normalizes options into a consistent format. You can pass options in various formats:

### Simple Array

[](#simple-array)

```
$options = ['Option 1', 'Option 2', 'Option 3'];
```

### Value/Label Objects

[](#valuelabel-objects)

```
$options = [
    ['value' => 1, 'label' => 'First Option'],
    ['value' => 2, 'label' => 'Second Option'],
];
```

### Alternative Object Keys

[](#alternative-object-keys)

The package also recognizes these alternative keys:

- `id`, `key` (as value)
- `nama`, `text` (as label)

```
$options = [
    ['id' => 1, 'nama' => 'Jakarta'],
    ['id' => 2, 'nama' => 'Surabaya'],
];
```

Livewire Integration
--------------------

[](#livewire-integration)

### Wire Model Binding

[](#wire-model-binding)

The component supports all Livewire wire:model modifiers:

```
{{-- Immediate sync --}}

{{-- Lazy sync (on blur/change) --}}

{{-- Deferred sync (on form submit) --}}

```

### Custom Events

[](#custom-events)

Listen to the `model-updated` event for custom handling:

```

```

### Dynamic Options

[](#dynamic-options)

Update options dynamically from your Livewire component:

```
class MyComponent extends Component
{
    public $selectedCity;
    public $cities = [];

    public function mount()
    {
        $this->cities = City::pluck('name', 'id')->toArray();
    }

    public function render()
    {
        return view('livewire.my-component');
    }
}
```

```

```

Publishing Assets
-----------------

[](#publishing-assets)

### Publish Configuration

[](#publish-configuration)

```
php artisan vendor:publish --tag=alpine-select-config
```

This publishes `config/alpine-select.php` for custom configuration.

### Publish Views

[](#publish-views)

```
php artisan vendor:publish --tag=alpine-select-views
```

This publishes views to `resources/views/vendor/alpine-select` for customization.

### Publish Translations

[](#publish-translations)

```
php artisan vendor:publish --tag=alpine-select-lang
```

This publishes language files to `lang/vendor/alpine-select` for translation.

### Publish All

[](#publish-all)

```
php artisan vendor:publish --provider="Uluumbch\AlpineSelectLivewire\AlpineSelectLivewireServiceProvider"
```

Translations
------------

[](#translations)

The package supports multiple languages. Default texts are in English.

### Available Translation Keys

[](#available-translation-keys)

- `placeholder` - "Select an option..."
- `no_results` - "No results found"
- `search_placeholder` - "Search..."
- `select_all` - "Select All"
- `clear_all` - "Clear All"

### Creating Custom Translations

[](#creating-custom-translations)

1. Publish the language files:

```
php artisan vendor:publish --tag=alpine-select-lang
```

2. Create your language file (e.g., `lang/vendor/alpine-select/id/alpine-select.php`):

```