PHPackages amabk/livewire-search-select - 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. amabk/livewire-search-select ActiveLibrary[Utility & Helpers](/categories/utility) amabk/livewire-search-select ============================ Reusable Livewire searchable dropdown component. v1.2.3(10mo ago)0285MITPHPPHP ^8.1 Since May 29Pushed 10mo agoCompare [ Source](https://github.com/AMABK/livewire-search-select)[ Packagist](https://packagist.org/packages/amabk/livewire-search-select)[ RSS](/packages/amabk-livewire-search-select/feed)WikiDiscussions main Synced today READMEChangelog (3)Dependencies (1)Versions (6)Used By (0) Livewire Search Select ---------------------- [](#livewire-search-select) [![alt text](image.png)](image.png)A powerful and customizable Livewire component for searchable select dropdowns. Supports multi-field labels, concatenation, and emits Livewire events for reactive parent handling. --- Usage ----- [](#usage) ### 1. Installation [](#1-installation) Install via Composer: ``` composer require amabk/livewire-search-select ``` ### 2. Basic Usage [](#2-basic-usage) Add the component to any Blade view: #### Single-select [](#single-select) ``` ``` #### Multi-select (chips inside field) [](#multi-select-chips-inside-field) ``` ``` #### Custom separators [](#custom-separators) ``` {{-- Display label uses " | ", search concatenation still uses space (more forgiving) --}} ``` ``` {{-- Both label and search use the same separator --}} ``` PropTypeDefaultNotes`modelClass``string`—Eloquent model FQCN, e.g. `\App\Models\User``labelFields``array` | `string``['email']`Fields used to render the visible label`searchFields``array``['name']`Fields used for LIKE search`concatFields``bool``false`If `true`, search uses `CONCAT_WS(searchSeparator, …)``labelSeparator``string``' '`Separator when rendering labels (display only)`searchSeparator``string``' '`Separator used in `CONCAT_WS` when `concatFields=true``orderBy``{field:string, direction:'asc' | 'desc'}``{ field: 'id', direction: 'asc' }`Sort for initial and searched results`limit``int``10`Max rows for search results`initialLoad``int``0`Prefetch N items on **focus** when search is empty`placeholder``string``'Search...'`Hidden when chips exist (multi)`emitEvent``string | null``null`Event name to dispatch on change`inputClass``string``''`Extra classes on the **wrapper** (the chip field)`optionClass``string``''`Extra classes on the dropdown ```multiple``bool``false`Enable multi-select`selectedId``int | null``null`Preselect for single-select`selectedIds``int[]``[]`Preselect for multi-select--- ### 3. Listening for Selection Events [](#3-listening-for-selection-events) When a user selects an option, the component emits a Livewire event (named by your `emit-event` prop) **to the parent component**. You can listen for it and update your parent Livewire component’s data accordingly. **Example Parent Component:** ``` class UserForm extends Component { public $selectedUserIds = []; #[On('usersSelected')] // single: receives id or '' when cleared // multi: receives array of ids public function usersSelected($userIds) { $this->selectedUserIds = $userIds; } public function render() { return view('livewire.user-form'); } } ``` **In your Blade view:** ``` Selected User IDs: {{ implode(', ', $selectedUserIds) }} ``` --- ### 4. Customizing Appearance [](#4-customizing-appearance) You can pass custom CSS classes to the input and the options list: ``` ``` --- ### 5. Setting a Default Selected Option [](#5-setting-a-default-selected-option) To set a default selection: ``` ``` This will preselect the items with `id = 5` and `id = 9` and show their labels in the input. --- ### 6. Troubleshooting & Tips [](#6-troubleshooting--tips) - **No results found:** Ensure your model and label fields are correct and records exist. - **Alpine/Livewire conflicts:** Alpine.js is auto-reinitialized after Livewire updates, but if you experience issues, check your Alpine.js version. - **Emitted event not caught?**Ensure your parent Livewire component is listening for the same event name as the `emit-event` you specify. --- ### 7. Development [](#7-development) - **PSR-4 namespace:** AMABK\\LivewireSearchSelect\\ → src/ - **Component class:** AMABK\\LivewireSearchSelect\\SearchSelect - **View:** resources/views/search-select.blade.php (Loaded as view('livewire-search-select::search-select')) ### 8. Example: User Dropdown in a Form [](#8-example-user-dropdown-in-a-form) ``` Submit ``` ``` // Parent Component (UserForm.php) public $userIds = []; protected $listeners = ['userSelected']; public function userSelected($userIds) { $this->userIds = $userIds; } ``` --- ### 10. Advanced: Use With Any Model & Any Label Format [](#10-advanced-use-with-any-model--any-label-format) ``` ``` --- **For advanced use, extend the component in your own package.****For issues, open a GitHub issue or PR!** ### License [](#license) MIT © [AMABK](https://github.com/AMABK) ### Health Score 33 — LowBetter than 72% of packages Maintenance54 Moderate activity, may be stable Popularity13 Limited adoption so far Community6 Small or concentrated contributor base Maturity50 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~29 days Total 4 Last Release 312d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/eae0dca270ecbdffe6e3973fc8b5b23c44b71f2c48050cd9ee22218729fe0fe4?d=identicon)[AMABK](/maintainers/AMABK) --- Top Contributors [![AMABK](https://avatars.githubusercontent.com/u/4615478?v=4)](https://github.com/AMABK "AMABK (19 commits)") --- Tags dropdownlaravellivewiresearchable ### Embed Badge ![Health badge](/badges/amabk-livewire-search-select/health.svg) ``` [![Health](https://phpackages.com/badges/amabk-livewire-search-select/health.svg)](https://phpackages.com/packages/amabk-livewire-search-select) ``` ### Alternatives [livewire/flux The official UI component library for Livewire. 9527.8M127](/packages/livewire-flux)[jantinnerezo/livewire-alert This package provides a simple alert utilities for your livewire components. 8131.4M20](/packages/jantinnerezo-livewire-alert)[leandrocfe/filament-apex-charts Apex Charts integration for Filament PHP. 4911.6M11](/packages/leandrocfe-filament-apex-charts)[tallstackui/tallstackui TallStackUI is a powerful suite of Blade components that elevate your workflow of Livewire applications. 725173.0k14](/packages/tallstackui-tallstackui)[venturedrake/laravel-crm A free open source CRM built as a package for laravel projects 43311.2k](/packages/venturedrake-laravel-crm)[ramonrietdijk/livewire-tables Dynamic tables for models with Laravel Livewire 21259.6k](/packages/ramonrietdijk-livewire-tables) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)