Inputs
ColorPicker
A full color picker — saturation/lightness gradient, hue strip, preset swatches, and a format-aware text input — for theme customization and design-tool UIs.
ColorPickerPreview
#2a78d6
Usage
tsx
import { ColorPicker } from "@vesture/react";
function Example() {
const [color, setColor] = useState("#2a78d6");
return <ColorPicker value={color} onChange={setColor} format="hsl" />;
}Behavior
- value/defaultValue/onChange are always hex, regardless of the configured display format — format only controls how the text input reads and parses (hex, rgb(), or hsl()).
- Dragging the gradient square sets saturation (x) and lightness (y); dragging the hue strip sets hue. Both support arrow-key nudging (Shift for a 10-unit step) once focused.
- presets defaults to the library's own chart.series1–8 categorical palette; pass your own array to swap it out. Clicking a swatch commits that color immediately.
- Typing in the text field live-updates the picker on every valid keystroke; an invalid value reverts to the last valid one on blur, the same pattern DatePicker uses for typed dates.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value / defaultValue / onChange | string | — | Controlled / uncontrolled hex value, e.g. "#2a78d6". |
| presets | string[] | chart.series1–8 | Quick-select swatch row. |
| format | "hex" | "rgb" | "hsl" | "hex" | Display/parse format for the text input — the emitted value is always hex. |
| disabled | boolean | — | Disables the trigger swatch and every control inside the popover. |
| aria-label | string | "Color" | Accessible name for the trigger button and the picker panel. |