Model Field Type | Netlify Create Docs

Control Type

Object preview with controls to open the editor for that model instance or delete the model.

Stored Value

An object embedded within the parent object.

Supported Sources

Only works with content sources that allow for embedding objects within their parents.

Usage Example#

Here is an example that shows a HeroSection model that can be attached to a hero field on a page.

1
2
3
4
5
6
7
8
9
10
11
12
13

export default {
  models: {
    HeroSection: {
      fields: [{ name: 'heading', type: 'string', required: true }],
    },
    Page: {
      fields: [
        { name: 'title', type: 'string', required: true },
        { name: 'sections', type: 'model', models: ['HeroSection'] },
      ],
    },
  },
}

This will render a preview of the embedded model, with support for adding, editing, and removing.

Clicking on the preview will drill down in to the editor for that embedded model.

Required Properties#

Model fields require that you specify one or more models that can be added to this field. You can do this using either the models or groups property, but not both.

groups

An array of group names pulled that match one or more groups on a model definition. Only models of type object will be available.

models

An array of models of type object to be embedded into the field value. page and data models can not be embedded.

Choosing Multiple Models#

You have the option to choose from multiple models. Consider a scenario in which your page has a predefined featured section, but you could apply various section-level components to that field using either the models or groups property.

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

export default {
  models: {
    HeroSection: {
      label: 'Hero',
      fields: [
        { name: 'heading', type: 'string', required: true },
        // ...
      ],
    },
    CardGridSection: {
      label: 'Card Grid',
      fields: [
        { name: 'heading', type: 'string', required: true },
        // ...
      ],
    },
    Page: {
      fields: [
        { name: 'title', type: 'string', required: true },
        {
          name: 'featuredSection',
          type: 'model',
          models: ['HeroSection', 'CardGridSection'],
        },
      ],
    },
  },
}

And when choosing to populate that field, you'll first be able to choose which model you'd like to use.

You can always delete the content to switch to a different model.

Similarities to Other Models#

Model fields are similar to reference and object fields, with key differences in each scenario.

Reference vs Model#

reference fields refer to a page model (rather than an object model). They don't embed the result, but store a reference to that result. (As a string for Git CMS, and a built-in reference for API CMS.)

Object vs Model#

object fields are like ad-hoc models. The result is stored in the same way as model fields (as an embedded object on the parent), but the field definition is done directly in the parent model. Think of this as a model field where you only need to use the model once.