Docs
API Reference
Fields
Array

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

ParamExampleTypeStatus
typetype: "array""array"Required
arrayFieldsarrayFields: { title: { type: "text" } }ObjectRequired
defaultItemPropsdefaultItemProps: { title: "Hello, world" }String-
getItemSummary()getItemSummary: (item) => item.titleFunction-
maxmax: 3Number-
minmin: 1Number-

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.

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

getItemSummary(item, index)

Get a label of each item in the array.

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
BaseCustom