Download the PHP package akhmads/select-components without Composer

select-components

A small Laravel package providing reusable Blade components for select inputs.

This package is designed for Livewire and works well together with Mary UI (daisyUI + Tailwind UI components).

Stack

This package is built using:

• Alpine.js
• Tailwind CSS
• daisyUI

Requirements

• Laravel 12+
• Livewire (includes Alpine.js)
• daisyUI (Tailwind CSS plugin) or Mary UI

Features

• Responsive design
• Dark mode support
• Adaptive dropdowns (auto width, truncation)
• Keyboard navigation support (arrow keys + enter)
• Built for Livewire (wire:model friendly)
• Clearable selection + optional placeholder
• Supports disabled state + focus management
• Initial value support (pre-selected values)
• Works well with Mary UI / daisyUI styling

Included components

• <x-remote-select />

  • Fetches options via AJAX (remote endpoint)
  • Supports searching/filtering as you type
  • Keeps label/value in sync when wire:model changes

• <x-offline-select />

  • Uses a local options array (static data)
  • Supports searching locally
• <x-multi-select />
  • Supports selecting multiple values
  • Uses the same remote (AJAX) mechanism as remote-select

Installation

Install livewire

• Install: composer require livewire/livewire
• Docs: https://livewire.laravel.com/docs/4.x/installation

Install daisyUI (Tailwind CSS plugin) or Mary UI

• Docs: https://daisyui.com/docs/install/laravel/
• Docs: https://mary-ui.com/docs/installation

Install via Composer (Packagist)

Usage

Remote select

• remote: URL endpoint that returns a JSON array of option objects (e.g. /api/users or {{ route('api.user') }}).
• option_value: the key to use for the option value (default: id).
• option_label: the key to use for the option label (default: name).
• placeholder: placeholder text shown when nothing is selected.
• clearable: when present, allows clearing the selection.
• initial_value: (optional) can be either:
  • an array of IDs (will fetch labels from remote)
  • an array of objects {id, name} (will be used directly)

Add a simple endpoint to routes/web.php (or routes/api.php) that returns users in JSON:

Offline select

Multi select

Overriding views (optional)

To customize the component Blade templates, publish the views:

Notes

• The components are registered automatically via package discovery.
• remote-select and multi-select rely on a JSON endpoint returning an array of objects. Each object should have an id (or your chosen key) and a label key.

Contributing

To work on this package locally, clone the repo into a packages folder inside your Laravel project.

From your Laravel project root:

Then configure Composer to load it as a local package by adding a path repository to your composer.json (this is already configured in this workspace):

Finally, require the local package in your app:

Once installed, you can make changes in packages/select-components and test them directly in your Laravel app.

License

This package is released under the MIT License. See the official license text at https://opensource.org/licenses/MIT.