Color Field Type

Additional attributes, defaults, and usage example for color fields.

Control Type
Color picker
Stored Value
String of the hex code, including the leading hash mark (e.g. #54c5d7).

Usage Example

Here is an example that shows a field called backgroundColor with a default value of #ffffff.

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
export default {
  models: {
    Page: {
      fields: [
        { name: 'title', type: 'string', required: true },
        { name: 'backgroundColor', type: 'color', default: '#ffffff' },
      ],
    },
  },
}

This renders a color picker with the default color already selected.

Color Picker Field Control
Color Picker Field Control