Color field

The Mishka Chelekom color field is a Phoenix LiveView component that wraps the color picker of the browser, an <input type="color">. A click on the swatch opens the picker of the browser or the operating system, and the chosen color is sent as a hex string such as #f4566e. Around the input it adds an optional label, a description and error messages.

The picker itself comes from the browser, so it looks different in each one. The component styles the swatch: its size, corners, border and optional circle shape.

<.color_field name="color" value="#000000" label="Color picker" />
<.color_field name="color" value="#f4566e" label="Pink color" />
<.color_field name="color" value="#6654ea" label="Pick a color" />

The value prop sets the color shown on the swatch. It must be a hex string with six digits, such as #6654ea. The default is #000000, and a value in any other format shows as black.

<.color_field name="color" value="#16a34a" label="Green" />
<.color_field name="color" value="#f59e0b" label="Amber" />
<.color_field name="color" value="#0ea5e9" label="Sky" />

The circle prop is a boolean. It turns the swatch into a circle and removes its border. The diameter is the height that size sets.

<.color_field name="color" circle size="small" />
<.color_field name="color" circle size="large" />
<.color_field name="color" circle />

The size prop sets the size of the swatch. extra_small is 1.75rem wide and 1rem high, small is 2rem by 1.25rem, medium is 2.25rem by 1.5rem and large is 2.5rem by 1.75rem. extra_large, the default, is 2.75rem by 2rem.

<.color_field size="extra_small" />
<.color_field size="small" />
<.color_field size="medium" />
<.color_field size="large" />
<.color_field size="extra_large" />

The color prop sets the color of the swatch border. The values are natural (the default), primary, secondary, success, warning, danger, info, misc, dawn, silver, base, white and dark. It does not change the color the user picks, and a circle has no border for it to color.

<.color_field color="natural" border="small" />
<.color_field color="primary" border="small" />
<.color_field color="success" border="small" />
<.color_field color="warning" border="small" />
<.color_field color="danger" border="small" />
<.color_field color="dark" border="small" />

The rounded prop sets the corner radius of the swatch. The values are none, extra_small, small (the default), medium, large and extra_large.

<.color_field rounded="none" />
<.color_field rounded="extra_small" />
<.color_field rounded="small" />
<.color_field rounded="medium" />
<.color_field rounded="large" />
<.color_field rounded="extra_large" />

The border prop sets the border width of the swatch. The values are none, extra_small (1px, the default), small (2px), medium (3px), large (4px) and extra_large (5px).

<.color_field border="none" />
<.color_field border="extra_small" />
<.color_field border="small" />
<.color_field border="medium" />
<.color_field border="large" />
<.color_field border="extra_large" />

The space prop sets the vertical space between the label, the description, the swatch and the error messages. The values are none, extra_small, small, medium (the default), large and extra_large.

<.color_field space="extra_small" />
<.color_field space="small" />
<.color_field space="medium" />
<.color_field space="large" />
<.color_field space="extra_large" />

The label prop adds a label above the swatch, and description adds a short help text under the label. Give the component an id, or pass a field, so the label is linked to the input and a click on it opens the picker. The description text is 12px by default, and description_class changes that.

<.color_field id="brand_color" name="brand_color" label="Brand color" description="Used for links and buttons" />

Other attributes go straight to the input. The useful ones for a color input are autofocus, disabled, form, required and title, together with aria-* attributes and the global HTML attributes Phoenix allows. A disabled swatch cannot be clicked and its value is not sent with the form.

<.color_field name="color" label="Disabled" disabled />
<.color_field name="color" label="Required" title="Choose a color" required />

Besides class, which styles the outer element, three props take classes for one part: input_class for the swatch, label_class for the label and description_class for the description. description_wrapper_class styles the box that holds the label and the description.

<.color_field name="color" label="Label with custom classes" label_class="text-rose-400" input_class="cursor-pointer" />

Pass a form field with field={@form[:brand_color]} and the component reads its id, name and value from it. The error messages of the field show under the swatch once the user has used it, and they go through the errors domain of your app's Gettext backend. Without a form, set name and value yourself and pass errors a list of messages. The error_icon prop names a Heroicon that is shown beside each message.

<.color_field field={@form[:brand_color]} label="Brand color" error_icon="hero-exclamation-circle" />

<.color_field name="brand_color" value="#6654ea" errors={["Pick a darker color"]} />