Vivid Logo Vivid

Simple Color Picker

The basic version of the Color Picker allows users to select a color from a predefined palette.

Usage

import '@vonage/vivid/simple-color-picker';

or, if you need to use a unique prefix:

import { registerSimpleColorPicker } from '@vonage/vivid';

registerSimpleColorPicker('your-prefix');

Open

Use the open attribute to indicate whether the Simple Color Picker's popup should be open.

  • Type: boolean
  • Default: false

Anchor

It is recommended use the anchor slot to set the anchor.

The anchor attribute should be set to the id value of the anchor element or pass the anchor element itself.

Pay attention to the source order the components to ensure they can be operated logically using only a keyboard.

Slots

Anchor Slot

Simple Color Picker needs to be anchored to an element. Place the anchor element inside the anchor slot of the Simple Color Picker. It is recommended to use the Button component as the anchor element.

API Reference

Properties

Property Type Default Description
anchor string | HTMLElement ID or direct reference to the component's anchor element.
disabled boolean Sets the element's disabled state. A disabled element will not be included during form submission.
initialValue string The default value of the element. This value sets the `value` property only when the `value` property has not been explicitly set.
label string The label for the form element.
name string The name of the element. This element's value will be surfaced during form submission under the provided name.
open boolean Indicates whether the popup is open
placement 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-end' | 'left-start' | 'right-end' | 'right-start' Preferred placement of the Color Picker's popup in relation to the anchor element
required boolean Require the field to be completed prior to form submission.
swatches {label?: string; value: string}[] List of color swatches, has to be an array of objects
swatchesPerRow number Number of swatches per row for grid layout
value
(modelValue)		 string The current value of the element.
Property Type Default Description
anchor string | HTMLElement ID or direct reference to the component's anchor element.
disabled boolean Sets the element's disabled state. A disabled element will not be included during form submission.
value string The default value of the element. This value sets the `value` property only when the `value` property has not been explicitly set.
label string The label for the form element.
name string The name of the element. This element's value will be surfaced during form submission under the provided name.
open boolean Indicates whether the popup is open
placement 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-end' | 'left-start' | 'right-end' | 'right-start' Preferred placement of the Color Picker's popup in relation to the anchor element
required boolean Require the field to be completed prior to form submission.
swatches
(property only) 		{label?: string; value: string}[] List of color swatches, has to be an array of objects
swatches-per-row number Number of swatches per row for grid layout
current-value string The current value of the element.

Slots

Name Description
anchor Slot for attaching the toggle button
Name Description
anchor Slot for attaching the toggle button

Events

Event Type Description
change CustomEvent<undefined> Fires when the value changes
input Event Fires when the value of the element changes.
update:modelValue string Fires when the modelValue value changes
Name Type Description
change CustomEvent<undefined> Fires when the value changes
input Event Fires when the value of the element changes.

Methods

Name Params Returns Description
checkValidity boolean Return the current validity of the element.
reportValidity boolean Return the current validity of the element. If false, fires an invalid event at the element.