Components / Color Picker

Color Picker

An inline picker over the Navius ColorPicker primitive: a saturation / value area with a ring thumb, a rainbow hue slider, an optional alpha slider, a preview swatch with a hex field, and an optional preset swatch grid. Drag the area, slide the hue, or pick a swatch below. This preview is the real component running in WebAssembly.

Examples

Value: #6d28d9

razor

<ZitsColorPicker @bind-Value="_color" Swatches="_swatches" />

@code {
    string _color = "#6d28d9";
    IReadOnlyList<string> _swatches = new[] { "#ef4444", "#10b981", "#3b82f6" };
}

Installation

Terminal bash

navius add color-picker

API reference

ZitsColorPicker:

Prop	Type	Default
Value	string?	null
ValueChanged	EventCallback<string>	-
DefaultValue	string?	null
Format	string	"hex"
AlphaEnabled	bool	false
Swatches	IReadOnlyList<string>?	null
Disabled / ReadOnly	bool	false
Name	string?	null