How to Create Select2 Dropdown in Laravel Livewire


In this blog, we are going to understand how to create Select2 Dropdown in Laravel Livewire. For Seclect2 in Livewire, we will be using Select2 Package.

Select2 JavaScript-based package provides an uncomplicated solution for creating a customizable select box along with top-notch support for searching, tagging, remote data sets, infinite scrolling, and many other profoundly utilized options.

Here are the steps we will be using to create Laarvel Livewire Select2 Dropdown,

  • Step 1: Create Laravel Project
  • Step 2: Add Livewire Package
  • Step 3: Create Select2 Component with Livewire
  • Step 4: Create Route
  • Step 5: Set Up Blade View
  • Step 6: Test Demo App

Create Laravel Project

Let's begin the first step by creating laravel project using the console:

composer create-project --prefer-dist laravel/laravel select2-demo

Add Livewire Package

Livewire is a flexible full-stack framework for the Laravel ecosystem, which helps build compelling interfaces without undervaluing the ease of Laravel.

So, execute the provided command to add the livewire package in Laravel.

composer require livewire/livewire

Create Select2 Component with Livewire

Now, we have to create a Livewire component for building a dynamic select2 dropdown.

Let's create this select2 component with command line,

php artisan make:livewire select2-dropdown

There have been two files generated concurrently; here are the location of the file:


Subsequently, open the app/Http/Livewire/Select2Dropdown.php file and update the suggested code:

namespace App\Http\Livewire;
use Livewire\Component;
class Select2Dropdown extends Component
    public $ottPlatform = '';
    public $webseries = [
        'Wanda Vision',
        'Money Heist',
        'Stranger Things'
    public function render()
        return view('livewire.select2-dropdown')->extends('');

Further, again open the app/resources/views/livewire/select2-dropdown.blade.php file and update the provided code:

    <div wire:ignore>
        <select class="form-control" id="select2-dropdown">
            <option value="">Select Option</option>
            @foreach($webseries as $item)
            <option value="{{ $item }}">{{ $item }}</option>
    $(document).ready(function () {
        $('#select2-dropdown').on('change', function (e) {
            var data = $('#select2-dropdown').select2("val");
            @this.set('ottPlatform', data);

Create Route

Next, create a route for accessing the select2 dropdown for dynamic search and select the select options. So, open and update the routes/web.php file:

use Illuminate\Support\Facades\Route;
use App\Http\Livewire\Select2Dropdown;
| Web Routes
Route::get('/', Select2Dropdown::class);

Set Up Blade View

In the last step, create a new folder, name it layouts, keep it inside the views directory, also create an app.blade.php file within.

Hence, open resources/views/layouts/app.blade.php and update the file:

<!DOCTYPE html>
    <title>Laravel 8 Livewire Dropdown Example</title>
    <link href="//" rel="stylesheet" id="bootstrap-css">
    <script src="//"></script>
    <link href="" rel="stylesheet" />
    <script src="//"></script>
    <script src=""></script>
    <div class="container">

Test Demo App

Everything has been done; hence it’s time to check out what we have built. Consider starting the laravel app using the artisan command.

Consequently, open the console and execute the provided command:

php artisan serve

As you can see on the console base url manifested after invoking starting Laravel development server, hence use the following URL on the browser to run the Laravel livewire select2 demo app:


I hope this will help you understand to create Select2 Dropdown in Laravel Livewire. If you have any doubt please let me know in comments.