PHPackages vlados/cascader - 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. vlados/cascader ActiveLibrary vlados/cascader =============== A cascading dropdown component for Laravel Livewire with Alpine.js v0.3.0(3mo ago)0494MITBladePHP ^8.2 Since Dec 28Pushed 3mo agoCompare [ Source](https://github.com/vlados/cascader)[ Packagist](https://packagist.org/packages/vlados/cascader)[ RSS](/packages/vlados-cascader/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (8)Dependencies (2)Versions (14)Used By (0) Cascader ======== [](#cascader) A cascading dropdown component for Laravel Livewire with Alpine.js. Inspired by Ant Design's Cascader component. Installation ------------ [](#installation) ``` composer require vlados/cascader ``` Usage ----- [](#usage) ### Basic Usage [](#basic-usage) ``` ``` ### Custom Value and Label Fields [](#custom-value-and-label-fields) By default, the component uses `id` for values and `name` for labels. You can customize this: ``` ``` ### Options Format [](#options-format) The `options` array should be structured with parent items containing a `children` array: ``` $categories = [ [ 'id' => 1, 'name' => 'Electronics', 'icon' => 'laptop', // FontAwesome icon (optional) 'color' => '#3B82F6', // Color for icon background (optional) 'children' => [ ['id' => 11, 'name' => 'Phones', 'icon' => 'mobile', 'color' => '#3B82F6'], ['id' => 12, 'name' => 'Tablets', 'icon' => 'tablet', 'color' => '#3B82F6'], ], ], [ 'id' => 2, 'name' => 'Clothing', 'icon' => 'shirt', 'color' => '#10B981', 'children' => [ ['id' => 21, 'name' => 'Men', 'icon' => 'person', 'color' => '#10B981'], ['id' => 22, 'name' => 'Women', 'icon' => 'person-dress', 'color' => '#10B981'], ], ], [ 'id' => 3, 'name' => 'Other', // No children - selectable directly 'icon' => 'question', 'color' => '#6B7280', 'children' => [], ], ]; ``` ### Alpine.js Component [](#alpinejs-component) If you need to use the Alpine.js component directly without the Blade component: ``` ``` ### Clearable Selection [](#clearable-selection) Add a clear button to reset the selection: ``` ``` ### Mobile Customization [](#mobile-customization) On mobile devices (< 640px), the cascader automatically displays as a bottom sheet. You can customize the button text: ``` ``` ### Icon Resolver [](#icon-resolver) The cascader supports flexible icon rendering through a resolver system. By default, it uses FontAwesome, but you can configure it to use Heroicons, Blade Icons, or create a custom resolver. #### Using FontAwesome with inline `` tags (default) [](#using-fontawesome-with-inline-i-tags-default) ``` // In AppServiceProvider::boot() use Vlados\Cascader\IconResolver; IconResolver::useFontAwesome(); // solid style (default) IconResolver::useFontAwesome('regular'); // regular style ``` Options use simple icon names: `['icon' => 'laptop']` → `` #### Using Blade FontAwesome (recommended) [](#using-blade-fontawesome-recommended) For projects using the [blade-fontawesome](https://github.com/owenvoke/blade-fontawesome) package: ``` IconResolver::useBladeFontAwesome(); // fas style (default) IconResolver::useBladeFontAwesome('far'); // regular style ``` Options use simple icon names: `['icon' => 'laptop']` → `` #### Using Heroicons [](#using-heroicons) ``` IconResolver::useHeroicons(); // solid style IconResolver::useHeroicons('outline'); // outline style ``` Options use simple icon names: `['icon' => 'home']` → `` #### Using Blade Icons [](#using-blade-icons) For any icon set that follows the Blade Icons convention: ``` IconResolver::useBladeIcons(); ``` With this resolver, pass full component names in your options: ``` ['icon' => 'fas-laptop'] // renders ['icon' => 'heroicon-o-home'] // renders ``` #### Custom Resolver [](#custom-resolver) Create your own resolver for complete control: ``` IconResolver::using(function (string $icon, ?string $color = null, string $size = 'sm') { // Return HTML string for the icon return view('components.my-icon', [ 'name' => $icon, 'color' => $color, 'size' => $size, ])->render(); }); ``` #### Error Handling [](#error-handling) If an icon component cannot be found, a descriptive error is thrown: ``` Cascader: Unable to render icon component ''. Original icon name: 'missing'. Make sure the icon exists or configure a different IconResolver. ``` ### Publishing Assets [](#publishing-assets) To publish the views for customization: ``` php artisan vendor:publish --tag=cascader-views ``` To publish the JavaScript: ``` php artisan vendor:publish --tag=cascader-scripts ``` Features -------- [](#features) - Two-column cascading dropdown (desktop) - **Mobile-friendly bottom sheet** with step-by-step navigation - **Search/filter** through all options - Hover to preview children - Click to select - **Clearable** selection with optional clear button - **Flexible icon resolver** (FontAwesome, Heroicons, Blade Icons, or custom) - Selected value shows "Parent / Child" format - Auto-closes on selection or outside click - Keyboard support (Escape to close) - Works with Livewire's wire:model - Configurable value and label fields - Customizable search placeholder - Customizable Cancel/Confirm button text (mobile) Requirements ------------ [](#requirements) - PHP 8.2+ - Laravel 11 or 12 - Livewire 3 - Alpine.js 3 - Tailwind CSS - FontAwesome (for icons) License ------- [](#license) MIT ### Health Score 39 — LowBetter than 86% of packages Maintenance78 Regular maintenance activity Popularity18 Limited adoption so far Community6 Small or concentrated contributor base Maturity44 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 ~2 days Total 12 Last Release 114d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/20ebf35eac0da0d3775f3a64bdd9dc0e9dfa11bc9a3c3ee9db92deef9dbf8bd8?d=identicon)[vlados](/maintainers/vlados) --- Top Contributors [![vlados](https://avatars.githubusercontent.com/u/46914?v=4)](https://github.com/vlados "vlados (14 commits)") ### Embed Badge ![Health badge](/badges/vlados-cascader/health.svg) ``` [![Health](https://phpackages.com/badges/vlados-cascader/health.svg)](https://phpackages.com/packages/vlados-cascader) ``` ### Alternatives [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)[livewire-filemanager/filemanager A simple, friendly and practical Livewire filemanager for your applications 3587.6k1](/packages/livewire-filemanager-filemanager)[calebdw/larastan-livewire A Larastan / PHPStan extension for Livewire. 43482.4k3](/packages/calebdw-larastan-livewire)[tomshaw/electricgrid A feature-rich Livewire package designed for projects that require dynamic, interactive data tables. 116.6k](/packages/tomshaw-electricgrid)[a2insights/filament-saas Filament Saas for A2Insights 161.1k](/packages/a2insights-filament-saas) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)