Color Field

The Color field type allows users to select and input colors using a color picker interface.

User Interface

Editor

The browser’s native color picker.

If the enableAlpha option is set to true, a slider for selecting the alpha (transparency) channel will also be displayed.

If the allowInput option is set to true, users can manually enter color values as text.

Future Plans

We plan to enhance the UI with a custom color picker in the future.

Preview

A small color swatch showing the selected color, along with its RGB(A) hex value and rgb() function notation.

Data Type

A string representing the color in RGB format, e.g. #RRGGBB. The value is stored in uppercase letters.

If the enableAlpha option is set to true, the color will be stored in RGBA format, e.g. #RRGGBBAA.

If the required option is set to false and the field is left empty, the value will be an empty string.

Data Validation

• If the required option is set to true, the color value must not be an empty string.
• The color value must be a valid hex color code, either in RGB (#RRGGBB) or RGBA (#RRGGBBAA) format, depending on the enableAlpha option.
• If the pattern option is provided, the color value must match the specified regular expression pattern.

Options

In addition to the common field options, the Color field supports the following options:

Required Options

widget

• Type: string
• Default: string

Must be set to color.

Optional Options

TIP

Unlike most of other config options, enableAlpha and allowInput are camelCased.

default

• Type: string
• Default: "" (empty string)

The default color value for the field, e.g. #FF0000 for red. If enableAlpha is true, the default value should include the alpha channel, e.g. #FF0000FF for opaque red.

enableAlpha

• Type: boolean
• Default: false

If set to true, the color picker will allow selection of the alpha (transparency) channel, and the color value will be stored in RGBA format.

allowInput

• Type: boolean
• Default: false

If set to true, users can manually enter color values as text in addition to using the color picker.

Examples

Basic Color Field

This example shows a simple Color field configuration.

YAML

- name: background_color
  label: Background Color
  widget: color

TOML

[[fields]]
name = "background_color"
label = "Background Color"
widget = "color"

JSON

{
  "name": "background_color",
  "label": "Background Color",
  "widget": "color"
}

JavaScript

{
  name: "background_color",
  label: "Background Color",
  widget: "color",
}

Output example:

YAML

background_color: '#FFFFFF'

TOML

background_color = "#FFFFFF"

JSON

{
  "background_color": "#FFFFFF"
}

Color Field with Alpha and Input Allowed

This example shows a Color field configuration with alpha channel enabled, manual input allowed, and a default value set.

YAML

- name: overlay_color
  label: Overlay Color
  widget: color
  enableAlpha: true
  allowInput: true
  default: '#00000080'

TOML

[[fields]]
name = "overlay_color"
label = "Overlay Color"
widget = "color"
enableAlpha = true
allowInput = true
default = "#00000080"

JSON

{
  "name": "overlay_color",
  "label": "Overlay Color",
  "widget": "color",
  "enableAlpha": true,
  "allowInput": true,
  "default": "#00000080"
}

JavaScript

{
  name: "overlay_color",
  label: "Overlay Color",
  widget: "color",
  enableAlpha: true,
  allowInput: true,
  default: "#00000080",
}

Output example:

YAML

overlay_color: '#00000080'

TOML

overlay_color = "#00000080"

JSON

{
  "overlay_color": "#00000080"
}