ColorFieldΒΆ

/libs/granite/ui/components/coral/foundation/form/colorfield

A field that allows user to enter color.

It extends Field component.

It has the following content structure:

granite:FormColorField
  1. granite:FormField
namestring

The name that identifies the field when submitting the form.

valuestringel

The value of the field. This value can be set in 5 different formats (HEX, RGB, RGBA, HSB and CMYK)

emptyTextstring
i18n

A hint to the user of what can be entered in the field.

disabledboolean

Indicates if the field is in disabled state.

requiredboolean

Indicates if the field is mandatory to be filled.

variantstring
  1. default

Enumeration for colorfield variant:

default
Use ColorField as a formfield
swatch
Use a simple swatch as ColorField
autogenerateColorsstring
  1. off

Enumeration for auto generated colors state:

off
Disable auto generation
shades
Automatically generate shades (darker colors) of all colors
tints
Automatically generate tints (lighter colors) of all colors
showSwatchesboolean

Indicates if swatches view should be displayed. swatches view is the right side container that allows to select color from swatches.

showPropertiesboolean

Indicates if color properties view should be displayed. color properties view is the left side container having sliders, hex and RGBA inputs

showDefaultColorsboolean

Indicates if default colors should be displayed.

validationstring
multiple

The name of the validator to be applied. E.g. foundation.jcr.name. See validation in Granite UI.

Custom colors can be added as items with following content structure:

granite:FormColorFieldItem
valuestring

The color value. This value can be set in 5 different formats (HEX, RGB, RGBA, HSB and CMYK)

Example:

+ colorfield
  - sling:resourceType = "granite/ui/components/coral/foundation/form/colorfield"
  + items
    + color1
      - value = "#FF4136"
    + color2
      - value = "#0074D9"