> ## Documentation Index
> Fetch the complete documentation index at: https://docs.frogbot.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Collapsible Field

> Place fields in an expandable admin-panel section.

The Collapsible field is a presentational container. It places fields in an expandable section without changing their stored paths.

To add one, set `type` to `collapsible`, provide a header label, and place its nested fields in `fields`:

```ts theme={"theme":"tokyo-night"}
import type { CollapsibleField } from 'frogbot'

export const advancedFields: CollapsibleField = {
  type: 'collapsible',
  label: 'Advanced settings',
  admin: {
    initCollapsed: true,
  },
  fields: [
    {
      name: 'title',
      type: 'text',
    },
    {
      name: 'internalNotes',
      type: 'textarea',
    },
  ],
}
```

The record contains `title` and `internalNotes` at the current level. The label can be text, localized text keyed by language code, or a function that receives `i18n` and `t`. To build the header from document data, set `admin.components.Label` to a component instead.

## Config options

| Option | Type | Default | Description |
| - | - | - | - |
| `type` | `'collapsible'` | Required | Selects the Collapsible field. |
| `label` | `string \| Record<string, string> \| (({ i18n, t }) => string) \| false` | Required unless `admin.components.Label` is set | Header shown for the section. Use `admin.components.Label` for a header based on document data. |
| `fields` | `Field[]` | Required | Fields displayed inside the section. |
| `admin` | `object` | — | Admin-panel options. See [Admin options](#admin-options). |
| `hidden` | `boolean` | `false` | Hides the section and its fields in the admin panel. Their values are still stored and returned by the API. |
| `custom` | `Record<string, any>` | — | Server-only metadata for your own code and plugins. Use `admin.custom` for data the browser also needs. |

## Admin options

Collapsible fields inherit the standard [field admin options](https://docs.frogbot.ai/fields/overview.md#admin-options) and add:

| Option | Type | Default | Description |
| - | - | - | - |
| `initCollapsed` | `boolean` | `false` | Closes the section initially. An editor's saved open or closed state takes precedence. |
| `components.Label` | `FrogBotComponent` | — | Component rendered as the section header. Required when `label` is omitted. |

## Custom components

```tsx theme={"theme":"tokyo-night"}
import { CollapsibleField } from '@frogbotai/ui/admin'
import type { CollapsibleFieldServerProps } from 'frogbot'

export const CustomCollapsibleField = ({
  clientField,
  path,
  permissions,
  schemaPath,
}: CollapsibleFieldServerProps) => {
  return (
    <CollapsibleField
      field={clientField}
      path={path}
      permissions={permissions}
      schemaPath={schemaPath}
    />
  )
}
```

Use `CollapsibleFieldClientProps` for a client replacement. A custom `label` component changes only the section header.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.