Skip to content

Object Property

An object property groups multiple controls together into a structured package. Define its structure in the fields option. Each field is another property spec, so you can use text, number, boolean, or even nest other objects and arrays.

Actions
Label
Primary

Required Parameters

fields

The fields option defines the shape of your object. Each key becomes a new control in the editor, described by its own property spec.

Catalog.register('Sample', {
  component: Sample,
  props: {
    actions: {
      label: 'Actions',
      type: 'object',
      fields: {
        label: {
          label: 'Label',
          type: 'text',
        },
        primary: {
          label: 'Primary',
          type: 'boolean',
        },
      },
    },
  },
});

Like any other property, each field needs:

  • A label to display in the UI
  • A type that decides which input control to show