Mahmoud Al-HabashOpen to new projects
  • WorkWork
  • ServicesServices
  • LabLab
  • WritingWriting
  • ContactContact
Amman--:--عربي
Writing/Livewire

Building a Color Picker with Livewire v4

Create a color picker component.

1 February 20261 min readLivewireاقرأ بالعربية

On this page

  1. Component

Build a color picker component.

Component

php
@php
new class extends Livewire\Component {
    public string $color = '#3b82f6';
    public array $presets = ['#ef4444', '#22c55e', '#3b82f6', '#eab308', '#8b5cf6'];
}
@endphp

<div>
    <input type="color" wire:model.live="color">
    <input type="text" wire:model.live="color">
    
    @foreach($presets as $preset)
        <button 
            wire:click="$set('color', '{{ $preset }}')"
            style="background: {{ $preset }}">
        </button>
    @endforeach
</div>
All articles

Keep reading

  • Authorization in Livewire v4 Components1 February 20261 min read
  • Blaze Pre-Compiler: Massive Performance Gains in Livewire v41 February 20261 min read
  • Building a Bookmark Feature with Livewire v41 February 20261 min read