---
title: "Collapsible Field"
aliases: [collapsible, payload-collapsible-field]
tags: [payloadcms, fields, admin-ui, layout]
sources: [raw/fields__collapsible.md]
created: 2026-05-15
updated: 2026-05-15
---

## Overview

The Collapsible field is **presentational-only** — it has no database column and exists solely to group fields under a collapsible UI section in the Admin Panel. It does not affect the data shape stored in the document.

## Config

```ts
import type { Field } from 'payload'

export const MyCollapsibleField: Field = {
  type: 'collapsible',      // required
  label: 'Advanced Options', // string | function | React component
  fields: [                 // required — nested fields
    { name: 'title', type: 'text' },
  ],
  admin: {
    initCollapsed: true,    // start collapsed (default: false)
  },
}
```

## Config Options

| Option | Required | Description |
|--------|----------|-------------|
| `type` | Yes | Must be `'collapsible'` |
| `label` | Yes | Header text — string, `({ data, path }) => string`, or React component |
| `fields` | Yes | Array of nested fields |
| `admin.initCollapsed` | No | Initial collapsed state (default `false`) |
| `custom` | No | Extension point for plugins |

## Dynamic Label

The `label` can be a function receiving `{ data, path }` — useful for showing a document field value as the header:

```ts
label: ({ data }) => data?.title || 'Untitled',
```

This is the most common pattern — label shows the primary content field so the collapsed state is still informative.

## Key Takeaways

- **No DB column** — pure Admin Panel layout, data is stored on the parent document as if the collapsible didn't exist
- **`label` is required** — must always provide a string, function, or React component
- **`fields` is required** — must nest at least one field
- **`initCollapsed`** — set to `true` to hide secondary/advanced fields by default, reducing visual noise
- **Dynamic label pattern** — `label: ({ data }) => data?.title || 'Untitled'` shows content field value in the header so collapsed rows are identifiable at a glance
- Collapsible fields can be **nested inside** [[wiki/payloadcms/fields-array|Array]] or [[wiki/payloadcms/fields-blocks|Blocks]] fields

## Related

- [[wiki/payloadcms/fields-complex|Fields: Complex]] — Row, Group, Array, Blocks, Tabs, Collapsible overview
- [[wiki/payloadcms/fields-array|Array Field]] — repeating rows that can contain Collapsible groups
- [[wiki/payloadcms/fields-blocks|Blocks Field]] — heterogeneous layouts; each block can use Collapsible internally
- [[wiki/payloadcms/custom-components-edit-view|Custom Components — Edit View]] — further UI customization options

## Sources

- `raw/fields__collapsible.md` (source: https://payloadcms.com/docs/fields/collapsible)
