Collapsible Field - FrogBot Docs

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:

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.
`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 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

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.