PHPackages jeremykes/keselect - 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. jeremykes/keselect ActiveLibrary[Utility & Helpers](/categories/utility) jeremykes/keselect ================== KeSelect is a TALL Stack dropdown picker with Eloquent Search autofill. v1.0.4(1y ago)015MITPHPPHP >=8.0 Since Aug 14Pushed 1y ago1 watchersCompare [ Source](https://github.com/jeremykes/KeSelect)[ Packagist](https://packagist.org/packages/jeremykes/keselect)[ RSS](/packages/jeremykes-keselect/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (5)Dependencies (1)Versions (6)Used By (0) KeSelect Livewire 3 Dropdown Picker =================================== [](#keselect-livewire-3-dropdown-picker) [![screenrecord2](https://private-user-images.githubusercontent.com/17040336/359003531-0d9a1d16-e9f7-45f8-aaf7-b512b3b08054.gif?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzUxOTY0MTAsIm5iZiI6MTc3NTE5NjExMCwicGF0aCI6Ii8xNzA0MDMzNi8zNTkwMDM1MzEtMGQ5YTFkMTYtZTlmNy00NWY4LWFhZjctYjUxMmIzYjA4MDU0LmdpZj9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNjA0MDMlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjYwNDAzVDA2MDE1MFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWU5ZWM3OTVmZmY0YzMyOTdjZTA4N2U0YWFkOWJlOWQ3MjUwNzFjNGViOTk2YTk5ZjhmZDBlZTI4ODcwZTM2NDcmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.lRsAQY9FmKDUXh-ROueVDbQV9kJvqYsVFL0k3HXpyBo)](https://private-user-images.githubusercontent.com/17040336/359003531-0d9a1d16-e9f7-45f8-aaf7-b512b3b08054.gif?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzUxOTY0MTAsIm5iZiI6MTc3NTE5NjExMCwicGF0aCI6Ii8xNzA0MDMzNi8zNTkwMDM1MzEtMGQ5YTFkMTYtZTlmNy00NWY4LWFhZjctYjUxMmIzYjA4MDU0LmdpZj9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNjA0MDMlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjYwNDAzVDA2MDE1MFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWU5ZWM3OTVmZmY0YzMyOTdjZTA4N2U0YWFkOWJlOWQ3MjUwNzFjNGViOTk2YTk5ZjhmZDBlZTI4ODcwZTM2NDcmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.lRsAQY9FmKDUXh-ROueVDbQV9kJvqYsVFL0k3HXpyBo) KeSelect is a TALL Stack dropdown picker with eloquent search autofill. I created this component because it was quite hard to find anything around for the TALL Stack. The component mimics the main functions of a lot of the other available plugins like Select2, SelectJS, TomSelect, SelectizeJS and so forth. I just didn't like going down the path of installing multiple other packages and jQuery (no thanks). Requirement ----------- [](#requirement) - PHP v8.1 - Laravel v10 - Livewire v3 - TailwindCSS - AlpineJS KeSelect uses plain Laravel, Livewire, AlpineJS and TailwindCSS to achieve a simple dropdown select functionality that grabs data directly from the backend. The component can be customized normally in a "laravelly" way as see fit. Installation ------------ [](#installation) You can install KeSelect using composer. ``` composer require jeremykes/keselect ``` Quick Start ----------- [](#quick-start) After installing the component, include it in your blade application and you are good to go. For example (assuming we have a variable `$search_columns = ['name', 'description', 'title'];`: ``` ``` There are two ***required*** variables for the component; `searchableModel` and `searchableColumns`. Their description can be found below. Documentation ------------- [](#documentation) ### Property Explanation [](#property-explanation) - `:searchableModel` ***(required)*** - this name must exactly match the Model you would like to perform the search on. If it doesn't exist, the component will throw an error. For example if you had a Customers Model: `:searchableModel="'Customers'"`. - `:searchableColumns` ***(required)*** - this is an array of *column names* in your Model that you would like the search to be performed on. If any of the columns do not exist in your Model, the component will throw an error. An example format of this is: `['name', 'description']`. - `:minSearchLength` (optional) - this is the minimum number of characters that will be entered before the search is fired. The default is 3. For example if you wanted the search to fire after the 5th character: `:minSearchLength="'5'"`. - `:primaryDisplay` (optional) - this is a column value that you want highlighted in the search results. As in the GIF above, the `primaryDisplay` column value is bolded on the first line while all other column values are listed underneath in a slightly smaller font. This is also the value that will be shown in the input form if selected. If nothing is defined, the first value in the `searchableColumns` array will be used as the `primaryDisplay`. For example if you wanted *description* to be the highlighted value: `:primaryDisplay="'description'"`. - `:optionID` (optional) - if your Model ID is not `id` (example you use `UUID` instead), then you need to define that so that the proper ID is referenced. If no `optionID` is provided, the default will be assumed as `id`. If the component can't find either definitions existing in the Model, an error will be thrown. For example if you use `UUID` instead, you will define it as: `:optionID="'UUID'"`. In the KeSelect component `selectedOptionId` is Modeled out of the component so that it can be referenced in the parent component. This is to allow the ID to be available to the parent once that relevant option is selected from the dropdown search results. You can reference it in the parent component like so: ``` ``` If the `selectedCustomerId` in the is set initially (not NULL), the component will try to initialize the dropdown input with that ID. This is useful for "Edit" or "Read" pages where you need to initialize the component to have a pre-selected value. This is the model declaration: ``` namespace App\Livewire\Components; use Livewire\Attributes\Modelable; use Livewire\Attributes\On; use Livewire\Component; use Illuminate\Support\Facades\Schema; use Illuminate\Database\Eloquent\Model; use Livewire\Attributes\Reactive; class KeSelect extends Component { #[Reactive] public $searchableColumns; #[Modelable] public $selectedOptionId; public $selectedOption = null; public $options = []; public $search = ''; public $minSearchLength = 3; public $searchableModel; public $primaryDisplay; public $optionID; public $searchDisplay; public $modelName; ``` ### Styling [](#styling) Included out of the box is both TailwindCSS light and dark theme. The styles are pretty standard and can be customized as necessary. License ------- [](#license) The MIT License (MIT). Future ------ [](#future) #### Multi-Select [](#multi-select) I have not added Multi-select to the Component but will do so in the near future. I will see how I go. #### Testing [](#testing) I also have not done extensive testing on this component so please use at your own risk. Final Thoughts -------------- [](#final-thoughts) This was a fun little weekend project so if you want to get in touch for a collab or anything let me know! I hope this component is super useful for you. ### Health Score 26 — LowBetter than 43% of packages Maintenance34 Infrequent updates — may be unmaintained Popularity6 Limited adoption so far Community7 Small or concentrated contributor base Maturity48 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 ~1 days Total 5 Last Release 631d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/ade3c0bc271b7e7723e296f82688fd145b3ff83da4a78bb4347e949c02768117?d=identicon)[jeremykes](/maintainers/jeremykes) --- Top Contributors [![jeremykes](https://avatars.githubusercontent.com/u/17040336?v=4)](https://github.com/jeremykes "jeremykes (33 commits)") --- Tags alpinejsdropdownlaravellivewireremote-dataselecttailwindcss ### Embed Badge ![Health badge](/badges/jeremykes-keselect/health.svg) ``` [![Health](https://phpackages.com/badges/jeremykes-keselect/health.svg)](https://phpackages.com/packages/jeremykes-keselect) ``` ### Alternatives [livewire/flux The official UI component library for Livewire. 9385.0M86](/packages/livewire-flux)[livewire/volt An elegantly crafted functional API for Laravel Livewire. 4195.3M84](/packages/livewire-volt)[jantinnerezo/livewire-alert This package provides a simple alert utilities for your livewire components. 8041.2M20](/packages/jantinnerezo-livewire-alert)[leandrocfe/filament-apex-charts Apex Charts integration for Filament PHP. 4861.2M8](/packages/leandrocfe-filament-apex-charts)[spatie/laravel-livewire-wizard Build wizards using Livewire 4061.0M4](/packages/spatie-laravel-livewire-wizard)[spatie/laravel-dashboard A dashboard for Laravel 568156.1k94](/packages/spatie-laravel-dashboard) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)