Color Picker

The <x-wirekit::color-picker> component wraps the native <input type="color"> in a circular swatch with a live hex value readout. The browser provides its OS-level color dialog on click.

Usage

<x-wirekit::color-picker name="brand" value="#ab35ff" />

By default the component wraps the native <input type="color"> — the OS color dialog, byte-for-byte the same as previous versions.

Popover Mode

Add popover for a custom, design-system-consistent picker that opens in a panel: a saturation/value plane, a hue slider, an alpha slider, a format-aware text field (cycle HEX → RGB → HSL → OKLCH), a screen eyedropper (where supported), copy-to-clipboard, your preset swatches, and a recent-colors history (localStorage). It's a from-scratch HSV picker — no third-party library. The outer prop surface (name / value / disabled / form binding) is identical to native mode, so flipping popover on never breaks form submission.

The OKLCH format is WireKit's own color space — every --color-wk-* design token is an oklch() value — so set format="oklch" (or cycle to it) when you want output you can paste straight into a theme.

<x-wirekit::color-picker
    name="accent"
    popover
    value="#3b82f6"
    :presets="['#ef4444', '#f97316', '#eab308', '#22c55e', '#3b82f6', '#a855f7']"
/>

Hide sections you don't need:

<x-wirekit::color-picker name="brandbg" popover value="#22c55e" :with-alpha="false" :with-recents="false" />

Native picker on touch devices

On phones and tablets you may prefer the platform's own color dialog — the same sheet the default (non-popover) variant opens — over the custom panel. Opt in with native-on-mobile: on touch-primary devices (CSS pointer: coarse) the swatch then opens the native dialog, while desktop pointers keep the full popover:

<x-wirekit::color-picker name="accent" popover native-on-mobile value="#3b82f6" />

The native sheet picks opaque sRGB hex — the alpha slider, presets, format cycling, and eyedropper remain popover-only conveniences, so leave the flag off when those matter on mobile too.

Clear to "no color"

Add with-clear for a clear button in the panel that empties the bound value — useful when "no color selected" is a valid state in your form. Clearing sets the form field to an empty string and the swatch shows a "No color" state until the next pick. Because the native <input type="color"> can't represent an empty value, the clear button is popover only.

<x-wirekit::color-picker name="background" popover with-clear value="#3b82f6" />

Custom trigger

In popover mode a trigger slot replaces the default swatch with your own control — a labeled pill, a larger swatch, an icon. WireKit keeps the open toggle, the positioning anchor, and the aria-haspopup="dialog" wiring; the slot supplies the visible content, and its text/icon becomes the trigger's accessible name (so label an icon-only trigger yourself). Provide non-interactive content (text, icon, a styled span) — it renders inside WireKit's trigger button.

<x-wirekit::color-picker name="theme-color" popover value="#22c55e">
    <x-slot:trigger>
        <span style="display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem; border-radius: var(--radius-wk-md); border: 1px solid var(--color-wk-border); color: var(--color-wk-text); font-size: var(--text-wk-sm);">Choose color…</span>
    </x-slot:trigger>
</x-wirekit::color-picker>

Size Variants

<x-wirekit::row wrap>
    <x-wirekit::color-picker name="c1" value="#ef4444" size="sm" />
    <x-wirekit::color-picker name="c2" value="#10b981" size="md" />
    <x-wirekit::color-picker name="c3" value="#3b82f6" size="lg" />
</x-wirekit::row>

With Accessible Label

Pass a hidden accessible name via the default slot:

<x-wirekit::color-picker name="brand" value="#ab35ff">
    Brand color
</x-wirekit::color-picker>

The slot content is rendered with sr-only so sighted users see only the swatch, but assistive tech reads the label.

Livewire Integration

<x-wirekit::color-picker> keeps its current color in internal state seeded from the value prop, so when binding with Livewire pass the bound property as :value alongside wire:model to seed the initial color:

<x-wirekit::color-picker wire:model.live="brandColor" :value="$brandColor" />

Without :value the picker starts at #000000 until the user picks a color; wire:model keeps it in sync afterward. This is the framework-agnostic seeding pattern WireKit's stateful controls share — it works in plain Blade forms too.

Optimistic UI

Pass the name of the Livewire method the picker should call, and the color is sent the moment it is settled:

<x-wirekit::color-picker
    name="brand"
    popover
    :value="$brand"
    optimistic="saveBrandColor"
/>

Load wirekit-optimistic.js alongside whichever bundle you already use — below it, in your layout:

@wirekitScripts
<script src="{{ asset('vendor/wirekit/wirekit-optimistic.js') }}"></script>

Try it

The demo below runs the real path: the change shows immediately, the outline says it is provisional, and the server's answer either confirms it silently or takes it back.

{{-- In your app there is no host: your own Livewire component owns the method. --}}
<x-wirekit::color-picker
    name="brand"
    popover
    :value="$brand"
    optimistic="saveBrandColor"
/>

The <livewire:demos.…> wrapper above exists only on this site — it supplies the demo methods so the page can show a real round trip. The block under it is what you write.

"Settled" means the gesture finished, never a timer. Dragging across the saturation plane sends nothing while the pointer is down; the color goes out when you release it. A swatch, a recent, the eyedropper, an arrow-key nudge and a typed value each settle in one step and send immediately.

A refusal keeps the color rather than undoing it. The value field is typed, and undoing a failed save would delete what you wrote. The refused color therefore stays on screen and says it was not saved — which is recoverable, because the previous color is one click away in the recents strip.

The field is not marked invalid. aria-invalid means this value is wrong, and a save that failed on the network says nothing about the color you picked.

Popover mode only (popover). The default renders a native <input type="color">, whose value the browser owns — there is no seam there to hook.

Props

Accessibility

• Uses native <input type="color"> — full keyboard + AT support
• <label> wraps the swatch, allowing click-to-open on the visible circle
• Live value display uses aria-live="polite" for AT announcements on change
• focus-within ring on the swatch indicates keyboard focus

Keyboard Interaction

Pitfalls

• Don't rely on the native color picker for brand-locked palettes. It exposes the entire RGB gamut. For constrained palettes, render <x-wirekit::badge> swatches with wire:click.
• Don't store the value as rgba(). The component returns #rrggbb (sRGB hex). Store hex; convert to other spaces at render time.

Design Tokens

Config Defaults

The defaults live in config/wirekit.php under components.color-picker. Override them globally:

'components' => [
    'color-picker' => ['size' => 'md'],
],

Further Reading

• MDN: <input type="color">
• MDN: Hex color notation
• MDN: aria-live
• Can I Use: input type=color