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

Default (native) mode:

• 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

Popover mode:

• The swatch is a <button> with aria-haspopup="dialog" and a live aria-expanded
• The panel is a role="dialog" with an accessible name, and focus is trapped inside it while it is open — opening the panel moves focus onto the saturation/brightness plane, and closing it returns focus to the swatch that opened it
• The panel renders at the end of the document (it is positioned relative to the swatch rather than nested inside it), so the focus handling above is what keeps it reachable — a reader never tabs through the rest of the page to get to the sliders
• The plane and the hue/opacity sliders are role="slider" elements with aria-valuetext / aria-valuenow, so the current color is announced as it changes
• Copying and clearing announce themselves through their own polite live regions

Keyboard Interaction

Default (native) mode:

Popover mode:

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