Collapsible Field

Admin panel screenshot of a Collapsible field

Config

Option	Description
`label` \*	A label to render within the header of the collapsible component. This can be a string, function or react component. Function/components receive `({ data, path })` as args.
`fields` \*	Array of field types to nest within this Collapsible.
`admin`	Admin-specific configuration. See below for more detail.
`custom`	Extension point for adding custom data (e.g. for plugins)

\* 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

Example

collections/ExampleCollection.ts

1import { CollectionConfig } from 'payload/types'
2
3export const ExampleCollection: CollectionConfig = {
slug: 'example-collection',
fields: [
  {
    label: ({ data }) => data?.title || 'Untitled',
    type: 'collapsible', // required
    fields: [
      // required
      {
        name: 'title',
        type: 'text',
        required: true,
      },
      {
        name: 'someTextField',
        type: 'text',
        required: true,
      },
    ],
  },
],
24}

See what others are building with Payload.

"Payload has transformed the way our clients manage content. It's an indispensable tool for any modern agency."

Deploy your entire stack in one place with Payload Cloud.

Microsoft chose Payload to tell the world about AI.

Collapsible Field

Config

Admin Config

Example

Date Field