Color Picker

Example

<vega-color-picker
    label="Choose a Color"
    value="#73E6DC"
    auto-validation="true"
    hint="Select a color from the list"
>

</vega-color-picker>

<div id="box" style="margin-top:12px;border-radius:8px;width:200px;height:200px;background-color:#73E6DC;" />

const picker = document.querySelector('vega-color-picker');
picker.addEventListener("vegaChange", (e) => {
    document.querySelector('#box').style.backgroundColor = e.currentTarget.value 
})

Example with new color array

<vega-color-picker
    id="color-variation"
    label="Choose a Color"
    value="#CCCCCC"
    auto-validation="true"
    hint="Select a color from the list"
>
</vega-color-picker>

<div id="box2" style="margin-top:12px;border-radius:8px;width:200px;height:200px;background-color:#CCCCCC;" />

const picker = document.querySelector('#color-variation');
picker.colors = [
    '#FFFFFF','#000000','#FF0000','#CCCCCC','#0000FF','#00FFCC','#FF00FF','#99CC00'
]
picker.addEventListener("vegaChange", (e) => {
    document.querySelector('#box2').style.backgroundColor = e.currentTarget.value 
})

Usage

The color picker is a tool for selecting a color from an existing palette.

When a swatch is selected, a checkmark icon displays to indicate which color is selected.

Properties

Name	Description	Default
label	The label for the color picker. text	-
value	This is a preset value for the color picker. When set, it will appear as selected. string
required	Indicates whether the vega-color-picker is required. boolean	false
auto-validation	Indicator for whether to automatically validate the user’s input. boolean	true
validation-rules	Custom validation rules which can be attached to the color picker. `Array<{canEvaluate: (input: string, status: FormFieldStatusMeta, statusChanged: (keyof FormFieldStatusMeta)[]) => boolean, shouldShowError: (status: FormFieldStatusMeta, statusChanged: (keyof FormFieldStatusMeta)[]) => boolean, evaluate: (input: string) => EvaluateResult}>`
disabled	Indicates if the color picker is disabled. boolean	false
hint	A prompt message to supplement the expected value of the color picker. string
colors	Sets an array of customized hexadecimal color values for the color picker. array	`#73E6DC,#806BFF,#FFDC83,#FF9571,#00BBFF,#FF82C9,#259F9F,#563D82`

All Parameters


<vega-color-picker
    label="color-picker-label"
    value="#73E6DC"
    required="true"
    auto-validation="true"
    validation-rules=object
    disabled=false
    hint=""
    colors=array
>
</vega-color-picker>

Event

When the value of vega-color-picker is changed, it will dispatch the vegaChange event.

document.getElementById("color_picker_id").addEventListener("vegaValidate", (e) => {
console.log(e.currentTarget.isValid) })

For more details, view in Storybook.

Accessibility

Elements must only use allowed ARIA attributes.
ARIA commands must have an accessible name.
Required ARIA attributes must be provided.
ARIA roles used must conform to valid values.
ARIA attributes must conform to valid values.
ARIA attributes must conform to valid names.
Inline text spacing must be adjustable with custom stylesheets.
Elements must have sufficient color contrast.
IDs of active elements must be unique.
id attribute value must be unique.
Interactive controls must not be nested.