Field Controls | Netlify Create Docs

Netlify Create infers field editor controls as best as possible. Fields can then be further customized through model extensions.

Automatic Control Inference#

Every content source supports some limited set of field types for their editing interface.

Netlify Create offers a superset of every officially-supported content source. There is a default control type that can be inferred based on the defined schema within the source.

Mappings from content source fields to Netlify Create controls are unique to each content source and derived from the content source module.

Customizing Control Types#

Field controls can be customized by extending models through the modelExtensions property, or controlled directly if using Git content source.

For example, a field in a content source that is a string, chosen from a limited set of options. Netlify Create will likely render this as an enum field with a dropdown control type.

Example: Thumbnail Options#

Here's a simplified example that results in the field controls shown at the top of this document. A grid model has an arrangement field being extended to use thumbnail images rather than a dropdown.

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
27
28
29

import { defineStackbitConfig } from '@stackbit/types'

export default defineStackbitConfig({
  stackbitVersion: '~0.6.0',
  modelExtensions: [
    {
      name: 'grid',
      fields: [
        {
          name: 'arrangement',
          controlType: 'thumbnails',
          options: [
            {
              label: 'Two column grid',
              value: 'two-col-grid',
              thumbnail: 'https://assets.stackbit.com/components/images/default/two-col-grid.png',
            },
            {
              label: 'Three column grid',
              value: 'three-col-grid',
              thumbnail: 'https://assets.stackbit.com/components/images/default/three-col-grid.png',
            },
            // ...
          ],
        },
      ],
    },
  ],
})