Color Picker
proColor picker with hex/rgba/hsla output formats and preset swatches.
Overview
The Color Picker uses react-colorful to provide a full-featured color selection UI. Supports hex, RGBA, and HSLA output formats, preset color swatches, and a configurable popover position.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
name | String | "color" | Field name used in form data. |
label | String | "Color" | Label displayed above the picker. |
defaultColor | Color | "#6052FF" | Initial color value. |
colorFormat | Enum | "hex" | Output format: hex, rgba, or hsla. |
popoverPosition | Enum | "bottom-left" | Where the picker popup appears relative to the trigger. |
presetColors | Array | -- | Preset color swatches for quick selection. |
showInput | Boolean | true | Show hex/rgba/hsla text value in trigger. |
required | Boolean | false | Whether a color must be selected. |
Features
- Full color picker powered by react-colorful
- 3 output formats: hex, rgba, hsla
- Preset color swatches for quick selection
- 4 popover positions
- Per-channel editing for RGBA/HSLA
- Hidden <input> for native form submission
Tips
Use preset colors to offer brand-approved color options while still allowing custom selection.
Choose the output format that matches your backend needs (hex is most common).