Form Color

Form color component.

# Basic Usage

<x-color />

Color

Select your favorite color or insert a hexadecimal value.

<x-color label="Color" hint="Select your favorite color or insert a hexadecimal value." />

Readonly

Disabled

<x-color label="Readonly" value="#3B82F6" readonly />
<x-color label="Disabled" value="#3B82F6" disabled />

An option to pick the color using a different selector.

<x-color picker />

An option to force the color selection through the color selector box.

<x-color selectable />

This will transform the input in readonly and open the color selector box when the input is clicked.

An option to specific your own hexadecimal colors.

<x-color :colors="['#83493D', '#3D8357', '#693D83', '#3AB3D1', '#5DD116']" />

<x-color clearable />

An option to exclude a step from the color selector in picker mode.

<x-color exclude-step="500" />
 
<!-- or an array of steps -->
 
<x-color :exclude-step="['100', '500']" />

Excluded step can only be used with picker mode.

An option to exclude a specific color from the color selector in picker mode.

<x-color exclude-color="red" />
 
<!-- or an array of colors -->
 
<x-color :exclude-color="['red', 'yellow']" />

Excluded step can only be used with picker mode.

<x-color x-on:set="alert(`Selected Color: ${$event.detail.color}`)" />

Event	Detail	Fired when
`set`	`{ color }`	A color is picked
`clear`	`{ color }`	The value is cleared