| Name | Description | Default | Type |
|---|---|---|---|
label* | label for the color picker control | | ReactNode |
additionalInfo | Button when clicked will show additional information on the color picker | | { content: string | Element; heading: string;} |
alpha | Enables alpha slider. | false | boolean |
className | Additional CSS classes. | | string |
disabled | Disable the control. | | boolean |
id | Sets DOM id for the control and associates label element via 'for' attribute. If an id is not passed, a random id will be generated for any render. | | string |
info | It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. | | ReactNode |
inline | Layout field elements inline in a row. | | boolean |
labelHidden | Visually hides the label region. | | boolean |
name | Sets html name attribute for the underlying control. Useful for mapping to a data field. | | string |
onBeforeClose | | () => void | |
onChange | onChange event handler that gets called on change of value. | | ColorChangeHandler |
onClick | Called when the underlying input element is clicked. This should be rarely if ever used. | | MouseEventHandler<HTMLInputElement> |
readOnly | Makes the input non editable and non clickable. The browser defaults to false. | | boolean |
ref | Ref placed on the input element. | | Ref<HTMLInputElement> |
required | Indicate if the field is required. The browser defaults to false. | | boolean |
status | Set visual state based on a validation state. | | 'error' |'pending' |'success' |'warning' |
swatchOnly | Show color swatch without hex value display. | false | boolean |
value | Color picker value in hex | "#000000" | string |
ColorPicker
core package3.2.2
Note: All components shown on this site are supported by the Constellation design system. To learn how to configure Theme Cosmos, visit Pega Community.
The ColorPicker input allows a user to select any color either from a manual entry or from an interactive gradient. The ColorPicker component supports manual inputs of RGB, HSL, and hexadecimal format.
Usage
The ColorPicker component allows for standard Form Field structures such as being set required, disabled, or readOnly, as well as including a label, status, or info.
If there is a label and the Field is not disabled, passing an object to the additionalInfo prop that includes a heading and content will provide the user with more useful information on the Field when they click on the associated information Icon.
It can also be set to display the input inline with its label, as well as rendering only the color swatch rather than the entire input when swatchOnly is provided.