Color Picker

A swatch that opens a popover for picking a hex color.

import { ColorPicker } from '@jbpark/ui-kit';

<ColorPicker value={color} onChange={setColor} showText />;

#1677FF

Props

Prop	Type	Default
`value`	`string`	-
`defaultValue`	`string`	`'#fff'`
`showText`	`boolean`	-
`disabled`	`boolean`	-
`onChange`	`(color: string) => void`	-
`open`	`boolean`	-
`defaultOpen`	`boolean`	-
`onOpenChange`	`(open: boolean) => void`	-
`className`	`string`	-

showText renders the current hex value next to the swatch. Works both controlled (pass value + onChange) and uncontrolled (pass defaultValue, or neither).

Props​

Props