Object field

The object field is used to create complex object schemas that can contain any other fields.

It's particularly useful when you need a set of fields for each option in an array field, conditional field or blocks field.

Usage examples

Simple

snapshot: fields.object({
  name: fields.text({ label: 'Name' }),
  age: fields.integer({ label: 'Age' }),
})

Complex

snapshot: fields.object({
  name: fields.text({ label: 'Name' }),
  age: fields.integer({ label: 'Age' }),

  // Nested relationship array
  projects: fields.array(
    fields.relationship({
      label: 'Projects',
      collection: 'projects',
      validation: {
        isRequired: true,
      },
    }),
    {
      label: 'Projects',
      itemLabel: (props) => props.value ?? 'Please select a project',
    }
  ),
})

Patterns

Field goups

You can group fields together by providing a second "options" argument to fields.object(), which accepts a label and description. This is similar to a <fieldset> in HTML.

address: fields.object({
  street: fields.text({ label: 'Street' }),
  city: fields.text({ label: 'City' }),
  state: fields.text({ label: 'State' }),
  postcode: fields.text({ label: 'Postcode' }),
  country: fields.text({ label: 'Country' }),
},
{
  label: 'Address',
  description: 'The address of the user',
})

Layout

The options argument also accepts a layout property, which can be used to define the number of columns each field should span. The grid layout supports 12 possible columns.

address: fields.object({
  street: fields.text({ label: 'Street' }),
  city: fields.text({ label: 'City' }),
  state: fields.text({ label: 'State' }),
  postcode: fields.text({ label: 'Postcode' }),
  country: fields.text({ label: 'Country' }),
},
{
  label: 'Address',
  description: 'The address of the user',
  layout: [12, 6, 3, 3, 12],
})

Type signature

Find the latest version of this field's type signature at: https://docsmill.dev/npm/@keystatic/core@latest#/.fields.object