Tabs Field - FrogBot Docs

The Tabs field organizes fields into a tabbed editing interface. Unnamed tabs affect only the layout. Named tabs also nest their values under an object.

import type { TabsField } from 'frogbot'

export const pageTabs: TabsField = {
  type: 'tabs',
  tabs: [
    {
      label: 'Content',
      fields: [
        {
          name: 'title',
          type: 'text',
          required: true,
        },
      ],
    },
    {
      name: 'seo',
      label: 'SEO',
      interfaceName: 'SEO',
      fields: [
        {
          name: 'description',
          type: 'textarea',
          hooks: {
            beforeChange: [({ req, value }) => {
              req.frogbot.logger.debug('Updating SEO description')

              return value
            }],
          },
        },
      ],
    },
  ],
}

Here, title remains at the current level while description is stored as seo.description.

Config options

Option	Type	Default	Description
`type`	`'tabs'`	Required	Selects the Tabs field.
`tabs`	`Tab[]`	Required	Tabs rendered by this field. See the tab options below.
`admin`	`object`	—	Standard field admin options except `description`.
`hidden`	`boolean`	`false`	Hides the whole Tabs field 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.

Each tab accepts the options below. Options marked “Named tabs only” are rejected on a tab without name, because only a named tab stores a value of its own.

Option	Type	Default	Description
`fields`	`Field[]`	Required	Fields displayed within the tab.
`name`	`string`	—	Property name for a named tab, which nests its fields under an object. Omit it for a presentational tab.
`label`	`string \| Record<string, string> \| (({ i18n, t }) => string)`	Generated from `name`	Tab label. Required when `name` is omitted.
`description`	`string \| Record<string, string> \| (({ i18n, t }) => string)`	—	Deprecated. Use `admin.description`.
`interfaceName`	`string`	—	Named tabs only. Name of a reusable top-level generated TypeScript interface.
`id`	`string`	Generated for conditional tabs	Stable tab identifier. FrogBot generates one from the schema path when `admin.condition` is set.
`localized`	`boolean`	`false`	Named tabs only. Stores the tab’s value once per configured locale.
`defaultValue`	`object` or `({ locale, req, user }) => value`	—	Named tabs only. Value used when the tab’s value is missing. See default values.
`hooks`	`{ beforeValidate, beforeChange, afterChange, afterRead, beforeDuplicate }`	—	Named tabs only. Field hooks for the tab’s value. See field hooks.
`access`	`{ create, read, update }`	Allowed	Named tabs only. Field access for the tab’s value. See field access control.
`hidden`	`boolean`	`false`	Named tabs only. Removes the tab’s value from API responses while keeping stored data.
`saveToJWT`	`boolean \| string`	`false`	Named tabs only. In an auth-enabled collection, copies the tab’s value into the user’s token. A string sets the token key.
`virtual`	`boolean \| string`	`false`	Named tabs only. `true` skips database storage; a string reads a value through a relationship path.
`disableDuplicate`	`boolean`	`false`	Named tabs only. Leaves the tab’s value out when a document is duplicated.
`admin`	`object`	—	Standard field admin options, including `condition` and `description`.
`custom`	`Record<string, any>`	—	Server-only metadata for your own code and plugins. Use `admin.custom` for data the browser also needs.
`jsonSchema`	`Array<({ jsonSchema }) => JSONSchema4>`	—	Named tabs only. Functions that modify the tab’s JSON Schema used by type generation.

Conditional tabs

Use admin.condition to show a tab from the current document data: When the condition returns false, FrogBot hides the tab and all of its fields. If the active tab becomes hidden, the admin panel switches to the next visible tab.

import type { TabsField } from 'frogbot'

export const advancedTabs: TabsField = {
  type: 'tabs',
  tabs: [
    {
      label: 'Settings',
      fields: [
        {
          name: 'showAdvanced',
          type: 'checkbox',
        },
      ],
    },
    {
      label: 'Advanced',
      admin: {
        condition: (data) => Boolean(data.showAdvanced),
      },
      fields: [
        {
          name: 'internalName',
          type: 'text',
        },
      ],
    },
  ],
}

Custom components

import { TabsField } from '@frogbotai/ui/admin'
import type { TabsFieldServerProps } from 'frogbot'

export const CustomTabsField = ({
  clientField,
  path,
  permissions,
  schemaPath,
}: TabsFieldServerProps) => {
  return (
    <TabsField
      field={clientField}
      path={path}
      permissions={permissions}
      schemaPath={schemaPath}
    />
  )
}

Use TabsFieldClientProps for a client wrapper. Tab labels and descriptions are configured on each tab rather than through field label component slots.