Form Color

>= v1.5

Form color component.

Color, Personalization Blocks

This content is part of TallStackUI personalization.

Example:

TallStackUi::personalize()
    ->form('color')
    ->block('block', 'classes');

The soft personalization should be done in boot method of service providers.

# Basic Usage

<x-color />

# Label & Hint

Color

Select your favorite color or insert a hexadecimal value.

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

# Picker Mode

An option to pick the color using a different selector.

<x-color picker />

# Selectable

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.

# Custom Colors

An option to specific your own hexadecimal colors.

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

Starting from version 1.35.0, you can now set the custom colors using the configuration file to avoid the need to pass it every time you need to use the component.

# Events

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

# Invalidate

An option to not show validation error message.

<x-color invalidate />

# Configurations

This component contains settings available in the configuration file. Click here to learn more.