Color Swatch

RzColorSwatch is an SSR-friendly visual primitive for previewing color values. It supports semantic sizing, alpha-aware checkerboard rendering, optional transparency suppression, and runtime control through Alpine.

Basic

A simple palette preview using default size swatches.

Source

<div class="flex gap-2">
    <RzColorSwatch Value="#ef4444" />
    <RzColorSwatch Value="#f97316" />
    <RzColorSwatch Value="#eab308" />
    <RzColorSwatch Value="#22c55e" />
    <RzColorSwatch Value="#3b82f6" />
</div>

Different Sizes

Render the same palette with Small, Default, and Large swatch sizes.

Source

<RzColorSwatch Value="#ef4444" Size="ColorSwatchSize.Small" />
<RzColorSwatch Value="#ef4444" Size="ColorSwatchSize.Default" />
<RzColorSwatch Value="#ef4444" Size="ColorSwatchSize.Large" />

Transparency Support

RzColorSwatch detects alpha-capable color values and overlays them on a checkerboard pattern by default. Set WithoutTransparency to suppress the pattern and render a solid swatch background.

Source

<RzColorSwatch Value="rgba(239, 68, 68, 0.8)" WithoutTransparency="true" />
<RzColorSwatch Value="rgba(239, 68, 68, 0.8)" />

Accessibility

The component renders with role="img" and always exposes an accessible name. If no AriaLabel is provided, localized fallbacks are used: "No color selected" when empty, otherwise "Color swatch: <value>".

Use Disabled="true" when a swatch should be non-interactive in your UI and include a descriptive AriaLabel when color meaning is contextual.

Color Format Support

RzColorSwatch accepts any value recognized by CSS.supports("color", value). Common examples include: hex (#ef4444, #RGBA, #RRGGBBAA), rgb()/rgba(), hsl()/hsla(), and modern CSS color functions (for example oklch()).

Invalid or unsupported values safely render as transparent rather than throwing runtime errors.

Transparency Detection

The Alpine implementation marks a value as alpha-capable when it matches one of these patterns: transparent, 4/8-digit hex notation, rgba(), hsla(), or slash-alpha syntax in functional colors. When detected and WithoutTransparency is false, the swatch composes the color over the checkerboard pattern.

Parameters

Parameter	Type	Default	Description
`Value`	`string?`	`null`	Color rendered by the swatch.
`Size`	`ColorSwatchSize`	`Default`	Size variant for the swatch.
`WithoutTransparency`	`bool`	`false`	Disables checkerboard alpha background composition.
`Disabled`	`bool`	`false`	Applies disabled visual treatment and marks the control as aria-disabled.
`AriaLabel`	`string?`	`null`	Optional custom accessible name. Falls back to localized defaults.

Alpine.js API

RzColorSwatch uses the Alpine component rzColorSwatch. You can access methods through Rizzy.$data(id) and invoke getValue() and setValue(value) at runtime.

Source

const swatch = Rizzy.$data('my-swatch-id');
const current = swatch.getValue();
swatch.setValue('rgba(14, 165, 233, 0.35)');