Color Picker

RzColorPicker is an SSR-first RizzyUI form component that integrates the Coloris color picker through Alpine.js. It renders a standard input for HTML form posts while progressively enhancing the experience with client-side color selection, swatches, accessibility labels, and runtime configuration updates.

Full Featured (Hex + Swatches)

A complete starter setup that keeps Hex format, enables alpha, shows reusable swatches, and includes close/clear controls. You can open the picker by clicking either the input or the color thumbnail.

Event Viewer

Source

<EditForm Model="_model">
    <Field>
        <FieldLabel For="@(() => _model.BrandColor)">Brand Color</FieldLabel>
        <RzColorPicker For="@(() => _model.BrandColor)"
                       Value="@_model.BrandColor"
                       Format="ColorFormat.Hex"
                       Alpha
                       Swatches="@_swatches"
                       CloseButton
                       ClearButton />
    </Field>
</EditForm>

With Alpha + RGB

Enable alpha support and output values in RGB format.

Source

<RzColorPicker For="@(() => _model.OverlayColor)"
               Value="@_model.OverlayColor"
               Alpha="true"
               Format="ColorFormat.Rgb" />

Swatches Only

Render only preset swatches while still allowing clear and close actions.

Source

<RzColorPicker For="@(() => _model.AccentColor)"
               Value="@_model.AccentColor"
               Swatches="@_swatches"
               SwatchesOnly="true"
               CloseButton="true"
               ClearButton="true" />

Thumbnail Position

Choose whether the thumbnail appears at the start or end of the input group. The thumbnail is also a picker trigger, matching common color-input UX conventions.

Source

<RzColorPicker For="@(() => _model.StartThumbColor)"
               Value="@_model.StartThumbColor"
               ThumbnailPosition="ColorThumbnailPosition.Start" />

<RzColorPicker For="@(() => _model.EndThumbColor)"
               Value="@_model.EndThumbColor"
               ThumbnailPosition="ColorThumbnailPosition.End" />

Component Parameters

The primary configuration options on RzColorPicker.

Parameter	Type	Default	Description
`Value`	`string?`	`null`	Current color value rendered into the input.
`For`	`Expression<Func<string>>?`	`null`	Connects the picker to form metadata and validation.
`Format`	`ColorFormat`	`Hex`	Output format sent to Coloris (`Hex`, `Rgb`, or `Hsl`).
`Alpha`	`bool`	`false`	Enables opacity selection.
`Swatches`	`IEnumerable<string>?`	`null`	Optional swatch list shown in the Coloris dialog.
`SwatchesOnly`	`bool`	`false`	Limits selection to swatches only.
`CloseButton`	`bool`	`false`	Shows the dialog close button.
`ClearButton`	`bool`	`false`	Shows the dialog clear button.
`Placeholder`	`string?`	`"Select a color"`	Input placeholder text (localized by default).
`ThumbnailPosition`	`ColorThumbnailPosition`	`Start`	Places the thumbnail at the start or end of the input group.
`ComponentAssetKeys`	`string[]`	`["Coloris", "ColorisCss"]`	Logical asset keys resolved through `RizzyUIConfig.AssetUrls`.

Alpine.js API

RzColorPicker uses the Alpine component rzColorPicker with key-based expressions only (CSP-safe). The root exposes methods such as handleInput, openPicker, and updateConfiguration(config).

When the color changes, RzColorPicker dispatches a custom DOM event named rz:colorpicker:on-change (also available as Constants.Events.ColorPickerOnChange in C#).

Event Detail Field	Description
`rzColorPicker`	Reference to the Alpine `rzColorPicker` component instance.
`updateConfiguration(config)`	Method reference you can call to update the active Coloris instance and the local component config.
`el`	Reference to the underlying input element (`this.$refs.input`).

To close the currently active Coloris dialog from your own scripts, use the global API:

Source

// Close the dialog
Coloris.close();

// Close the dialog and revert the color to its original value
Coloris.close(true);

Setup

When RzColorPicker is rendered, it dynamically loads the third-party Coloris JavaScript from jsdelivr.net using the configured asset URLs.

To override the defaults (for a newer CDN path or local/self-hosted delivery), customize AssetUrls in Program.cs when registering RizzyUI services:

Source

builder.Services.AddRizzyUI(config =>
{

    config.AssetUrls["Coloris"] = "https://cdn.jsdelivr.net/gh/mdbassit/Coloris@latest/dist/coloris.min.js";
});

Localization

RzColorPicker uses the following localization keys from RizzyLocalization.en.resx.

Localization Key	Default Value
`RzColorPicker.DefaultPlaceholder`	Select a color
`RzColorPicker.A11y.Open`	Open color picker
`RzColorPicker.A11y.Close`	Close color picker
`RzColorPicker.A11y.Clear`	Clear selected color
`RzColorPicker.A11y.Marker`	Saturation: {s}. Brightness: {v}.
`RzColorPicker.A11y.HueSlider`	Hue slider
`RzColorPicker.A11y.AlphaSlider`	Opacity slider
`RzColorPicker.A11y.Format`	Color format
`RzColorPicker.A11y.Swatch`	Color swatch {i}: {swatch}
`RzColorPicker.A11y.Input`	Color value field
`RzColorPicker.A11y.Instruction`	Saturation and brightness selector. Use arrow keys to select.