0ca37364ea
Continuation of #10741. Field-level admin options, including the conditional logic and custom field components, are currently documented within the "admin > customizing views" page. This makes them hard to find because users, myself included, intuitively navigate to the fields overview doc first to locate this information. Now, they are rendered within "fields > overview" as expected. This should help keep the user from jumping around from doc to doc and getting lost.
96 lines
3.4 KiB
Plaintext
96 lines
3.4 KiB
Plaintext
---
|
|
title: Collapsible Field
|
|
label: Collapsible
|
|
order: 60
|
|
desc: With the Collapsible field, you can place fields within a collapsible layout component that can be collapsed / expanded.
|
|
keywords: row, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
|
|
---
|
|
|
|
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.
|
|
|
|
<LightDarkImage
|
|
srcLight="https://payloadcms.com/images/docs/fields/collapsible.png"
|
|
srcDark="https://payloadcms.com/images/docs/fields/collapsible-dark.png"
|
|
alt="Shows a Collapsible field in the Payload Admin Panel"
|
|
caption="Admin Panel screenshot of a Collapsible field"
|
|
/>
|
|
|
|
To add a Collapsible Field, set the `type` to `collapsible` in your [Field Config](./overview):
|
|
|
|
```ts
|
|
import type { Field } from 'payload'
|
|
|
|
export const MyCollapsibleField: Field = {
|
|
// ...
|
|
// highlight-start
|
|
type: 'collapsible',
|
|
fields: [
|
|
// ...
|
|
],
|
|
// highlight-end
|
|
}
|
|
```
|
|
|
|
## 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](#admin-options). |
|
|
| **`custom`** | Extension point for adding custom data (e.g. for plugins) |
|
|
|
|
_* An asterisk denotes that a property is required._
|
|
|
|
## Admin Options
|
|
|
|
The customize the appearance and behavior of the Collapsible Field in the [Admin Panel](../admin/overview), you can use the `admin` option:
|
|
|
|
```ts
|
|
import type { Field } from 'payload'
|
|
|
|
export const MyCollapsibleField: Field = {
|
|
// ...
|
|
admin: { // highlight-line
|
|
// ...
|
|
},
|
|
}
|
|
```
|
|
|
|
The Collapsible Field inherits all of the default options from the base [Field Admin Config](./overview#admin-options), plus the following additional options:
|
|
|
|
| Option | Description |
|
|
| ------------------- | ------------------------------- |
|
|
| **`initCollapsed`** | Set the initial collapsed state |
|
|
|
|
## Example
|
|
|
|
`collections/ExampleCollection.ts`
|
|
|
|
```ts
|
|
import type { CollectionConfig } from 'payload'
|
|
|
|
export 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,
|
|
},
|
|
],
|
|
},
|
|
],
|
|
}
|
|
```
|