Collapsible Field

The Collapsible Field is presentational-only and only affects the Admin Panel. By using it, you can place fields within a nice layout component that can be collapsed / expanded.

Admin Panel screenshot of a Collapsible field

To add a Collapsible Field, set the type to collapsible in your Field Config:

1import type { Field } from 'payload'
2
3export const MyCollapsibleField: Field = {
4  // ...
5  type: 'collapsible',
6  fields: [
7    // ...
8  ],
9}

Config Options

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. More details.
`custom`	Extension point for adding custom data (e.g. for plugins)

* An asterisk denotes that a property is required.

Admin Options

To customize the appearance and behavior of the Collapsible Field in the Admin Panel, you can use the admin option:

1import type { Field } from 'payload'
2
3export const MyCollapsibleField: Field = {
4  // ...
5  admin: { 
6    // ...
7  },
8}

The Collapsible Field inherits all of the default options from the base Field Admin Config, plus the following additional options:

Option	Description
`initCollapsed`	Set the initial collapsed state

Example

collections/ExampleCollection.ts

1import type { CollectionConfig } from 'payload'
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 Options

Admin Options

Example

Date Field