Array Property

An array property stores a list of values. It can't stand on its own — you also need to define an item spec that describes what each entry in the list looks like. The item spec can be any other property type (like text, number, or select), and you can even nest objects and arrays inside.

In the editor, users can add or remove items. If you want new items to start with a default value, just add a default key to your item spec.

In the editor, this shows up with controls to add new entries or remove existing ones. Removing an item simply deletes it from the array.

Required Parameters

item

The item spec defines the property type for each entry in the array. Just like any other property, it needs at least a label and a type. The type tells the editor which kind of input to render for each item.

Catalog.register('Sample', {
  component: Sample,
  props: {
    tags: {
      label: 'Tags',
      type: 'array',
      item: {
        label: 'Tag'
        type: 'text',
      },
    },
  },
});

:::