Select Dropdown – Laravel Anonymous Blade Component

Laravel comes with a powerful templating engine Blade which even allows us to use plain PHP code in our templates, unlike other templating engines. Blade template files use the .blade.php extension and stored in the resources/views directory, but you should know that you are not restricted to use the same directory or path to store your view, you have options to customize the view path.

In this topic, we will talk about how to create a select blade component that we can use wherever the select dropdown field is required.

Laravel Blade Anonymous Components

anonymous components provide a mechanism for managing a component via a single file. However, anonymous components utilize a single view file and have no associated class. To define an anonymous component, you only need to place a Blade template within your resources/views/components directory. For example, assuming you have defined a component at resources/views/components/alert.blade.php, you may simply render it like so:

<x-alert/>

So, let’s create an anonymous select component. 

First, create a directory named components/inputs inside the resources/views directory.

After that, we will create a blade file named select.blade.php inside components/inputs

Inside this file lets copy bellow code:

Lets create Select Dropdown an Anonymous Blade Component

@props([
            'selected' => '',
            'list' => [],
            'for',
        ])

        <select {{ $attributes->merge(['class' => 'form-control']) }} id="{{ $for }}" name="{{ $for }}">

            <option value="">Please select</option>

            @forelse ($list as $key => $value)
                <option value="{{$key}}" @if($selected == $key) selected @endif>{{$value}}</option>
            @empty

            @endforelse
        </select>

Above you can see, we have defined @props, props are default values like we define a variable with a default value. It’s the same as that. Let’s see what are those are

@props([
            'selected' => '', // we will pass a value to select a dropdown option like 2, and inactive option will be selected
            'list' => [], // an array to make select options like = [1=>'active', '2' =>'inactive']
            'for', // this will be used for label and id of select field like $for="mydropdown", becomes <select id="mydropdown"> or <label for="mydropdown">
        ])

We just created a component and let’s see how to use this

@php
   //first we need to define an array to make dropdown options, you can also pass this array from controller.
    $list = ['active' => 'Active', 'inactive' => 'Inactive'];
 @endphp
        
        <x-inputs.select for="package_status" name="status" selected="inactive"  :list=$list>

Bingo! Now you can use this component anywhere in your project. you don’t have to create a dropdown every time you need it. How simple and easy to use reusable blade component.