Array

Render a list of items with a subset of fields. Extends Base.

Interactive Demo

Example

Apple
Banana

const config = {
  components: {
    Example: {
      fields: {
        items: {
          type: "array",
          arrayFields: {
            title: { type: "text" },
          },
        },
      },
      render: ({ items }) => {
        return (
          <ul>
            {items.map((item, i) => (
              <li key={i}>{item.title}</li>
            ))}
          </ul>
        );
      },
    },
  },
};

Params

Param	Example	Type	Status
`type`	`type: "array"`	”array”	Required
`arrayFields`	`arrayFields: { title: { type: "text" } }`	Object	Required
`defaultItemProps`	`defaultItemProps: { title: "Hello, world" }`	Object \| Function	-
`getItemSummary()`	`getItemSummary: (item) => item.title`	Function	-
`max`	`max: 3`	Number	-
`min`	`min: 1`	Number	-

Required params

`type`

The type of the field. Must be "array" for Array fields.

const config = {
  components: {
    Example: {
      fields: {
        items: {
          type: "array",
          arrayFields: {
            title: { type: "text" },
          },
        },
      },
      // ...
    },
  },
};

`arrayFields`

Describe the fields for each item in the array. Shares an API with fields.

Can include any field type, including nested array fields.

const config = {
  components: {
    Example: {
      fields: {
        items: {
          type: "array",
          arrayFields: {
            title: { type: "text" },
          },
        },
      },
      // ...
    },
  },
};

Optional params

`defaultItemProps`

Set the default values when a new item is added to the array. Can be an object or a function that receives the current array index.

const config = {
  components: {
    Example: {
      fields: {
        items: {
          type: "array",
          arrayFields: {
            title: { type: "text" },
          },
          defaultItemProps: {
            title: "Hello, world",
          },
        },
      },
      // ...
    },
  },
};

Interactive Demo

Example

Apple
Banana

You can also use a function to generate dynamic defaults:

const config = {
  components: {
    Example: {
      fields: {
        items: {
          type: "array",
          arrayFields: {
            title: { type: "text" },
            order: { type: "number" },
          },
          defaultItemProps: (index) => ({
            title: `Item ${index + 1}`,
            order: index + 1,
          }),
        },
      },
      // ...
    },
  },
};

Interactive Demo

Dynamic Example

`getItemSummary(item, index)`

Get a label of each item in the array. Returns a ReactNode.

⚠️

Avoid using interactive HTML elements like <button>, <input>, or <a> inside getItemSummary. These elements can interfere with the array field’s built-in interactions (such as drag-and-drop reordering and item expansion). Stick to non-interactive elements like <div>, <span>, <p>, or plain text for summaries.

const config = {
  components: {
    Example: {
      fields: {
        items: {
          type: "array",
          arrayFields: {
            title: { type: "text" },
          },
          getItemSummary: (item) => item.title || "Item",
        },
      },
      // ...
    },
  },
};

Interactive Demo

Example

Apple
Banana

`max`

The maximum amount of items allowed in the array.

const config = {
  components: {
    Example: {
      fields: {
        items: {
          type: "array",
          arrayFields: {
            title: { type: "text" },
          },
          max: 3,
        },
      },
      // ...
    },
  },
};

Interactive Demo

Example

Apple
Banana

`min`

The minimum amount of items allowed in the array.

const config = {
  components: {
    Example: {
      fields: {
        items: {
          type: "array",
          arrayFields: {
            title: { type: "text" },
          },
          min: 1,
        },
      },
      // ...
    },
  },
};

Interactive Demo

Example

Apple
Banana

Base Custom