Color Picker

A wrapping grid of colour chips with arrow-key roving focus, a native custom-colour tile and an optional hex field.

tsx

1import { ColorPicker, ColorSwatch } from "@pestoui/core"

Palette

Uncontrolled — the picker holds its own value. The dashed tile opens the OS colour dialog for anything outside the palette.

Pass value and onValueChange to own the state. showInput adds a preview tile and a hex input that accepts the #rgb shorthand.

ColorSwatch on its own — a squircle button that carries the fill in style, never in a class.

Prop	Type	Default	Description
value	string	—	Controlled hex value. Omit it to let the picker manage its own.
defaultValue	string	colors[0]	Starting hex when uncontrolled.
onValueChange	(hex: string) => void	—	Fires with the six-digit hex on every commit — chip, custom tile or a valid hex typed into the field.
colors	string[]	12 defaults	The palette offered as chips. Any CSS colour string works.
showCustom	boolean	true	Append the dashed tile that opens the native colour input.
showInput	boolean	false	Show the preview tile and hex field below the grid.
size	"sm" \| "default" \| "lg"	"default"	Chip size — set on ColorPicker for the whole grid, or on a lone ColorSwatch.
color	string	—	ColorSwatch only — the fill, applied as an inline background.
selected	boolean	false	ColorSwatch only — draws the selected-green ring and check disc, and sets aria-pressed.
onSelect	(color: string) => void	—	ColorSwatch only — called with the chip's colour unless the click handler prevented default.
label	string	color	ColorSwatch only — accessible name and tooltip; falls back to the hex string.

Pesto UI · 117 documented components