Morph MORPH
SIGN IN SIGN UP
payloadcms / payload UNCLAIMED

Payload is the open-source, fullstack Next.js framework, giving you instant backend superpowers. Get a full TypeScript backend and admin panel instantly. Use Payload as a headless CMS or for building powerful applications.

0 0 510 TypeScript
Normal View History Raw
docs: stubs fields
2020-12-30 12:08:39 -05:00
---
title: Array Field
label: Array
order: 20
feat: adds meta descriptions to docs
2021-02-03 16:55:22 -05:00
desc: Array fields are intended for sets of repeating fields, that you define. Learn how to use array fields, see examples and options.
docs: add desc and keywords
2021-01-09 10:32:22 -05:00
keywords: array, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express
docs: stubs fields
2020-12-30 12:08:39 -05:00
---
feat: custom type interfaces (#2709) * feat: ability to hoist type interfaces and reuse them * docs: organizes ts and gql docs, adds section for field interfaces on both
2023-05-25 16:32:16 -04:00
<Banner>
The Array field type is used when you need to have a set of "repeating"
fields. It stores an array of objects containing the fields that you define.
Its uses can be simple or highly complex.
docs: array and blocks
2020-12-31 09:30:50 -05:00
</Banner>
**Example uses:**
- A "slider" with an image ([upload field](/docs/fields/upload)) and a caption ([text field](/docs/fields/text))
- Navigational structures where editors can specify nav items containing pages ([relationship field](/docs/fields/relationship)), an "open in new tab" [checkbox field](/docs/fields/checkbox)
docs: Admin
2021-01-02 10:38:17 -05:00
- Event agenda "timeslots" where you need to specify start & end time ([date field](/docs/fields/date)), label ([text field](/docs/fields/text)), and Learn More page [relationship](/docs/fields/relationship)
docs: array and blocks
2020-12-31 09:30:50 -05:00
chore: updates docs to reflect new website public images folder
2022-11-13 17:41:39 -05:00
![Array field in Payload admin panel](https://payloadcms.com/images/docs/fields/array.jpg)
feat: custom type interfaces (#2709) * feat: ability to hoist type interfaces and reuse them * docs: organizes ts and gql docs, adds section for field interfaces on both
2023-05-25 16:32:16 -04:00
_Admin panel screenshot of an Array field with a Row containing two text fields, a read-only text field and a checkbox_
docs: array and blocks
2020-12-31 09:30:50 -05:00
### Config
feat: custom type interfaces (#2709) * feat: ability to hoist type interfaces and reuse them * docs: organizes ts and gql docs, adds section for field interfaces on both
2023-05-25 16:32:16 -04:00
| Option | Description |
| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **`name`** \* | To be used as the property name when stored and retrieved from the database. [More](/docs/fields/overview#field-names) |
| **`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](/docs/fields/overview#validation) |
| **`saveToJWT`** | If this field is top-level and nested in a config supporting [Authentication](/docs/authentication/config), include its data in the user JWT. |
| **`hooks`** | Provide field-based hooks to control logic for this field. [More](/docs/fields/overview#field-level-hooks) |
| **`access`** | Provide field-based access control to denote what users can see and do with this field's data. [More](/docs/fields/overview#field-level-access-control) |
| **`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](/docs/fields/overview#default-values) |
| **`localized`** | Enable localization for this field. Requires [localization to be enabled](/docs/configuration/localization) 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](#admin-config). |
| **`custom`** | Extension point for adding custom data (e.g. for plugins) |
| **`interfaceName`** | Create a top level, reusable [Typescript interface](/docs/typescript/generating-types#custom-field-interfaces) & [GraphQL type](/docs/graphql/graphql-schema#custom-field-schemas). |
docs: array and blocks
2020-12-31 09:30:50 -05:00
feat: custom type interfaces (#2709) * feat: ability to hoist type interfaces and reuse them * docs: organizes ts and gql docs, adds section for field interfaces on both
2023-05-25 16:32:16 -04:00
_\* An asterisk denotes that a property is required._
docs: array and blocks
2020-12-31 09:30:50 -05:00
feat/add support for setting collapsable fields (array, block, collapsable… (#1057) Co-authored-by: liorix <liorix@gmail.com> Co-authored-by: Elliot DeNolf <denolfe@gmail.com>
2022-09-12 13:39:49 -04:00
### Admin Config
In addition to the default [field admin config](/docs/fields/overview#admin-config), you can adjust the following properties:
feat: custom type interfaces (#2709) * feat: ability to hoist type interfaces and reuse them * docs: organizes ts and gql docs, adds section for field interfaces on both
2023-05-25 16:32:16 -04:00
| 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 |
feat/add support for setting collapsable fields (array, block, collapsable… (#1057) Co-authored-by: liorix <liorix@gmail.com> Co-authored-by: Elliot DeNolf <denolfe@gmail.com>
2022-09-12 13:39:49 -04:00
docs: field types
2020-12-31 11:19:59 -05:00
### Example
docs: array and blocks
2020-12-31 09:30:50 -05:00
docs: update examples with ts types
2022-08-23 11:43:24 -04:00
`collections/ExampleCollection.ts`
feat: custom type interfaces (#2709) * feat: ability to hoist type interfaces and reuse them * docs: organizes ts and gql docs, adds section for field interfaces on both
2023-05-25 16:32:16 -04:00
docs: update examples with ts types
2022-08-23 11:43:24 -04:00
```ts
feat: custom type interfaces (#2709) * feat: ability to hoist type interfaces and reuse them * docs: organizes ts and gql docs, adds section for field interfaces on both
2023-05-25 16:32:16 -04:00
import { CollectionConfig } from "payload/types";
docs: update examples with ts types
2022-08-23 11:43:24 -04:00
chore: misc documentation updates (#2589) * chore: ensures example configs are being exported when necessary * chore: adds note regarding updating of hidden fields --------- Co-authored-by: Jessica Boezwinkle <jessica@trbl.design>
2023-05-01 16:28:13 -04:00
export const ExampleCollection: CollectionConfig = {
feat: custom type interfaces (#2709) * feat: ability to hoist type interfaces and reuse them * docs: organizes ts and gql docs, adds section for field interfaces on both
2023-05-25 16:32:16 -04:00
slug: "example-collection",
docs: array and blocks
2020-12-31 09:30:50 -05:00
fields: [
{
feat: custom type interfaces (#2709) * feat: ability to hoist type interfaces and reuse them * docs: organizes ts and gql docs, adds section for field interfaces on both
2023-05-25 16:32:16 -04:00
name: "slider", // required
type: "array", // required
label: "Image Slider",
docs: array and blocks
2020-12-31 09:30:50 -05:00
minRows: 2,
maxRows: 10,
feat: custom type interfaces (#2709) * feat: ability to hoist type interfaces and reuse them * docs: organizes ts and gql docs, adds section for field interfaces on both
2023-05-25 16:32:16 -04:00
interfaceName: "CardSlider", // optional
docs: array and blocks
2020-12-31 09:30:50 -05:00
labels: {
feat: custom type interfaces (#2709) * feat: ability to hoist type interfaces and reuse them * docs: organizes ts and gql docs, adds section for field interfaces on both
2023-05-25 16:32:16 -04:00
singular: "Slide",
plural: "Slides",
docs: array and blocks
2020-12-31 09:30:50 -05:00
},
feat: custom type interfaces (#2709) * feat: ability to hoist type interfaces and reuse them * docs: organizes ts and gql docs, adds section for field interfaces on both
2023-05-25 16:32:16 -04:00
fields: [
// required
feat: adds docs example
2022-11-15 12:37:47 -05:00
{
feat: custom type interfaces (#2709) * feat: ability to hoist type interfaces and reuse them * docs: organizes ts and gql docs, adds section for field interfaces on both
2023-05-25 16:32:16 -04:00
name: "title",
type: "text",
feat: add i18n to admin panel (#1326) Co-authored-by: shikhantmaungs <shinkhantmaungs@gmail.com> Co-authored-by: Thomas Ghysels <info@thomasg.be> Co-authored-by: Kokutse Djoguenou <kokutse@Kokutses-MacBook-Pro.local> Co-authored-by: Christian Gil <47041342+ChrisGV04@users.noreply.github.com> Co-authored-by: Łukasz Rabiec <lukaszrabiec@gmail.com> Co-authored-by: Jenny <jennifer.eberlei@gmail.com> Co-authored-by: Hung Vu <hunghvu2017@gmail.com> Co-authored-by: Shin Khant Maung <101539335+shinkhantmaungs@users.noreply.github.com> Co-authored-by: Carlo Brualdi <carlo.brualdi@gmail.com> Co-authored-by: Ariel Tonglet <ariel.tonglet@gmail.com> Co-authored-by: Roman Ryzhikov <general+github@ya.ru> Co-authored-by: maekoya <maekoya@stromatolite.jp> Co-authored-by: Emilia Trollros <3m1l1a@emiliatrollros.se> Co-authored-by: Kokutse J Djoguenou <90865585+Julesdj@users.noreply.github.com> Co-authored-by: Mitch Dries <mitch.dries@gmail.com> BREAKING CHANGE: If you assigned labels to collections, globals or block names, you need to update your config! Your GraphQL schema and generated Typescript interfaces may have changed. Payload no longer uses labels for code based naming. To prevent breaking changes to your GraphQL API and typescript types in your project, you can assign the below properties to match what Payload previously generated for you from labels. On Collections Use `graphQL.singularName`, `graphQL.pluralName` for GraphQL schema names. Use `typescript.interface` for typescript generation name. On Globals Use `graphQL.name` for GraphQL Schema name. Use `typescript.interface` for typescript generation name. On Blocks (within Block fields) Use `graphQL.singularName` for graphQL schema names.
2022-11-18 07:36:30 -05:00
},
docs: array and blocks
2020-12-31 09:30:50 -05:00
{
feat: custom type interfaces (#2709) * feat: ability to hoist type interfaces and reuse them * docs: organizes ts and gql docs, adds section for field interfaces on both
2023-05-25 16:32:16 -04:00
name: "image",
type: "upload",
relationTo: "media",
docs: array and blocks
2020-12-31 09:30:50 -05:00
required: true,
},
{
feat: custom type interfaces (#2709) * feat: ability to hoist type interfaces and reuse them * docs: organizes ts and gql docs, adds section for field interfaces on both
2023-05-25 16:32:16 -04:00
name: "caption",
type: "text",
},
feat: adds docs example
2022-11-15 12:37:47 -05:00
],
admin: {
components: {
docs: updates docs to reflect new API
2022-11-16 13:35:00 -05:00
RowLabel: ({ data, index }) => {
feat: custom type interfaces (#2709) * feat: ability to hoist type interfaces and reuse them * docs: organizes ts and gql docs, adds section for field interfaces on both
2023-05-25 16:32:16 -04:00
return data?.title || `Slide ${String(index).padStart(2, "0")}`;
feat: adds docs example
2022-11-15 12:37:47 -05:00
},
},
},
feat: custom type interfaces (#2709) * feat: ability to hoist type interfaces and reuse them * docs: organizes ts and gql docs, adds section for field interfaces on both
2023-05-25 16:32:16 -04:00
},
],
docs: update examples with ts types
2022-08-23 11:43:24 -04:00
};
docs: array and blocks
2020-12-31 09:30:50 -05:00
```
Reference in New Issue Copy Permalink