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

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

williamug/searchable-select
===========================

A beautiful, searchable dropdown component for Laravel Livewire 3 & 4 applications. Built with Alpine.js and Tailwind CSS - no external dependencies required!

v1.2.2(2mo ago)2851[1 PRs](https://github.com/Williamug/searchable-select/pulls)MITBladePHP ^8.4|^8.2CI passing

Since Feb 15Pushed 2mo ago1 watchersCompare

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

READMEChangelog (7)Dependencies (9)Versions (13)Used By (0)

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

[](#livewire-searchable-select)

[![Latest Version on Packagist](https://camo.githubusercontent.com/70fca4fc18da880009c4f6a53825473e96d9a7fba83f159784c6707fc2209009/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f77696c6c69616d75672f73656172636861626c652d73656c6563742e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/williamug/searchable-select)[![run-tests](https://github.com/Williamug/searchable-select/actions/workflows/run-tests.yml/badge.svg)](https://github.com/Williamug/searchable-select/actions/workflows/run-tests.yml)[![GitHub Code Style Action Status](https://camo.githubusercontent.com/c31b704c14facf17d7d1832787cd72d2e072869f0483fcc7e630eea4a56a33a4/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f57696c6c69616d75672f73656172636861626c652d73656c6563742f6669782d7068702d636f64652d7374796c652d6973737565732e796d6c3f6272616e63683d6d61696e266c6162656c3d636f64652532307374796c65267374796c653d666c61742d737175617265)](https://github.com/Williamug/searchable-select/actions?query=workflow%3A%22Fix+PHP+code+style+issues%22+branch%3Amain)[![Total Downloads](https://camo.githubusercontent.com/b22ab57bc66c5404ff54f707d4df88009241f59f92550f8b5805b751a2db4b3b/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f77696c6c69616d75672f73656172636861626c652d73656c6563742e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/williamug/searchable-select)[![License](https://camo.githubusercontent.com/23b1e46d86d15b13c018ff3d2241c3688ef0f0be1b6a7382819442df5907e328/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f6c2f77696c6c69616d75672f73656172636861626c652d73656c6563742e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/williamug/searchable-select)

A powerful, feature-rich searchable dropdown component for Laravel Livewire 3 & 4 applications. Built with Alpine.js and supports both **Tailwind CSS** and **Bootstrap 5** out of the box!

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

[](#table-of-contents)

- [Features](#features)
- [Requirements](#requirements)
- [Installation](#installation)
- [CSS Framework Setup](#css-framework-setup)
    - [Tailwind CSS (Default)](#tailwind-css-default)
    - [Bootstrap 5](#bootstrap-5)
    - [Switching Themes](#switching-themes)
- [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)
    - [API/Ajax Integration](#apiajax-integration)
    - [Custom Keys](#custom-keys)
    - [With Validation](#with-validation)
    - [Disabled State](#disabled-state)
    - [Without Clear Button](#without-clear-button)
- [Advanced Features](#advanced-features)
- [Customization Guide](#customization-guide)
- [Troubleshooting](#troubleshooting)
- [Performance Optimization](#performance-optimization)
- [Testing](#testing)
- [Demo Application](#demo-application)
- [Contributing](#contributing)
- [License](#license)

Features
--------

[](#features)

- **Real-time search** - Client-side filtering as you type
- **Multi-select support** - Select multiple options with visual tags/badges
- **Ajax/API integration** - Fetch options dynamically from REST endpoints
- **Grouped options** - Organize options into labeled categories
- **Clear button** - Quickly clear selections
- **Dark mode support** - Automatically adapts to your theme (Tailwind)
- **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
- **Multiple CSS frameworks** - Full support for Tailwind CSS and Bootstrap 5
- **Per-component theme override** - Mix frameworks in the same app
- **Customizable** - Override styles and behavior
- **Zero config** - Works immediately after installation

Screenshots
-----------

[](#screenshots)

 [![](images/Pasted%20image.png)](images/Pasted%20image.png) [![](images/Pasted%20image%20(2).png)](images/Pasted%20image%20(2).png)

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

[](#requirements)

- **PHP**: 8.1 or higher
- **Laravel**: 9.x, 10.x, 11.x, or 12.x
- **Livewire**: 3.x or 4.x
- **Alpine.js**: Bundled with Livewire (no separate install needed)
- **CSS Framework** (choose one):
    - Tailwind CSS 3.x+ (default)
    - Bootstrap 5.x+

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

[](#installation)

Install the package via Composer:

```
composer require williamug/searchable-select
```

The package will automatically register its service provider. You're ready to use it immediately!

You can publish the configuration file:

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

CSS Framework Setup
-------------------

[](#css-framework-setup)

### Tailwind CSS (Default)

[](#tailwind-css-default)

The component uses **Tailwind CSS** by default. No additional configuration needed!

**1. Ensure Tailwind is installed in your project:**

```
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
```

**2. Add the package views to your `tailwind.config.js`:**

```
export default {
  content: [
    './resources/**/*.blade.php',
    './resources/**/*.js',
    './vendor/williamug/searchable-select/resources/views/**/*.blade.php',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
```

**3. Build your CSS:**

```
npm run build
```

That's it! The component will use Tailwind classes and support dark mode automatically.

### Bootstrap 5

[](#bootstrap-5)

To use **Bootstrap 5** instead of Tailwind:

**1. Publish the configuration file:**

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

This creates `config/searchable-select.php`.

**2. Set the theme to Bootstrap:**

Edit `config/searchable-select.php`:

```