PhiaUi.Components.ColorPicker (phia_ui v0.1.17)

Color picker component with native <input type="color">, optional swatches, and a live value display.

Wires up to the PhiaColorPicker JavaScript hook which:

Syncs the value display span in real time as the user drags the color wheel.
Fires a pushEvent to the parent LiveView whenever the selected colour changes (both from the native input and from swatch clicks).
Handles swatch clicks by updating the colour input and firing the event.

Pure HEEx structure — the JS hook is the only dynamic layer.

Examples

<%!-- Basic colour picker --%>
<.color_picker id="theme-color" value={@color} on_change="update_color" />

<%!-- With swatches and hex format --%>
<.color_picker
  id="brand-color"
  value={@color}
  format={:hex}
  swatches={["#FF5733", "#4CAF50", "#2196F3"]}
  on_change="pick_color"
/>

LiveView event handler

The hook pushes {value: "#rrggbb"} to the server:

def handle_event("update_color", %{"value" => color}, socket) do
  {:noreply, assign(socket, color: color)}
end

Accessibility

Each swatch button carries an aria-label identifying the colour value so that screen-reader users can distinguish them.

Summary

Functions

color_picker(assigns)

Renders a colour picker with a native colour input, a live hex value display, and optional colour swatches.

Functions

color_picker(assigns)

Renders a colour picker with a native colour input, a live hex value display, and optional colour swatches.

Example

<.color_picker
  id="accent-color"
  value={@accent}
  swatches={["#6366F1", "#EC4899", "#10B981"]}
  on_change="set_accent"
/>

Attributes

id (:string) (required) - Unique DOM id for the component root and used to derive the input id.
value (:string) - Initial/current hex colour string, e.g. "#FF5733". Defaults to "#000000".
on_change (:string) - LiveView event name pushed to the server when the colour changes. Defaults to nil.
format (:atom) - Colour format. Currently stored for future server-side conversion; default is :hex. Defaults to :hex. Must be one of :hex, or :rgb.
swatches (:list) - List of hex colour strings rendered as quick-pick swatch buttons. Defaults to [].
class (:string) - Additional CSS classes merged via cn/1. Defaults to nil.
Global attributes are accepted. HTML attributes forwarded to the root container <div>.