Native color picker paired with a hex readout. Mirrors Fluxon's color_input/1
and matches Form.input chrome (label, description, help, errors).
<.color_input field={@form[:brand]} label="Brand color" />
<.color_input name="theme[primary]" value="#4f46e5" label="Primary" />Renders a real <input type="color"> as the submitted control (styled as a
swatch) alongside a read-only monospace hex display, so it works with no JS.
The public surface — field/name/value, label/sublabel/description,
help_text, errors, size, disabled — matches the sibling inputs, so a
use Fluxon app can swap imports without template changes.
Summary
Functions
Attributes
id(:any) - Element id; derived from field when omitted. Defaults tonil.name(:any) - Form input name; derived from field when omitted. Defaults tonil.value(:any) - Current color as a#rrggbbhex string. Defaults tonil.label(:string) - Primary label above the control. Defaults tonil.sublabel(:string) - Secondary label line under the primary label. Defaults tonil.description(:string) - Helper text under the label stack. Defaults tonil.help_text(:string) - Trailing help line under the field when no errors. Defaults tonil.errors(:list) - Validation messages; derived from field when used. Defaults to[].size(:string) - Control density / type scale. Defaults to"md". Must be one of"xs","sm","md","lg", or"xl".class(:any) - Extra classes merged onto the root element. Defaults tonil.field(Phoenix.HTML.FormField) - Form field; derives id, name, value, and errors. Defaults tonil.disabled(:boolean) - Render disabled and non-interactive. Defaults tofalse.- Global attributes are accepted. Arbitrary HTML/
phx-*attributes passed through to the color input. Supports all globals plus:["autofocus", "required", "form", "list", "phx-change", "phx-blur", "phx-focus", "phx-target"].