PHPackages                             bangsystems/livewire-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. bangsystems/livewire-select

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

bangsystems/livewire-select
===========================

Livewire dropdown select component (fork of asantibanez/livewire-select for BANG Systems use)

v3.0.0(1y ago)0741MITPHPPHP ^7.2|^7.3|^7.4|^8.0|^8.1|^8.2

Since Jun 3Pushed 1y agoCompare

[ Source](https://github.com/bangsystems/livewire-select)[ Packagist](https://packagist.org/packages/bangsystems/livewire-select)[ Docs](https://github.com/asantibanez/livewire-select)[ RSS](/packages/bangsystems-livewire-select/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (3)Dependencies (4)Versions (16)Used By (0)

BANG Systems Limited Fork
=========================

[](#bang-systems-limited-fork)

This is a fork for internal use for BANG Systems Limited. As keeping with the spirit of opensource we are publishing all changes we make to this package.

Below is the original readme unmodified from initial forking on 14th September 2023 with minor tweaks.

Livewire Select
===============

[](#livewire-select)

Livewire component for dependant and/or searchable select inputs

### Preview

[](#preview)

[![preview](https://github.com/bangsystems/livewire-select/raw/master/preview.gif)](https://github.com/bangsystems/livewire-select/raw/master/preview.gif)

### Installation

[](#installation)

You can install the package via composer:

```
composer require bangsystems/livewire-select
```

### Requirements

[](#requirements)

This package uses `livewire/livewire` () under the hood.

It also uses TailwindCSS () for base styling.

Please make sure you include both of these dependencies before using this component.

### Usage

[](#usage)

In order to use this component, you must create a new Livewire component that extends from `LivewireSelect`

You can use `make:livewire` to create a new component. For example.

```
php artisan make:livewire CarModelSelect
```

In the `CarModelSelect` class, instead of extending from the base Livewire `Component` class, extend from `LivewireSelect` class. Also, remove the `render` method. You'll have a class similar to this snippet.

```
class CarModelSelect extends LivewireSelect
{
    //
}
```

In this class, you must override the following methods to provide options for your select input

```
public function options($searchTerm = null) : Collection
{
    //
}
```

`options()` must return a collection of keyed values array items that must have at least the following keys: `value` and `description`. For example:

```
public function options($searchTerm = null) : Collection
{
    return collect([
        [
            'value' => 'honda',
            'description' => 'Honda',
        ],
        [
            'value' => 'mazda',
            'description' => 'Mazda',
        ],
        [
            'value' => 'tesla',
            'description' => 'Tesla',
        ],
    ]);
}
```

To render the component in a view, just use the Livewire tag or include syntax

```

```

You'll see on screen a select input with some custom styles with your defined values

[![preview](https://github.com/asantibanez/livewire-select/raw/master/basic.gif)](https://github.com/asantibanez/livewire-select/raw/master/basic.gif)

Nothing fancy there. Now, let's make another select input depend on its value.

Create another component following the same process above. In this case, we will create a `CarModelSelect` with the following `options()` method.

```
// In CarModelSelect component
public function options($searchTerm = null) : Collection
{
    $modelsByBrand = [
        'tesla' => [
            ['value' => 'Model S', 'description' => 'Model S'],
            ['value' => 'Model 3', 'description' => 'Model 3'],
            ['value' => 'Model X', 'description' => 'Model X'],
        ],
        'honda' => [
            ['value' => 'CRV', 'description' => 'CRV'],
            ['value' => 'Pilot', 'description' => 'Pilot'],
        ],
        'mazda' => [
            ['value' => 'CX-3', 'description' => 'CX-3'],
            ['value' => 'CX-5', 'description' => 'CX-5'],
            ['value' => 'CX-9', 'description' => 'CX-9'],
        ],
    ];

    $carBrandId = $this->getDependingValue('car_brand_id');

    if ($this->hasDependency('car_brand_id') && $carBrandId != null) {
        return collect(data_get($modelsByBrand, $carBrandId, []));
    }

    return collect([
        ['value' => 'Model S', 'description' => 'Tesla - Model S'],
        ['value' => 'Model 3', 'description' => 'Tesla - Model 3'],
        ['value' => 'Model X', 'description' => 'Tesla - Model X'],
        ['value' => 'CRV', 'description' => 'Honda - CRV'],
        ['value' => 'Pilot', 'description' => 'Honda - Pilot'],
        ['value' => 'CX-3', 'description' => 'Mazda - CX-3'],
        ['value' => 'CX-5', 'description' => 'Mazda - CX-5'],
        ['value' => 'CX-9', 'description' => 'Mazda - CX-9'],
    ]);
}
```

and define it in the view like this

```

```

With these two snippets we have defined a select input that `depends-on` another select input with name `car_brand_id`. With this definition, we tell our component to listen to any updates on our `car_brand_id` input and be notified on changes.

[![preview](https://github.com/asantibanez/livewire-select/raw/master/dependant.gif)](https://github.com/asantibanez/livewire-select/raw/master/dependant.gif)

Notice in the `options()` method the use of two other helper methods: `getDependingValue` and `hasDependency`.

`getDependingValue('token')` will return the value of another field, in this case `car_brand_id`. If `car_brand_id` has no value, then it will return `null`.

`hasDependency('token')` allows us to check if our component has been specified to depend on other component values. This allows us to reuse the component by checking if a dependency has been specified in our layouts.

For example if we define the same component without the `:depends-on` attribute, we can use the component and return all car models.

```

```

It should look something like this

[![preview](https://github.com/asantibanez/livewire-select/raw/master/no-dependency.gif)](https://github.com/asantibanez/livewire-select/raw/master/no-dependency.gif)

### Searchable inputs

[](#searchable-inputs)

You can define the `searchable` attribute on the component to change the behavior of your inputs. With `:searchable="true"` your component will change its behavior to allow searching the options returned in the `options()` method.

```

```

Your input will look something like this

[![preview](https://github.com/asantibanez/livewire-select/raw/master/searchable.gif)](https://github.com/asantibanez/livewire-select/raw/master/searchable.gif)

To filter the options in the dropdown, you can use the `$searchTerm` parameter in the `options()` method.

### Customizing the UI

[](#customizing-the-ui)

// TODO 😬

### Advanced behavior

[](#advanced-behavior)

// TODO 😬

### AlpineJs support

[](#alpinejs-support)

Add AlpineJs for arrow-keys navigation, enter key for selection, enter/space keys for reset. 😎

### Testing

[](#testing)

```
composer test
```

### Changelog

[](#changelog)

Please see [CHANGELOG](CHANGELOG.md) for more information what has changed recently.

Contributing
------------

[](#contributing)

Please see [CONTRIBUTING](CONTRIBUTING.md) for details.

### Security

[](#security)

If you discover any security related issues, please email  instead of using the issue tracker.

Credits
-------

[](#credits)

- [Luke Hebblethwaite](https://github.com/lukehebb)
- [Andrés Santibáñez](https://github.com/asantibanez)
- [All Contributors](../../contributors)

License
-------

[](#license)

The MIT License (MIT). Please see [License File](LICENSE.md) for more information.

###  Health Score

36

—

LowBetter than 82% of packages

Maintenance35

Infrequent updates — may be unmaintained

Popularity10

Limited adoption so far

Community11

Small or concentrated contributor base

Maturity75

Established project with proven stability

 Bus Factor1

Top contributor holds 82.5% 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 ~121 days

Recently: every ~93 days

Total

14

Last Release

603d ago

Major Versions

1.1.4 → v2.0.02020-12-13

v2.5.0 → v3.0.02024-09-22

PHP version history (4 changes)1.0.0PHP ^7.1

v2.0.0PHP ^7.2

v2.1.0PHP ^7.2|^7.3|^7.4|^8.0

v2.4.0PHP ^7.2|^7.3|^7.4|^8.0|^8.1|^8.2

### Community

Maintainers

![](https://www.gravatar.com/avatar/f6a58d95e2d77975f0b1ef1a94ae21bc1f4e292fb55e2b68b141328ecdbbe386?d=identicon)[lukehebb](/maintainers/lukehebb)

---

Top Contributors

[![asantibanez](https://avatars.githubusercontent.com/u/5126648?v=4)](https://github.com/asantibanez "asantibanez (33 commits)")[![lukehebb](https://avatars.githubusercontent.com/u/3617309?v=4)](https://github.com/lukehebb "lukehebb (5 commits)")[![laravel-shift](https://avatars.githubusercontent.com/u/15991828?v=4)](https://github.com/laravel-shift "laravel-shift (1 commits)")[![satoblacksato](https://avatars.githubusercontent.com/u/18121577?v=4)](https://github.com/satoblacksato "satoblacksato (1 commits)")

---

Tags

asantibanezlivewire-selectbangsystems

###  Code Quality

TestsPHPUnit

### Embed Badge

![Health badge](/badges/bangsystems-livewire-select/health.svg)

```
[![Health](https://phpackages.com/badges/bangsystems-livewire-select/health.svg)](https://phpackages.com/packages/bangsystems-livewire-select)
```

###  Alternatives

[asantibanez/livewire-select

Livewire dropdown select component

520138.4k2](/packages/asantibanez-livewire-select)[jantinnerezo/livewire-alert

This package provides a simple alert utilities for your livewire components.

8041.2M20](/packages/jantinnerezo-livewire-alert)[spatie/laravel-livewire-wizard

Build wizards using Livewire

4061.0M4](/packages/spatie-laravel-livewire-wizard)[asantibanez/livewire-calendar

Laravel Livewire calendar component

96883.3k1](/packages/asantibanez-livewire-calendar)[kirschbaum-development/commentions

A package to allow you to create comments, tag users and more

12369.2k](/packages/kirschbaum-development-commentions)[asantibanez/livewire-resource-time-grid

Laravel Livewire resource time grid component

2298.1k](/packages/asantibanez-livewire-resource-time-grid)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)