Object Property

An object property lets you group multiple controls together into a neat, structured package. To set it up, you define its structure in the fields option. Each field is just another property spec, so you can use text, number, boolean, or even nest other objects and arrays to build complex shapes.

Required Parameters

fields

The fields option is where you define the shape of your object. Each key you add here 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',
        },
      },
    },
  },
});

Just like any other property, each field needs:

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