PHPackages                             ajjitech/searchable-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. ajjitech/searchable-select

ActiveLibrary[Utility & Helpers](/categories/utility)

ajjitech/searchable-select
==========================

A powerful, Bootstrap 5 searchable dropdown component for Laravel Livewire 3 & 4 applications. Built with Alpine.js — no jQuery, no extra JS dependencies.

v4.0.1(1mo ago)02MITBladePHP ^8.2

Since Feb 15Pushed 1mo agoCompare

[ Source](https://github.com/ajjitech/searchable-select)[ Packagist](https://packagist.org/packages/ajjitech/searchable-select)[ Docs](https://github.com/ajjitech/searchable-select)[ GitHub Sponsors](https://github.com/Williamug)[ RSS](/packages/ajjitech-searchable-select/feed)WikiDiscussions main Synced 3w ago

READMEChangelog (2)Dependencies (17)Versions (28)Used By (0)

Livewire Searchable Select
==========================

[](#livewire-searchable-select)

[![Latest Version on Packagist](https://camo.githubusercontent.com/fc6b2b597ce2f188f01bf51043482710dd2b2de6b3924350c33f277547a12a69/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f616a6a69746563682f73656172636861626c652d73656c6563742e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/ajjitech/searchable-select)[![run-tests](https://github.com/ajjitech/searchable-select/actions/workflows/run-tests.yml/badge.svg)](https://github.com/ajjitech/searchable-select/actions/workflows/run-tests.yml)[![Total Downloads](https://camo.githubusercontent.com/8d1538ce58ee91bafffd0795cffa0e4be5cc49f2117cd84d96fc52c6e2792575/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f616a6a69746563682f73656172636861626c652d73656c6563742e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/ajjitech/searchable-select)[![License](https://camo.githubusercontent.com/f6139e9b9c57d98083af7eaf3bf4af84c002fbced19522703e78402941be0a11/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f6c2f616a6a69746563682f73656172636861626c652d73656c6563742e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/ajjitech/searchable-select)

A powerful, feature-rich searchable dropdown component for Laravel Livewire 3 & 4 applications. Styled with **Bootstrap 5** and powered by **Alpine.js** (bundled with Livewire) — no jQuery, no extra JavaScript dependencies.

Table of Contents
-----------------

[](#table-of-contents)

- [Features](#features)
- [Requirements](#requirements)
- [Installation](#installation)
- [Bootstrap Setup](#bootstrap-setup)
- [Quick Start](#quick-start)
- [Component Props Reference](#component-props-reference)
- [Usage Examples](#usage-examples)
    - [Basic Single Select](#basic-single-select)
    - [Multi-Select](#multi-select)
    - [Dependent/Cascading Dropdowns](#dependentcascading-dropdowns)
    - [Grouped Options](#grouped-options)
    - [Custom Keys](#custom-keys)
    - [Bootstrap Modal](#bootstrap-modal)
    - [With Validation](#with-validation)
    - [Disabled State](#disabled-state)
    - [Without Clear Button](#without-clear-button)
- [Advanced Features](#advanced-features)
- [Customization Guide](#customization-guide)
- [Dark Mode](#dark-mode)
- [Troubleshooting](#troubleshooting)
- [Performance Optimization](#performance-optimization)
- [Testing](#testing)
- [Demo Application](#demo-application)
- [Contributing](#contributing)
- [Credits](#credits)
- [License](#license)

Features
--------

[](#features)

- **Real-time search** — client-side filtering as you type
- **Multi-select support** — select multiple options with visual badge tags
- **Grouped options** — organize options into labeled categories
- **Clear button** — one-click to clear all selections
- **Dark mode support** — automatic via Bootstrap 5.3 CSS variables (`data-bs-theme="dark"`)
- **Accessible** — full keyboard navigation and ARIA attributes
- **Livewire 3 & 4 compatible** — works seamlessly with both versions
- **Responsive** — mobile-friendly and touch-optimized
- **Disabled state** — conditional disabling support
- **Flexible data** — works with Eloquent models, arrays, collections
- **Dependent dropdowns** — perfect for cascading country → region → city selects
- **Bootstrap-native** — uses Bootstrap CSS variables, no extra CSS framework required
- **Zero extra JS** — Alpine.js is bundled with Livewire; no jQuery, no CDN scripts

Requirements
------------

[](#requirements)

- **PHP**: 8.2 or higher
- **Laravel**: 11.x, 12.x, or 13.x
- **Livewire**: 3.x or 4.x
- **Bootstrap**: 5.3+
- **Alpine.js**: bundled with Livewire (no separate install needed)

Installation
------------

[](#installation)

Install the package via Composer:

```
composer require ajjitech/searchable-select
```

The package automatically registers its service provider. You can start using it immediately.

To customize the component HTML, publish the view:

```
php artisan vendor:publish --tag=searchable-select-views
```

This copies the view to `resources/views/vendor/searchable-select/searchable-select.blade.php`.

Bootstrap Setup
---------------

[](#bootstrap-setup)

The component is styled entirely with Bootstrap 5.3 CSS variables and scoped `.ss-*` custom classes embedded in the view. **You do not need to configure any content scanning or build step for the component styles** — they are injected inline via `@once` automatically.

You simply need Bootstrap 5.3+ loaded in your application.

### Option A — npm (recommended)

[](#option-a--npm-recommended)

```
npm install bootstrap
```

Import in your `resources/js/app.js`:

```
import 'bootstrap/dist/css/bootstrap.min.css';
// Bootstrap JS is optional — the component uses Alpine.js for all interactivity
```

Or in your `resources/css/app.css`:

```
@import "bootstrap/dist/css/bootstrap.min.css";
```

### Option B — CDN

[](#option-b--cdn)

Add Bootstrap's CSS to your layout ``:

```

```

> **Note:** Bootstrap JS (`bootstrap.bundle.min.js`) is **not required**. The component manages all its own interactivity through Alpine.js.

Quick Start
-----------

[](#quick-start)

### Basic Usage

[](#basic-usage)

**Step 1: Create a Livewire component**

```
php artisan make:livewire ContactForm
```

**Step 2: Set up the component class**

```