Section - Vextro Docs

The f.section() field renders a heading and optional description as a visual divider. It stores no data. All fields following a section -- until the next section -- are visually grouped under that heading.

Basic usage

import { f, defineVextroCollection } from "vextro";

export const products = defineVextroCollection({
  slug: "products",
  label: "Products",
  collectionType: "content",
  tableName: "products",
  fields: {
    _contentSection: f.section({ label: "Content" }),
    name: f.text({ required: true }),
    description: f.richText(),

    _pricingSection: f.section({
      label: "Pricing",
      description: "Set the base price and tax configuration.",
    }),
    price: f.number({ required: true, min: 0 }),
    taxRate: f.number({ step: 0.01 }),

    _advancedSection: f.section({ label: "Advanced", collapsed: true }),
    metadata: f.json(),
  },
});

Section keys are typically prefixed with _ to signal they are not data fields.

Options

Option	Type	Default	Description
`label`	`string`	required	Heading text for the section.
`description`	`string`	--	Text shown below the heading.
`icon`	`string`	--	Icon name or SVG string next to the label.
`collapsible`	`boolean`	`true`	Whether the section can be collapsed.
`collapsed`	`boolean`	`false`	Whether the section starts collapsed.
`condition`	`FieldCondition`	--	Condition for showing the section header.

Conditional sections

A condition on a section hides only the heading. Apply the same condition to the fields beneath if you want them hidden as well:

_seoSection: f.section({
  label: "SEO Settings",
  condition: { field: "showSeo", equals: true },
}),
metaTitle: f.text({ condition: { field: "showSeo", equals: true } }),
metaDescription: f.textarea({ condition: { field: "showSeo", equals: true } }),

Section vs Collapsible

Feature	`f.section()`	`f.collapsible()`
Groups fields	Implicitly (until next section)	Explicitly (via `fields` option)
Contains its own fields	No	Yes
Data storage	None (UI-only)	Flat (parent level)

Use f.section() for lightweight visual dividers. Use f.collapsible() when you need explicit control over which fields belong to the group.