ColorPicker

Color selection. The value is a hex string (8-digit hex when showAlpha is on). presets adds swatches below the picker.

Brand color

With presets + alpha


import { ColorPicker } from '@gg-software/ui';
 
<ColorPicker label="Brand color" value={color} onChange={(hex) => setColor(hex)} />
 
<ColorPicker
    label="With presets + alpha"
    showAlpha
    presets={['#E01A4F', '#2E9E5B', '#2D7FF9']}
/>

Props

Prop	Type	Default	Description
`value`	`string`	—
`defaultValue`	`string`	`#1677FF`
`onChange`	`((hex: string) => void)`	—
`showAlpha`	`boolean`	`false`	include an alpha (opacity) slider and 8-digit hex
`presets`	`string[]`	—	preset swatches shown below the picker
`placeholder`	`string`	`Pick a color`
`label`	`ReactNode`	—
`hint`	`ReactNode`	—
`error`	`ReactNode`	—
`required`	`boolean`	—
`size`	`"sm" \| "md" \| "lg"`	`md`
`status`	`"warning" \| "error"`	—
`disabled`	`boolean`	`false`
`id`	`string`	—
`name`	`string`	—
`className`	`string`	—

* required · generated from packages/ui/src/input/ColorPicker/ColorPicker.tsx