Color Input

The Mishka Chelekom Headless Color Input is an unstyled Phoenix function component made of a hex text field, a swatch and a button that opens a color picker in a popover. It reuses the engine of the Headless Color Picker. A saturation and brightness area and a hue slider sit in a panel that is toggled with Phoenix LiveView JS commands, so the panel needs no extra hook. The swatch and the text field stay visible in a control row.

Typing a valid hex value updates the picker, and moving the picker updates the field. A hidden input carries the hex for form submission and fires an input event, so a surrounding form with phx-change sees every change. Each part takes a *_class attribute: control_class, preview_class, text_class, trigger_class, panel_class, area_class, thumb_class, controls_class and hue_class.

Pass name and the component renders a hidden input with that name. It always holds the current color as #rrggbb. form takes the id of a form when the component sits outside it. Because the hidden input fires input, phx-change on the form runs while the user drags in the area, moves the hue or types a hex.

<.form for={@form} id="color-form" phx-change="validate" phx-submit="save">
  <.color_input
    id="brand-color"
    name="color_demo[color]"
    value={@color}
    label="Brand color"
  />
  <button type="submit">Save</button>
</.form>

def handle_event("validate", %{"color_demo" => %{"color" => color}}, socket) do
  {:noreply, assign(socket, color: color, form: to_form(%{"color" => color}, as: :color_demo))}
end

def handle_event("save", %{"color_demo" => %{"color" => color}}, socket) do
  {:noreply, assign(socket, :saved, color)}
end

value is the starting color as a hex string and defaults to #3b82f6. The text field accepts three or six digits, with or without the #. Text that is not a valid hex is ignored until it parses. The hidden input and on_change always carry the color as lowercase #rrggbb. label becomes the aria-label of the text field and defaults to Hex color.

on_change names a LiveView event. It is pushed with %{"value" => "#rrggbb"} each time the user changes the color in the area, with the hue slider or by typing a valid hex. It goes to the LiveView or LiveComponent that renders the input. If the server later sends a different value, the picker adopts it.

The root carries data-part="root", data-value with the current hex, data-on-change, and data-dragging while the pointer is down in the area. The control row holds preview (a span with role="img"), text (the hex field) and trigger (a button). The panel holds the area, its area-thumb, and a controls element with the hue range input, which runs from 0 to 360. The hidden input exists only when you pass name.

The panel is closed until the trigger is pressed. The trigger toggles it with Phoenix.LiveView.JS and keeps aria-expanded in step. Clicking outside the component or pressing Escape closes it.

The trigger is a native button with aria-haspopup="dialog", aria-expanded and aria-controls pointing at the panel, and the panel has role="dialog". The swatch has role="img" and an aria-label with the color it was rendered with. The hue slider is a native range input, so the arrow keys work. The saturation and brightness area responds to the pointer only. Keyboard users can set a color by typing a hex value in the text field or moving the hue slider. This follows the WAI-ARIA Disclosure pattern.