Tabs Field

Tabs field type used to separate Hero fields from Page Layout

Config

Option	Description
`tabs` *	Array of tabs to render within this Tabs field.
`admin`	Admin-specific configuration. See the default field admin config for 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
`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)

* An asterisk denotes that a property is required.

Example

collections/ExampleCollection.ts

1import { CollectionConfig } from 'payload/types'
2
3export 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,
          },
        ],
      },
    ],
  },
],
38}

See what others are building with Payload.

"Payload has transformed the way our clients manage content. It's an indispensable tool for any modern agency."

Deploy your entire stack in one place with Payload Cloud.

Microsoft chose Payload to tell the world about AI.

Tabs Field

Config

Tab-specific Config

Example

Text Field