Like what we’re doing? Star us on GitHub!

Collapsible Field

Config

OptionDescription
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.
adminAdmin-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:

OptionDescription
initCollapsedSet the initial collapsed state

Example

collections/ExampleCollection.ts

import { CollectionConfig } from 'payload/types';
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,
},
],
}
]
};
Next

Date Field