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}

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

On this page