Color Picker

<NaviusColorPicker @bind-Value="_color" Format="hex" class="w-60 space-y-3">
    <NaviusColorPickerArea class="h-32 w-full rounded-md" />
    <NaviusColorPickerHueSlider class="h-3 w-full rounded-full" />
    <div class="flex items-center gap-2">
        <NaviusColorPickerSwatch class="h-9 w-9 rounded-md border" />
        <NaviusColorPickerField class="h-9 w-full rounded-md border px-2 uppercase" />
    </div>
</NaviusColorPicker>

@code { private string? _color = "#4F46E5"; }

Features

• The root owns the color as HSVA and projects it to Value through Format (hex / rgb / rgba / hsl / hsla).
• The Area is a 2D slider (two grouped role="slider" thumbs, one per channel); the Hue and Alpha tracks each drive one channel. Every track is keyboard-drivable.
• The Field commits a typed hex / rgb / hsl string; the Swatches are an APG listbox of presets. All surfaces write back to the same model.
• Controlled via @bind-Value, uncontrolled via DefaultValue; a hidden input mirrors the projected string into form submission when Name is set.

Installation

Reference the Navius.Primitives package for the headless primitive, or vendor a styled version with the CLI: navius add copies the styled zits/ui component plus the brain files it depends on.

navius add color-picker

Anatomy

Import the parts and compose only the ones you need. The Area's hue-fill and the track gradients are rendered inline (they are intrinsic to each control).

@using Navius.Primitives.Components.ColorPicker

<NaviusColorPicker>
    <NaviusColorPickerArea />
    <NaviusColorPickerHueSlider />
    <NaviusColorPickerAlphaSlider />   @* only with AlphaEnabled *@
    <NaviusColorPickerSwatch />
    <NaviusColorPickerField />
    <NaviusColorPickerSwatches Colors="_presets">
        @* or explicit <NaviusColorPickerSwatchItem Value="#f00" /> children *@
    </NaviusColorPickerSwatches>
</NaviusColorPicker>

API Reference

Root

NaviusColorPicker. Owns the HSVA color and projects it to Value. Renders a div. Value is two-way bindable.

Data attributes

Area

NaviusColorPickerArea. The 2D saturation/value canvas: a role=group with a visible saturation slider and a visually-hidden brightness slider. Renders a div.

Data attributes

HueSlider

NaviusColorPickerHueSlider. The horizontal rainbow track with a role=slider thumb. Renders a div.

Data attributes

AlphaSlider

NaviusColorPickerAlphaSlider. The optional opacity track (transparent to opaque over a checkerboard). Only meaningful with AlphaEnabled. Renders a div.

Data attributes

Field

NaviusColorPickerField. A text field that commits a typed hex / rgb / hsl on change; a bad value flips data-invalid without disturbing the color. Renders an input.

Data attributes

Swatch

NaviusColorPickerSwatch. A non-interactive preview of the current color (the color is its accessible name). Renders a div with role=img.

Swatches

NaviusColorPickerSwatches. A preset grid (APG listbox); auto-renders SwatchItems from Colors, or takes explicit children. Renders a div with role=listbox.

Data attributes

SwatchItem

NaviusColorPickerSwatchItem. One preset (role=option); click / Space / Enter applies it. Renders a button.

Data attributes

Accessibility

The Area follows react-aria's ColorArea: a role="group" of two role="slider" thumbs, each exposing its own aria-valuenow, with aria-valuetext announcing the resulting color. The Hue and Alpha tracks are single sliders. The Swatches are an role="listbox" with a roving tabindex.

Keyboard interactions