Color field
The color field allows editors to freely select a color.
myColorField:
type: color
This field definition creates the following input in the control panel:
If you want the editor only to be able to pick from a fixed set of colors, see swatch color field.
Attributes
| Property | Description |
|---|---|
| disableAlpha | Hides the alpha setting in the color popup. This is turned on by default. |
| 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. |
| presetColors | Allows you to specify multiple predefined color values. |
| rules | The validation rules of the field. |
| width | The width of the field in the control panel. |
disableAlpha
Hides the alpha setting in the color popup. This is turned on by default.
disableAlpha: false
presetColors
Allows you to specify multiple predefined color values. Must be a list of hex color values.
presetColors:
- '#ff0000'
- '#00ff00'
- '#0000ff'
You must quote hex color values in YAML.
Templating
You can print a color field in twig to output its css color representation.
label: Color field demo
fields:
colorField:
type: color
---
<div style="background:{{ colorField }};"></div>