Bootstrap Color Selector using Livewire
Bootstrap 5 New Livewire
Demo
Color
This is a pro component. Get Livewiredemos pro access to view / download the component code.
Component Class
<?php
namespace App\Http\Livewire;
use Livewire\Component;
class MultipleColorChoser extends Component
{
public array $colorOptions = ['blue', 'red', 'pink', 'yellow', 'orange', 'dark', 'green', 'purple', 'white'];
public $colors = [];
public function render()
{
return view('livewire.multiple-color-choser');
}
public function clearColors(){
$this->colors = [];
}
}
Component View File
<div class="col-4">
<h5 class="text-gray-800 mt-4 mb-3 fw-bolder">Color @if(count($colors) > 0)<a wire:click="clearColors" class="fs-6 ms-2 cursor-pointer">clear</a>@endif</h5>
<div class="d-flex flex-wrap">
@foreach($colorOptions as $color)
<div class="{{$color}}-color me-2">
<input type="checkbox" class="btn-check" id="color-{{$color}}" value="{{$color}}" autocomplete="off" wire:model="colors">
<label for="color-{{$color}}">
<div class="bg-{{$color}} text-center pt-1 rounded-circle shadow {{ (in_array($color, $colors)) ? 'border border-dark' : ''}}" style="width:30px; height:30px">{!! (in_array($color, $colors)) ? '<i class="fas fa-check text-white"></i>' : '' !!}</div>
</label><br>
</div>
@endforeach
</div>
<div class="mt-5">You Chose {{implode(', ', $colors)}}</div>
</div>
</div>
Usage
@livewire('multiple-color-choser')
Documentation
This is a simple multiple color choser livewire component. You can make use of this component in multiple places like filters for products.
Implementation if very simple, inside the component class we have defined the colorOptions
array that user can choose from and another array variable named colors
in which the user chosen colors will be stored.
On the fronend we are converting checkbox into color circles using Bootstrap-5 Toggle Button
Download Code
Download the Component class, view file and other required files
This is a pro component. Get Livewiredemos pro access to view / download the component code.