Collapsible - Vextro Docs

The f.collapsible() layout field wraps fields in a togglable section with a label. Unlike f.group(), collapsible sections do not create nested objects -- all fields are flattened to the parent level.

Basic usage

import { f, defineVextroCollection } from "vextro";

export const pages = defineVextroCollection({
  slug: "pages",
  label: "Pages",
  collectionType: "content",
  tableName: "pages",
  fields: {
    title: f.text({ required: true }),
    body: f.richText(),
    advanced: f.collapsible({
      label: "Advanced Options",
      collapsed: true,
      fields: {
        cacheControl: f.text({ placeholder: "max-age=3600" }),
        customHeaders: f.json(),
      },
    }),
  },
});

Options

Option	Type	Default	Description
`label`	`string`	required	Header text for the section.
`description`	`string`	--	Text shown below the label.
`fields`	`Record<string, VextroFieldInput>`	required	Fields inside the section.
`collapsed`	`boolean`	`false`	Whether the section starts collapsed.
`condition`	`FieldCondition`	--	Condition for showing the section.

Conditional collapsible

Show the section only when a condition is met:

externalSettings: f.collapsible({
  label: "External Link Settings",
  condition: { field: "linkType", equals: "external" },
  fields: {
    openInNewTab: f.checkbox(),
    nofollow: f.checkbox(),
  },
}),

Collapsible vs Group

Feature	`f.collapsible()`	`f.group()`
Data storage	Flat (parent level)	Nested object
Creates object key	No	Yes
Collapsible UI	Always	Optional (`collapsible: true`)
Use case	Visual grouping only	Logical data nesting

Use f.collapsible() when you want to tidy the editor without changing document shape. Use f.group() when fields logically belong as a nested object.