Enum Field Type

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

Control Types
dropdown (default), button-group, thumbnails, palette, palette-colors. See control types below for details.
Stored Value
The value property's value from an array of specified options objects. The exact properties of the options object depends on the control type.

Usage Example

Here is an example that shows a field called backgroundColor that lets an editor choose between a primary and secondary color.

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
export default {
  models: {
    Page: {
      fields: [
        { name: 'title', type: 'string', required: true },
        {
          name: 'backgroundColor',
          type: 'enum',
          options: [
            { label: 'Primary', value: 'primary' },
            { label: 'Secondary', value: 'secondary' },
          ],
        },
      ],
    },
  },
}

The default control type is a dropdown. See control types below for additional rendering options.

Enum Dropdown Control
Enum Dropdown Control

Control Types

Control types affect how the field is rendered, as well as how options are defined.

button-group

A button group creates a horizontal list of buttons, where only one can be selected at a time.

controlType
button-group
options

Either an array of strings or numbers, or an object with the following properties:

label (required): Text to display in the button.

value (required): Value to store in the content source.

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
export default {
  models: {
    Page: {
      fields: [
        {
          name: 'backgroundColor',
          type: 'enum',
          controlType: 'button-group',
          options: [
            { label: 'Primary', value: 'primary' },
            { label: 'Secondary', value: 'secondary' },
          ],
        },
      ],
    },
  },
}
Enum Button Group Control
Enum Button Group Control

Dropdown is the default control type. It renders a simple dropdown control that lists the labels and stores the values.

controlType
button-group
options

Either an array of strings or numbers, or an object with the following properties:

label (required): Text to display in dropdown menu.

value (required): Value to store in the content source.

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
export default {
  models: {
    Page: {
      fields: [
        {
          name: 'backgroundColor',
          type: 'enum',
          palette: 'dropdown',
          required: true,
          options: ['primary', 'secondary'],
        },
      ],
    },
  },
}
Enum Dropdown Control for Required Field
Enum Dropdown Control for Required Field
  • If field is not required, dropdown will render a None option to allow for clearing the value. Otherwise, only the options are rendered.

palette

A palette allows for a series of color swatches, where you can control the text, background, and border colors.

controlType
palette
options

An object with the following properties:

backgroundColor (required): Background color of the swatch.

borderColor: An optional border around the swatch.

textColor (required): Foreground color to show contrast and provide for dynamic color combinations.

value (required): Value to store in the content source.

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
export default {
  models: {
    Page: {
      fields: [
        {
          name: 'backgroundColor',
          type: 'enum',
          palette: 'palette',
          options: [
            {
              value: 'primary',
              textColor: '#FFFFFF',
              backgroundColor: '#c81faf',
            },
            {
              value: 'secondary',
              textColor: '#444444',
              backgroundColor: '#daf851',
              borderColor: '#444444',
            },
          ],
        },
      ],
    },
  },
}
Enum Palette Control
Enum Palette Control
  • You can also use variables from your global styles object. This is an effective way to ensure consistency in color choices throughout your project. Here's an example that let's editors choose from two colors set as primary and secondary in global styles.

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    export default {
      models: {
        Page: {
          fields: [
            {
              name: 'backgroundColor',
              type: 'enum',
              palette: 'palette',
              options: [
                {
                  value: 'primary',
                  textColor: '#FFFFFF',
                  backgroundColor: '$primary',
                },
                {
                  value: 'secondary',
                  textColor: '#secondary',
                  backgroundColor: '#FFFFFF',
                  borderColor: '#secondary',
                },
              ],
            },
          ],
        },
      },
    }
    Enum Palette Control with Dynamic Values
    Enum Palette Control with Dynamic Values

palette-colors

While palette shows single color combinations, palette-colors is designed to show more complex color combinations.

controlType
palette-colors
options

An object with the following properties:

colors (required): An array of string values, either as hex color values or global color variables (see below).

label: Display label for the option.

value (required): Value to store in the content source.

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
export default {
  models: {
    Page: {
      fields: [
        {
          name: 'theme',
          type: 'enum',
          palette: 'palette-colors',
          options: [
            {
              value: 'style-a',
              label: 'Dark / Purple Highlight',
              colors: ['#000046', '#c81faf'],
            },
            {
              value: 'style-b',
              label: 'Light / Lime Highlight',
              colors: ['#dddddd', '#daf851'],
            },
          ],
        },
      ],
    },
  },
}
Enum Palette Colors Control
Enum Palette Colors Control
  • Like the palette control, you can also use variables from your global styles object. This is an effective way to ensure consistency in color choices throughout your project.

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    export default {
      models: {
        Page: {
          fields: [
            {
              name: 'theme',
              type: 'enum',
              palette: 'palette',
              options: [
                {
                  value: 'style-a',
                  label: 'Primary with Dark Highlight',
                  colors: ['#000046', '$primary'],
                },
                // ...
              ],
            },
          ],
        },
      },
    }

thumbnails

You can also list a series of image tiles from images that are loaded directly from your repository.

controlType
thumbnails
options

An object with the following properties:

thumbnail (required): Path to the image file relative to the project configuration. Note that images do not have to be publicly accessible.

value (required): Value to store in the content source.

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
export default {
  models: {
    Page: {
      fields: [
        {
          name: 'backgroundColor',
          type: 'enum',
          controlType: 'thumbnails',
          options: [
            {
              value: 'primary',
              thumbnail: '.stackbit/thumbnails/primary.png',
            },
            {
              value: 'secondary',
              thumbnail: '.stackbit/thumbnails/secondary.png',
            },
          ],
        },
      ],
    },
  },
}
Enum Thumbnails Control
Enum Thumbnails Control