Color Picker

The colorpicker field opens a color picker (Coloris) with preset colors shown as swatches. It saves the color as a hex string with a leading #, and normalizes a value typed without one.

Default swatches

With no options, the field shows a default set of 20 swatches and a picker for any other color.

fields:
    color:
        label: Color
        type: colorpicker
        comment: The default swatches, plus a picker for any custom color.

Fixed swatches

availableColors replaces the default swatches with your own list. Add allowCustom: false to limit the choice to those swatches, so the picker offers nothing else.

fields:
    accent_color:
        label: Accent Color
        type: colorpicker
        allowCustom: false
        availableColors: ['#6a6cf7', '#1abc9c', '#f39c12', '#e74c3c', '#34495e']
        comment: Only these swatches can be picked.

Swatches from the model

availableColors also takes the name of a method on the form's model that returns the colors. When the model has no such method, the form throws an error that names it.

fields:
    brand_color:
        label: Brand Color
        type: colorpicker
        availableColors: getBrandColors
        allowCustom: false
        comment: The swatches come from the getBrandColors method of the model.

/**
 * getBrandColors returns the swatches of the brand color picker, named by its availableColors option.
 *
 * @return array<int, string>
 */
public function getBrandColors(): array
{
    return ['#0f766e', '#14b8a6', '#f59e0b', '#be123c'];
}

Opacity and clearing

showAlpha adds an opacity slider, and the value is then saved as 8 digit hex, such as #3498db80. allowEmpty adds a clear button, which saves no color at all.

fields:
    overlay_color:
        label: Overlay Color
        type: colorpicker
        showAlpha: true
        allowEmpty: true
        comment: The opacity slider stores 8 digit hex, and the clear button empties the value.

Picker only

showInput drops the swatches, so the field opens straight into the picker for any color.

fields:
    text_color:
        label: Text Color
        type: colorpicker
        showInput: true
        comment: The picker alone, for any color, with no swatches.

Read-only

A readOnly field shows the color and its swatch without opening the picker, and still posts its value, so saving the form keeps it. A disabled field, or a form in preview mode, looks the same but posts nothing.

fields:
    border_color:
        label: Border Color
        type: colorpicker
        readOnly: true
        comment: Shown with its swatch, but the picker does not open.

Options

Option	Description
availableColors	the swatches, as a list of hex colors or the name of a model method that returns them. Default: a set of 20 colors.
allowCustom	lets the picker choose any color as well as the swatches. Default: true.
allowEmpty	adds a clear button that empties the value. Default: false.
showAlpha	adds an opacity slider and saves 8 digit hex. Default: false.
showInput	shows the picker without swatches. Default: false.

The field also takes the common field properties, such as readOnly and disabled.