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!

v3.0.2(1mo ago)29032MITBladePHP ^8.2CI passing

Since Feb 15Pushed 1mo 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 today

READMEChangelog (10)Dependencies (17)Versions (25)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 styled with Tailwind CSS.

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

[](#table-of-contents)

- [Features](#features)
- [Requirements](#requirements)
- [Installation](#installation)
- [Tailwind CSS Setup](#tailwind-css-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)
    - [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
- **Grouped options** - Organize options into labeled categories
- **Clear button** - Quickly clear selections
- **Dark mode support** - Automatically adapts to your theme
- **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
- **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.2 or higher
- **Laravel**: 11.x, 12.x, 13.x
- **Livewire**: 3.x or 4.x
- **Alpine.js**: Bundled with Livewire (no separate install needed)
- **Tailwind CSS**: 3.x or 4.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 view files if you need to customize the component HTML:

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

Tailwind CSS Setup
------------------

[](#tailwind-css-setup)

The component is styled with Tailwind utility classes. You must tell Tailwind to scan the package's blade views, otherwise those classes will be purged and the dropdown will appear unstyled or invisible.

### Tailwind v4 (`@tailwindcss/vite` or `@tailwindcss/postcss`)

[](#tailwind-v4-tailwindcssvite-or-tailwindcsspostcss)

Add a `@source` directive to your main CSS file (typically `resources/css/app.css`):

```
@import 'tailwindcss';

@source '../../vendor/williamug/searchable-select/resources/views/**/*.blade.php';
```

Then rebuild your assets:

```
npm run build
```

### Tailwind v3 (`tailwindcss` with `tailwind.config.js`)

[](#tailwind-v3-tailwindcss-with-tailwindconfigjs)

Add the package views to the `content` array in `tailwind.config.js`:

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

Then rebuild your assets:

```
npm run build
```

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

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

[](#quick-start)

### Basic Usage

[](#basic-usage)

**Step 1: Create a Livewire Component**

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

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

```