Laravel 9 Multiple Tags Input Form Example

Assuming we have a posts table and tags table and posts have a relationship with tags. Now one post may have many tags and one tag may have many posts. So, at this time we need tags input in our form so that we can input multiple tags. Now we need to know how to add multiple tags in laravel?

In this tutorial, we will create a form so that we can input or we can add tags in laravel. So you will learn how to add tags in laravel from this tutorial. I will use select2 plugin to create this bootstrap tags input in laravel.

laravel-9-tags-input-example

So let's see the source code of how to use Bootstrap tags input in Laravel:

@extends('layouts.app')

@push('style')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<style>
    span.select2.select2-container.select2-container--classic{
        width: 100% !important;
    }
</style>
@endpush

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header" style="background: gray; color:#f1f7fa; font-weight:bold;">
                    Laravel 9 Tags Input Example Tutorial -  Laravelia
                </div>
                 <div class="card-body">                    
                    <form class="w-px-500 p-3 p-md-3" action="{{ route('user.store') }}" method="post" enctype="multipart/form-data">
                        @csrf
                        <div class="row mb-3">
                            <label class="col-sm-3 col-form-label">Framework</label>
                            <div class="col-sm-9 mt-3">
                                <select class="js-example-basic-single" multiple name="Framework[]">
                                </select>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <label class="col-sm-3 col-form-label"></label>
                            <div class="col-sm-9">
                                <button type="submit" class="btn btn-success btn-block text-white">Submit</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('script')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
    $('.js-example-basic-single').select2({
        theme: "classic",
        tags: true
    });
</script>
@endpush

Now if you submit this form, you will see the output:

{
  "_token": "Yv8GYMZZGbIDpB2GIbZFWGAboUHZGBudNYQaVyVv",
  "Framework": [
     "Laravelia",
     "Another Tag",
     "Test"
  ]
}

Read also: How To Add Datepicker With Bootstrap 5 In Laravel

Conclusion

Hope this bootstrap tags input tutorial will help. After completing this laravel 9 tags input example, your concept will be clear about input tags laravel. Hope this How to add multiple tags in laravel tutorial will clear your concept about how to add tags in laravel.

Laravel 9 Multiple Tags Input Form Example

Mahedi Hasan

Conclusion