PHPackages teofanis/searchable-dropdown - 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. teofanis/searchable-dropdown ActiveLibrary[Utility & Helpers](/categories/utility) teofanis/searchable-dropdown ============================ Searchable Dropdown 2.0.1(1y ago)101757MITBladePHP ^7.1|^8.0|^8.1|^8.2|^8.3 Since Mar 17Pushed 1y ago2 watchersCompare [ Source](https://github.com/teofanis/searchable-dropdown)[ Packagist](https://packagist.org/packages/teofanis/searchable-dropdown)[ Docs](https://github.com/teofanis/searchable-dropdown)[ RSS](/packages/teofanis-searchable-dropdown/feed)WikiDiscussions master Synced yesterday READMEChangelog (9)Dependencies (4)Versions (11)Used By (0) Searchable Dropdown =================== [](#searchable-dropdown) [![Latest Version on Packagist](https://camo.githubusercontent.com/546066822d3ffba3443a1d680228606766e7a6e501b8e02e4132e0fc3563362e/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f74656f66616e69732f73656172636861626c652d64726f70646f776e2e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/teofanis/searchable-dropdown)[![Build Status](https://camo.githubusercontent.com/dc6e5688b1b7b6edce182a8d6bce5e1bdc007d9390158cf8535ad96efdd9866f/68747470733a2f2f696d672e736869656c64732e696f2f7472617669732f74656f66616e69732f73656172636861626c652d64726f70646f776e2f6d61737465722e7376673f7374796c653d666c61742d737175617265)](https://travis-ci.org/teofanis/searchable-dropdown)[![Quality Score](https://camo.githubusercontent.com/5faaeea8622dcf0d55c6869ed31a014185e3bb69ef7e61356ab0996321a466e0/68747470733a2f2f696d672e736869656c64732e696f2f7363727574696e697a65722f672f74656f66616e69732f73656172636861626c652d64726f70646f776e2e7376673f7374796c653d666c61742d737175617265)](https://scrutinizer-ci.com/g/teofanis/searchable-dropdown)[![Total Downloads](https://camo.githubusercontent.com/b48fb81b6f8bac84126a82a98f3e7529c9c6c2e20dcbf138d0f13764bca771a5/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f74656f66616e69732f73656172636861626c652d64726f70646f776e2e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/teofanis/searchable-dropdown) Searchable dropdown is a dropdown component built with Alpine JS, tailwind and Blade components. It can be used as a normal dropdown or a multiple selection dropdown. Installation ------------ [](#installation) You can install the package via composer: Please note if you use Livewire 2.x you should install the 1.x version of the package. ``` composer require teofanis/searchable-dropdown:^1.0 ``` Livewire 3.x ``` composer require teofanis/searchable-dropdown // or composer require teofanis/searchable-dropdown:^2.0 ``` Publish the dropdowns' config and asset files ``` php artisan vendor:publish --tag=searchable-dropdown-config php artisan vendor:publish --tag=searchable-dropdown-assets ``` Finally add the dropdown styles and scripts in the head section of your layout file. ``` @searchableDropdownStyles @searchableDropdownScripts ``` Usage ----- [](#usage) Here's an example of how you could use the dropdown inside your blade views. \#Simple select & Multiselect [![dropdown](https://user-images.githubusercontent.com/47872542/111536873-b188a800-8762-11eb-806a-f45a4ed41440.gif)](https://user-images.githubusercontent.com/47872542/111536873-b188a800-8762-11eb-806a-f45a4ed41440.gif) -Select ``` ``` -Multiselect ``` ``` \#Customization & Props PropsRequiredContextDescriptionTypeExamplenameyesanyUsed as "name" attribute on input fields and used to internally by the dropdownstringname="pizzaOptions"entangleRequired within Livewire componentsLivewireThe dropdown will share its state with the "entangled" property of the Livewire components its rendered in.stringentangle="pizzaToppings"contextRequired within Livewire componentsLivewireThe dropdown will use the context to setup the state-sharing with livewire component. (Won't be required in future release)LW:context="$this"inLivewireRequired within Livewire componentsLivewireSimilarly to the context prop, this will be used in the initial setup of the component. (Won't be required in future release)boolean:in\_live\_wire="true"valuenoanyUsed as any value attribute on input fieldsstring/arrayvalue="old('name')" || :value="\[1,2,3\]"datayesanyPopulates the dropdown list, collection keys will be returned for selections and values will be displayed.Collection:data="dataProvider()"xModelnoAlpineAn option prop when you want to bind an apline js x-data field as a model of the dropdown.stringx\_model="modelName"multiselectmultiselectanyUsed to behave like a multiple option dropdown or a single option dropdownboolean:multiselect="true"alignListItemsnoanyAligns the text on the dropdown list. You can pass a tailwind class for text-alignment e.g(text-left, text-right, text-center etc.)stringalign\_items="text-left"disablednoanyDisable the dropdown interactionboolean:disabled="true"labelnoanyDisplays the prop value as as label of the dropdownstringlabel="My Dropdown Label"placeholdernoanySets the placeholder text for the dropdownstringplaceholder="My Placeholder Text"searchFieldPlaceholdernoanySets the placeholder for the search fieldstringsearch\_field\_placeholder="My Search field Placeholder"noResultsMessagenoanySets the message of the no-results block when filteringstringno\_results\_message="No options found"Most props have default values set in config/searchable-dropdown-config.php that serve as a base for most use-cases. Placeholder Defaults``` 'placeholders' => [ 'default-no-results-message' => 'No Results Found', 'default-placeholder' => 'Select an option', 'default-search-placeholder' => 'Search...', ] ``` Setting Defaults``` 'settings' => [ 'default-is-multiselect' => false, 'default-is-in-livewire' => false, 'default-list-item-alignment' => 'text-left' ], ``` Theme StylesWith the theme styles, you can do some small adjustments on color pallete of the dropdown as well as style the wrapper, label or button all using tailwind classes ``` 'styles' => [ 'theme' => [ 'default-text-color' => 'text-gray-900', 'default-primary-color' => 'indigo-600', 'default-secondary-color' => 'white', ], 'classes' => [ 'wrapper' => 'inline-block w-full rounded-md shadow-sm', 'label' => 'block tracking-wide text-xs font-bold mb-4 char-style-medium cursor-pointer leading-none text-mbr_blue font-hairline', 'button' => 'relative z-0 w-full py-2 pl-3 pr-10 text-left transition duration-150 ease-in-out bg-white border border-gray-300 rounded-md cursor-default focus:outline-none focus:shadow-outline-blue focus:border-blue-300 sm:text-sm sm:leading-5', ] ], ``` To Fully customize the look & feel of the dropdown, publish the packages' views. ### Testing [](#testing) ``` composer test ``` ### Changelog [](#changelog) Please see [CHANGELOG](CHANGELOG.md) for more information what has changed recently. Contributing ------------ [](#contributing) Please see [CONTRIBUTING](CONTRIBUTING.md) for details. ### Security [](#security) If you discover any security related issues, please email [teos\_97@hotmail.com](mailto:teos_97@hotmail.com) instead of using the issue tracker. Credits ------- [](#credits) - [Teofanis Papadopulos](https://github.com/teofanis) - [All Contributors](../../contributors) License ------- [](#license) The MIT License (MIT). Please see [License File](LICENSE.md) for more information. ### Health Score 41 — FairBetter than 89% of packages Maintenance43 Moderate activity, may be stable Popularity21 Limited adoption so far Community13 Small or concentrated contributor base Maturity73 Established project with proven stability Bus Factor1 Top contributor holds 97.1% 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 ~159 days Recently: every ~335 days Total 10 Last Release 450d ago Major Versions 0.1.4 → 1.42021-06-17 1.5.2 → 2.0.12025-02-16 PHP version history (3 changes)0.1PHP ^7.1 0.1.4PHP ^7.1|^8.0 1.5.1PHP ^7.1|^8.0|^8.1|^8.2|^8.3 ### Community Maintainers ![](https://www.gravatar.com/avatar/a52c2fecd11bd797f9c73b93907f12e06c13c932eb492f150adfabde1b0b190a?d=identicon)[teos\_97](/maintainers/teos_97) --- Top Contributors [![teofanis](https://avatars.githubusercontent.com/u/47872542?v=4)](https://github.com/teofanis "teofanis (33 commits)")[![rabol](https://avatars.githubusercontent.com/u/1177191?v=4)](https://github.com/rabol "rabol (1 commits)") --- Tags alpinejsdropdownlaravellivewiremultiselectsearchable-dropdowntailwindcsssearchable-dropdownteofanis ### Code Quality TestsPHPUnit ### Embed Badge ![Health badge](/badges/teofanis-searchable-dropdown/health.svg) ``` [![Health](https://phpackages.com/badges/teofanis-searchable-dropdown/health.svg)](https://phpackages.com/packages/teofanis-searchable-dropdown) ``` ### Alternatives [livewire/flux The official UI component library for Livewire. 9385.0M86](/packages/livewire-flux)[jantinnerezo/livewire-alert This package provides a simple alert utilities for your livewire components. 8041.2M20](/packages/jantinnerezo-livewire-alert)[spatie/laravel-livewire-wizard Build wizards using Livewire 4061.0M4](/packages/spatie-laravel-livewire-wizard)[kirschbaum-development/commentions A package to allow you to create comments, tag users and more 12369.2k](/packages/kirschbaum-development-commentions)[revolution/self-ordering Self Ordering System 2112.7k](/packages/revolution-self-ordering)[joelwmale/livewire-quill Easily add QuillJS with image support to any Laravel Livewire component. 1314.0k](/packages/joelwmale-livewire-quill) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)