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 aria-label="Accent color" 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 aria-label="Brand color" 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.

The binding works the same with popover: wire:model and x-model go to the field that carries the picked value, and every other attribute you write on the tag, such as a data-* hook or an x-on:change listener, goes to the element around the picker, where the field's input and change events reach it.

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
    aria-label="Brand color"
    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') }}" defer></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
    aria-label="Brand color"
    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.

<x-wirekit::color-picker name="brand" value="#ab35ff" hint="Hex, rgb() or a named color." error="This color falls below 4.5:1 against your background." />

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
• error and hint render one message region below the swatch (the error replaces the hint), and the control points at whichever one is on the page with aria-describedby — an error also sets aria-invalid="true"

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
• A copy that fails, on a page served without HTTPS where browsers offer no clipboard, or when the browser refuses the permission, says so: the button shows a warning instead of the checkmark, and an alert says "Copy failed"
• A value the text field cannot read marks the field invalid and says why under the row, with an example the field reads: the last color it read, in the format the toggle shows, "Not a valid color value. Example: #3b82f6". The same sentence describes the field for a screen reader
• The copy and clear buttons are named after the picker, by the name its swatch carries: the aria-label, the label of the field around it, or the name built from name. A picker with name="background" offers "Copy Background color" and "Clear Background color", and one with none of them "Copy color value" and "Clear color"

Keyboard Interaction

Default (native) mode:

Native mode has no text field: the only text input this component renders is in popover mode, so a reader who cannot use the OS color dialog has no way to type a value there. Use popover when a typed value has to be possible.

Popover mode:

Pitfalls

• Don't rely on the native color picker for brand-locked palettes. It exposes the entire RGB gamut. For a constrained palette, render each swatch as a real control: <x-wirekit::radio name="brand-color" value="#0f766e"> gives the whole set one tab stop and arrow-key selection, which is what a pick-one-of-N palette is; <x-wirekit::button> works where a single click is enough. A presentational component — anything whose root is a <span> — carries a click handler for the mouse only: it is not in the tab order, and Enter and Space do nothing.
• 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