elcheco/sortable-pillbox

A searchable pillbox Livewire component with drag-and-drop sortable pills

dev-main 2026-04-03 18:08 UTC

Requires

• php: ^8.3
• illuminate/support: ^12.0 || ^13.0
• livewire/livewire: ^4.0

MIT

• Miroslav Koula

README

A Laravel Livewire component that provides a searchable pillbox UI with drag-and-drop sortable pills, powered by SortableJS.

Requirements

• PHP 8.3+
• Laravel 12 or 13
• Livewire 4+
• Tailwind CSS (for default styling)

Installation

composer require elcheco/sortable-pillbox

The service provider is auto-discovered by Laravel.

Setup

Add @stack('scripts') to your layout (before </body>) if you don't have it already — SortableJS is loaded via this stack.

Usage

In your parent Livewire component, define the options and selected values:

public array $options = [
    'name' => 'Name',
    'email' => 'Email',
    'phone' => 'Phone',
    'address' => 'Address',
];

public array $selected = ['name', 'email'];

Then use the component in your Blade view:

<livewire:sortable-pillbox
    wire:model="selected"
    :options="$options"
/>

The selected array is two-way bound via wire:model and reflects the current order of pills.

Publishing Views

To customize the Blade template:

php artisan vendor:publish --tag=sortable-pillbox-views

License

MIT