# Colorpicker

<x-boilerplate::colorpicker name="color" value="#b33636" />

Will render

Colorpicker

# Attributes

Attributes that can be used with this component :

Option Type Default Description
name string null Input name (required)
value mixed null Initial value, can be an css supported color
palette array null Color palette
selection-palette array [] Additionnal color palette
id string autogenerated Id of the input field
label string null Input label, can be a translation string
options string Empty string Colorpicker options, see spectrum options (opens new window)
help string null Help message that will be displayed under the input field
group-id string null ID that will be added to form-group
group-class string null Additionnal class that will be added to form-group
class string Empty string Additionnal class that will be added to the input field

# Additionnal options

Additionnal options can be defined by setting them with the options attribute.

<x-boilerplate::colorpicker name="date" options="showAlpha:false,showPalette:false" />

# Palettes

To set the default palette colors use the palette attribute:

<x-boilerplate::colorpicker name="color" :palette="['red', 'green', 'blue', '#FC3453', 'rgba(155,26,47,.8)']" />

To set additional colors to add after the default palette, use the selection-palette attribute:

<x-boilerplate::colorpicker name="color" :selection-palette="['yellow', 'pink']" />

# Value

Value can be a hexadecimal string, a color string or an rgba string:

<x-boilerplate::colorpicker name="color" value="#FF0045" />
<x-boilerplate::colorpicker name="color" value="green" />
<x-boilerplate::colorpicker name="color" value="rgba(255,125,48,.5)" />