obsidian/raw/_processed/fields__tabs.md

title	label	order	desc	keywords	source
Tabs Field	Tabs	170	The Tabs field is a great way to organize complex editing experiences into specific tab-based areas.	tabs, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, nextjs	https://payloadcms.com/docs/fields/tabs

The Tabs Field is presentational-only and only affects the Admin Panel (unless a tab is named). By using it, you can place fields within a nice layout component that separates certain sub-fields by a tabbed interface.

To add a Tabs Field, set the type to tabs in your Field Config:

import type { Field } from 'payload'

export const MyTabsField: Field = {
  // ...
  // highlight-start
  type: 'tabs',
  tabs: [
    // ...
  ],
  // highlight-end
}

Config Options

Option	Description
tabs *	Array of tabs to render within this Tabs field.
admin	Admin-specific configuration. More details.
custom	Extension point for adding custom data (e.g. for plugins)

Tab-specific Config

Each tab must have either a name or label and the required fields array. You can also optionally pass a description to render within each individual tab.

Option	Description
name	Groups field data into an object when stored and retrieved from the database. More details.
label	The label to render on the tab itself. Required when name is undefined, defaults to name converted to words.
fields *	The fields to render within this tab.
description	Optionally render a description within this tab to describe the contents of the tab itself.
interfaceName	Create a top level, reusable Typescript interface & GraphQL type. (name must be present)
virtual	Provide true to disable field in the database, or provide a string path to link the field with a relationship. See Virtual Fields
admin	Admin-specific configuration. More details. Currently supports condition and description.
id	An optional identifier for the tab. If admin.condition is used on an unnamed tab, an id is required (and will be auto-generated if not provided).

* An asterisk denotes that a property is required.

Conditional Tabs

Just like fields, individual tabs can be conditionally shown or hidden based on the value of other fields. This is done by providing a condition function to the admin property of the tab config.

When a tab's condition returns false, the tab and all of its fields will be hidden from the Admin Panel. If the currently active tab becomes hidden due to a condition change, Payload will automatically switch to the next available visible tab.

Example

{
  type: 'tabs',
  tabs: [
    {
      label: 'Always Visible',
      fields: [
        {
          name: 'showExtraTab',
          type: 'checkbox',
        },
      ],
    },
    {
      label: 'Conditional Tab',
      admin: {
        condition: (data) => !!data.showExtraTab,
      },
      fields: [
        {
          name: 'extraField',
          type: 'text',
        },
      ],
    },
  ],
}

Example

import type { CollectionConfig } from 'payload'

export const ExampleCollection: CollectionConfig = {
  slug: 'example-collection',
  fields: [
    {
      type: 'tabs', // required
      tabs: [
        // required
        {
          label: 'Tab One Label', // required
          description: 'This will appear within the tab above the fields.',
          fields: [
            // required
            {
              name: 'someTextField',
              type: 'text',
              required: true,
            },
          ],
        },
        {
          name: 'tabTwo',
          label: 'Tab Two Label', // required
          interfaceName: 'TabTwo', // optional (`name` must be present)
          fields: [
            // required
            {
              name: 'numberField', // accessible via tabTwo.numberField
              type: 'number',
              required: true,
            },
          ],
        },
      ],
    },
  ],
}