New
Color PickersSwatch Grid Picker
A radiogroup of preset colour swatches where the choice is marked by a ring and a check, not colour alone.
#color#swatch#grid
3 frameworksBeginner
Loading…
The classic saturation/brightness square, driveable by pointer and by arrow keys.
<!--
The classic saturation/value square: a white->hue gradient with a transparent->black
gradient over it, so x is saturation and y is value. The thumb is a role="slider"
with aria-valuetext set to the resolved hex, and it is keyboard-driveable with the
arrow keys - a 2D picker that is pointer-only is not accessible. Static snapshot.
-->
<div class="w-full max-w-xs">
<div class="relative h-44 w-full rounded-lg border border-black/10 dark:border-white/15" style="background:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,hsl(217 100% 50%))">
<span class="absolute h-4 w-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow ring-1 ring-black/30" style="left:80%;top:20%"></span>
</div>
<p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Selected <span class="font-mono font-semibold text-gray-900 dark:text-gray-100">#1e66d0</span></p>
</div>| Prop | Type | Default | Description |
|---|---|---|---|
hue | number | 217 | Hue |
onChange | (hex: string) => void | - | On change |
Set the `hue` and read the resolved hex from `onChange`. The pane is a `role="slider"` with `aria-valuetext` set to the hex and full arrow-key control, because a 2D picker reachable only by mouse locks out keyboard users.