Color Picker

RzColorPickerProvider is an SSR-first headless provider that exposes shared Alpine state as colorPicker.* for composable trigger/input UIs. It integrates the Coloris color picker while letting you compose semantic triggers with RzColorPickerTrigger and previews with RzColorSwatch.

Swatch Trigger

The smallest headless setup: a swatch-only trigger that opens Coloris and updates shared colorPicker.value state.

Source

<RzColorPickerProvider Value="#22c55e"
                       Alpha="true"
                       Swatches="@_displaySwatches">
    <RzColorPickerTrigger class="inline-flex rounded-md p-1">
        <RzColorSwatch x-model="colorPicker.value" Size="ColorSwatchSize.Large" />
    </RzColorPickerTrigger>
</RzColorPickerProvider>

Swatches Only

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

Source

<RzColorPickerProvider Value="@_model.AccentColor"
                       Swatches="@_swatches"
                       SwatchesOnly="true"
                       CloseButton="true"
                       ClearButton="true">
    <RzColorPickerTrigger AsChild="true">
        <button type="button" class="inline-flex h-9 items-center gap-2 rounded-md border px-3 text-sm">
            <RzColorSwatch x-model="colorPicker.value" Size="ColorSwatchSize.Small" />
            <span x-text="colorPicker.value"></span>
        </button>
    </RzColorPickerTrigger>
    <input type="text" x-model="colorPicker.value" />
</RzColorPickerProvider>

Composable Input (EditForm)

Build custom input layouts with RzInputGroup. These two fields show swatch triggers placed both before and after the text input, while still binding value through x-model="colorPicker.value".

Source

<EditForm Model="_model">
    <Field>
        <FieldLabel For="@(() => _model.CustomStartColor)">Swatch at Start</FieldLabel>
        <RzColorPickerProvider Value="@_model.CustomStartColor" Format="ColorFormat.Hex" Alpha="true" Swatches="@_swatches">
            <RzInputGroup>
                <RzColorPickerTrigger>
                    <InputGroupAddon Align="InputGroupAddonAlign.InlineStart" class="pl-0">
                        <RzColorSwatch x-model="colorPicker.value" />
                    </InputGroupAddon>
                </RzColorPickerTrigger>
                <InputGroupInput For="@(() => _model.CustomStartColor)" x-model="colorPicker.value" />
            </RzInputGroup>
        </RzColorPickerProvider>
    </Field>
</EditForm>

Theme Picker Buttons

Three isolated provider instances in one form. Each trigger button renders a leading swatch and current color, with hidden named inputs for standard HTML post payloads.

Source

<form class="space-y-4">
    <RzColorPickerProvider Value="#386fc7" Alpha="true">
        <RzColorPickerTrigger AsChild="true">
            <RzButton type="button" Variant="ThemeVariant.Accent" Outline class="h-9 items-center gap-2 px-3">
                <RzColorSwatch x-model="colorPicker.value" Size="ColorSwatchSize.Small" />
                <span x-text="colorPicker.value"></span>
            </RzButton>
        </RzColorPickerTrigger>
        <input type="hidden" name="themePrimary" x-model="colorPicker.value" />
    </RzColorPickerProvider>

    <RzButton type="button" Disabled="true">Save Theme</RzButton>
</form>

Component Parameters

The primary configuration options on RzColorPickerProvider when building custom Color Picker experiences.

Parameter	Type	Default	Description
`ChildContent`	`RenderFragment?`	`null`	Content rendered within provider scope.
`Value`	`string?`	`null`	Initial color value loaded into `colorPicker.value`.
`Format`	`ColorFormat`	`Hex`	Output format used by Coloris.
`Alpha`	`bool`	`false`	Enables opacity selection.
`Swatches`	`IEnumerable<string>?`	`null`	Optional preset swatch list.
`SwatchesOnly`	`bool`	`false`	Restricts selection to configured swatches.
`CloseButton`	`bool`	`false`	Shows the Coloris close button.
`ClearButton`	`bool`	`false`	Shows the Coloris clear button.
`ComponentAssetKeys`	`string[]`	`["Coloris"]`	Logical asset keys resolved through `RizzyUIConfig.AssetUrls`.

Alpine.js API

RzColorPickerProvider exposes colorPicker.value, colorPicker.open, colorPicker.setValue(value), colorPicker.getValue(), and colorPicker.updateConfiguration(config).

On color changes, the provider dispatches rz:colorpicker:onchange (also available as Constants.Events.ColorPickerOnChange in C#).

Event Detail Field	Description
`colorPicker`	Reference to provider Alpine state (including `value` and helper methods).
`updateConfiguration(config)`	Method to patch current Coloris runtime configuration for this provider.
`el`	Reference to this provider's proxy text input anchor.
`providerEl`	The provider Alpine root element.

Source

// Close the active Coloris dialog
Coloris.close();

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

Setup

RzColorPickerProvider loads Coloris JavaScript from configured asset URLs at runtime.

To override default sources (CDN/self-hosted), configure AssetUrls during service registration:

Source

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

Localization

RzColorPickerProvider uses Coloris accessibility strings from RizzyLocalization.en.resx.

Localization Key	Default Value
`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.