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