Content Field

Swatch color field

The swatch color field is a special select field that allows the editor to choose a color from a set of predefined colors.

mySwatchColorField:
  type: swatchcolor
  options:
    red: '#f00'
    green: '#0f0'
    blue: '#00f'

This field definition creates the following input in the control panel:

A swatch color field in the control panel

If you want the editor to be able to freely pick any color, see :doc:color-field.

Attributes

Property Description
defaultValue The key of the preselected value.
enumeration The qualifier of an enumeration class that defines the available options. Used to programmatically declare options.
group Starts a new field group.
instructions Additional instructions for this field in the control panel. Will be shown beneath the field label.
label The primary `label` of the input field in the control panel. When omitted, a label will be generated from the name of the field.
options Defines the available static options.
rules The validation rules of the field.
width The width of the field in the control panel.

The swatch color field is a select field under the hood and therefore behaves identical to a select field. The only difference is that the :code:label of each option must be a valid css color.

← Text field →