Color Swatches Control¶

This webcomponent can be used as a wrapper for color-swatches to use it as a form element. It adds error handling and hidden input fields which holds color-swatches return value.

Attributes¶

Attribute name	Type	Default	Description
`control-id`	string	''
`control-name`	string	''
`disabled` (optional)	boolean	false
`required` (optional)	boolean	false
`error` (optional)	boolean	false	If set to true, adds css error class

Public properties¶

Property name	Return type	Description
`name`	string	Returns control name
`id`	string	Returns control id

Public methods¶

Method name	Parameters	Return type	Description
`selectColors()`	string[ ]	void	Select or deselect colors according to the passed parameter (array of hex colors)
`clearAllColors()`	null	void	Clear all selected colors

DOM Events¶

This webcomponent listens to the following DOM events:

change

Example¶

sourceoutput

<h-color-swatches-control control-name="color-swatches">
    <h-color-swatches multiple>
        <h-color-item color="#048A81" selected></h-color-item>
        <h-color-item color="#8A89C0"></h-color-item>
        <h-color-item color="#54C6EB"></h-color-item>
    </h-color-swatches>
</h-color-swatches-control>

<h-color-swatches-control control-name="color-swatches" class="color-swatches-control">
    <h-color-swatches multiple class="color-swatches">
        <h-color-item color="#048A81" selected tabindex="0" role="button" aria-label="#048A81" class="color-item color-swatches__color-item" style="background-color: rgb(4, 138, 129);"></h-color-item>
        <h-color-item color="#8A89C0" tabindex="0" role="button" aria-label="#8A89C0" class="color-item color-swatches__color-item" style="background-color: rgb(138, 137, 192);"></h-color-item>
        <h-color-item color="#54C6EB" tabindex="0" role="button" aria-label="#54C6EB" class="color-item color-swatches__color-item" style="background-color: rgb(84, 198, 235);"></h-color-item>
    </h-color-swatches>
    <h-control-errors class="control__errors"></h-control-errors>
    <input type="hidden" value="#048A81">
</h-color-swatches-control>