Components

Color Picker

Accessible colour selection with a hue slider, a validating hex field and a preset swatch palette.

php artisan blatui:add color-picker

<x-ui.color-picker name="brand_color" value="#6366f1" />

Inline

<x-ui.color-picker value="#22c55e" inline />

Swatches

<x-ui.color-picker
    name="accent"
    value="#0ea5e9"
    :swatches="['#0ea5e9', '#06b6d4', '#10b981', '#84cc16', '#facc15', '#fb923c', '#f43f5e', '#d946ef', '#8b5cf6', '#64748b']"
/>

Using with Livewire

wire:model

The examples above are the frontend (Blade + Alpine) usage. Inside a Livewire component, bind wire:model for two-way state — same component, no wrappers. Full Livewire guide →

app/Livewire/Demo.php

use Livewire\Component;

class Demo extends Component
{
    public string $color = '#6366f1';

    public function render()
    {
        return view('livewire.demo');
    }
}

resources/views/livewire/demo.blade.php

<x-ui.color-picker wire:model="color" />

API Reference

Props, slots and exposed methods for <x-ui.color-picker>.

Props

Prop	Type	Default	Description
`value`	`string`	`'#6366f1'`	The initial colour as a hex string (#rgb or #rrggbb). Normalized to lower-case #rrggbb on init.
`swatches`	`array`	—	Preset hex colours shown in the swatch grid. Falls back to a built-in 10-colour palette when omitted.
`inline`	`bool`	`false`	Render the picker panel inline (always visible) instead of inside a popover with a trigger button.
`disabled`	`bool`	`false`	Disable the trigger button (popover mode) so the panel cannot be opened.
`name`	`string`	—	When set, renders a hidden input with this name so the selected hex submits with a form.
`id`	`string`	—	Id for the hex text field. A random id is generated when omitted.

Methods

Available on the component's Alpine scope — call them from markup in the slot (e.g. @click="…").

Method	Description
`pick(hex)`	Select a colour by hex string (ignored when it does not parse). Used by the swatch buttons.
`setHue(h)`	Set the colour from a hue value (0–360) using the hue slider.
`commit(value)`	Validate and commit a typed hex value; only applied when it parses.