PHPackages                             victorybiz/laravel-simple-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. [Templating & Views](/categories/templating)
4. /
5. victorybiz/laravel-simple-select

ActiveLibrary[Templating & Views](/categories/templating)

victorybiz/laravel-simple-select
================================

Laravel Simple Select inputs component for Blade and Livewire.

v1.7.0(2y ago)13721.1k↓25%18[8 issues](https://github.com/victorybiz/laravel-simple-select/issues)[2 PRs](https://github.com/victorybiz/laravel-simple-select/pulls)MITBladePHP ^7.4|^8.0

Since Jun 24Pushed 2y ago5 watchersCompare

[ Source](https://github.com/victorybiz/laravel-simple-select)[ Packagist](https://packagist.org/packages/victorybiz/laravel-simple-select)[ Docs](https://github.com/victorybiz/laravel-simple-select)[ RSS](/packages/victorybiz-laravel-simple-select/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (10)Dependencies (4)Versions (24)Used By (0)

Laravel Simple Select
=====================

[](#laravel-simple-select)

Laravel Simple Select inputs component for Blade and Livewire.

[![Latest Version on Packagist](https://camo.githubusercontent.com/62b0f020196590fb5fed12456a55360efd3edafdff5046c17465a2949fdfc306/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f766963746f727962697a2f6c61726176656c2d73696d706c652d73656c6563742e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/victorybiz/laravel-simple-select)[![Total Downloads](https://camo.githubusercontent.com/23ee6b73e62a06df6cb7c5f89dffc658e18fcd80ce28206ca8cde8502c3afc0e/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f766963746f727962697a2f6c61726176656c2d73696d706c652d73656c6563742e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/victorybiz/laravel-simple-select)[![GitHub Actions](https://github.com/victorybiz/laravel-simple-select/actions/workflows/main.yml/badge.svg)](https://github.com/victorybiz/laravel-simple-select/actions/workflows/main.yml/badge.svg)

### DEMO PREVIEW

[](#demo-preview)

[![preview](https://github.com/victorybiz/laravel-simple-select/raw/main/demo.gif)](https://github.com/victorybiz/laravel-simple-select/raw/main/demo.gif)

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

[](#table-of-contents)

- [Laravel Simple Select](#laravel-simple-select)
    - [DEMO PREVIEW](#demo-preview)
    - [Table of Contents](#table-of-contents)
    - [Installation](#installation)
    - [Requirements](#requirements)
        - [JavaScript Dependencies](#javascript-dependencies)
    - [Usage](#usage)
        - [Simple Select](#simple-select)
        - [Custom Option Slot](#custom-option-slot)
        - [Custom Selected Slot](#custom-selected-slot)
        - [Custom Icon Slots](#custom-icon-slots)
        - [Dependent Selects](#dependent-selects)
        - [Event Listener](#event-listener)
    - [Positioning](#positioning)
    - [Props / Attributes](#props--attributes)
    - [Slots / Custom Display](#slots--custom-display)
    - [Events](#events)
    - [Testing](#testing)
    - [Changelog](#changelog)
    - [Contributing](#contributing)
        - [Security](#security)
    - [Credits](#credits)
    - [License](#license)
    - [Laravel Package Boilerplate](#laravel-package-boilerplate)

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

[](#installation)

You can install the package via composer:

```
composer require victorybiz/laravel-simple-select
```

**OPTIONAL**: To customize the component, you should publish the configuration file using the vendor:publish Artisan command. The configuration file will be placed in your application's config directory and view file in views directory respectively:

```
# Publish the config file
php artisan vendor:publish --tag=simple-select:config
```

```
# Publish the view file
php artisan vendor:publish --tag=simple-select:views
```

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

[](#requirements)

This package use the following packages.

- Laravel Livewire () is required when using Livewire `wire:model`
- TailwindCSS ()
- Heroicon ()
- Alpine.js v3 ()
- Popper.js ()

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

### JavaScript Dependencies

[](#javascript-dependencies)

For any external JavaScript dependency, we recommend you install them through npm or yarn, and then require them in your project's JavaScript. To install each of the dependencies this package makes use of, run this command in the terminal:

```
npm install -D alpinejs @popperjs/core
```

```
import Alpine from 'alpinejs'
import { createPopper } from "@popperjs/core";

window.Alpine = Alpine;
Alpine.start()

window.createPopper = createPopper;
```

If you’re using the compiled JavaScript, don’t forget to include CDN versions of the JavaScript Dependencies before it.

Usage
-----

[](#usage)

#### Simple Select

[](#simple-select)

```
@php
// Basic Arrays
$options = ['Nigeria', 'United Kingdom', 'United States'];
// Above will output Option Value e.g Nigeria
// Above will output Option Text e.g Nigeria

// OR

// Associative Arrays
$options = [
  ['value' => 'NG', 'text' => 'Nigeria'],
  ['value' => 'GB', 'text' => 'United Kingdom'],
  ['value' => 'US', 'text' => 'United States']
];
// Above will output Option Value e.g NG
// Above will output Option Text e.g Nigeria

// OR

// Using Associative Arrays data from a Model/Database,
// ensure to customize the field names with value-field="code" and text-field="name" properties of the component.
$options = [
  ['code' => 'NG', 'name' => 'Nigeria'],
  ['code' => 'GB', 'name' => 'United Kingdom'],
  ['code' => 'US', 'name' => 'United States']
];
// OR
$options = [
  ['code' => 'NG', 'name' => 'Nigeria', 'flag' => 'https://www.countryflags.io/ng/shiny/32.png'],
  ['code' => 'GB', 'name' => 'United Kingdom', 'flag' => 'https://www.countryflags.io/gb/shiny/32.png'],
  ['code' => 'US', 'name' => 'United States', 'flag' => 'https://www.countryflags.io/us/shiny/32.png']
];
// Above will output Option Value e.g NG
// Above will output Option Text e.g Nigeria

@endphp
```

```

```

#### Custom Option Slot

[](#custom-option-slot)

```

```

#### Custom Selected Slot

[](#custom-selected-slot)

```

```

#### Custom Icon Slots

[](#custom-icon-slots)

```

```

### Dependent Selects

[](#dependent-selects)

If you have a custom select whose options depend on the selection of another select, or just some kind of condition to be met, you can listen to the updated event of the livewire model of the main select to update the options in the dependent select.

```
// Expected data in Database
// Model Country::class
$countries = [
  ['code' => 'NG', 'name' => 'Nigeria'],
  ['code' => 'GB', 'name' => 'United Kingdom'],
  ['code' => 'US', 'name' => 'United States']
];
// Model State::class
$states = [
  ['id' => 1, 'country_code' => 'NG', 'name' => 'Abuja'],
  ['id' => 2, 'country_code' => 'NG', 'name' => 'Edo'],
  ['id' => 3, 'country_code' => 'NG', 'name' => 'Lagos'],
  ['id' => 4, 'country_code' => 'US', 'name' => 'Alaska'],
  ['id' => 5, 'country_code' => 'US', 'name' => 'Califonia'],
  ['id' => 6, 'country_code' => 'US', 'name' => 'Florida'],
  ['id' => 7, 'country_code' => 'GB', 'name' => 'Belfast'],
  ['id' => 8, 'country_code' => 'GB', 'name' => 'London'],
  // ...
];
```

Create a livewire component as the form page

```