Array Field
Example uses:
- A "slider" with an image (upload field) and a caption (text field)
- Navigational structures where editors can specify nav items containing pages (relationship field), an "open in new tab" checkbox field
- Event agenda "timeslots" where you need to specify start & end time (date field), label (text field), and Learn More page relationship
Admin panel screenshot of an Array field with a Row containing two text fields, a read-only text field and a checkbox
Config
| Option | Description |
|---|---|
name * | To be used as the property name when stored and retrieved from the database. More |
label | Text used as the heading in the Admin panel or an object with keys for each language. Auto-generated from name if not defined. |
fields * | Array of field types to correspond to each row of the Array. |
validate | Provide a custom validation function that will be executed on both the Admin panel and the backend. More |
saveToJWT | If this field is top-level and nested in a config supporting Authentication, include its data in the user JWT. |
hooks | Provide field-based hooks to control logic for this field. More |
access | Provide field-based access control to denote what users can see and do with this field's data. More |
hidden | Restrict this field's visibility from all APIs entirely. Will still be saved to the database, but will not appear in any API or the Admin panel. |
defaultValue | Provide an array of row data to be used for this field's default value. More |
localized | Enable localization for this field. Requires localization to be enabled in the Base config. If enabled, a separate, localized set of all data within this Array will be kept, so there is no need to specify each nested field as localized. |
required | Require this field to have a value. |
labels | Customize the row labels appearing in the Admin dashboard. |
admin | Admin-specific configuration. See below for more detail. |
* An asterisk denotes that a property is required.
Admin Config
In addition to the default field admin config, you can adjust the following properties:
| Option | Description |
|---|---|
initCollapsed | Set the initial collapsed state |
components.RowLabel | Function or React component to be rendered as the label on the array row. Receives ({ data, index, path }) as args |
Example
collections/ExampleCollection.ts
import { CollectionConfig } from 'payload/types';
const ExampleCollection: CollectionConfig = {
slug: 'example-collection',
fields: [
{
name: 'slider', // required
type: 'array', // required
label: 'Image Slider',
minRows: 2,
maxRows: 10,
labels: {
singular: 'Slide',
plural: 'Slides',
},
fields: [ // required
{
name: 'title',
type: 'text',
},
{
name: 'image',
type: 'upload',
relationTo: 'media',
required: true,
},
{
name: 'caption',
type: 'text',
}
],
admin: {
components: {
RowLabel: ({ data, index }) => {
return data?.title || `Slide ${String(index).padStart(2, '0')}`;
},
},
},
}
]
};
Next