Netlify Docs
Ask Netlify

Contact

Netlify Create /Visual editing /

Field controls

Control how form fields are displayed for content editors.

Thumbnail field from model extension.

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.

# Customize 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.

// stackbit.config.ts
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"
            }
            // ...
          ]
        }
      ]
    }
  ]
});