Like what we’re doing? Star us on GitHub!

Tabs Field

Tabs field type used to separate Hero fields from Page Layout Tabs field type used to separate Hero fields from Page Layout

Config

OptionDescription
tabs *Array of tabs to render within this Tabs field.
adminAdmin-specific configuration. See the default field admin config for more details.

Tab-specific Config

Each tab has its own required label and fields array. You can also optionally pass a description to render within each individual tab.

OptionDescription
nameAn optional property name to be used when stored and retrieved from the database, similar to a Group.
label *The label to render on the tab itself.
fields *The fields to render within this tab.
descriptionOptionally render a description within this tab to describe the contents of the tab itself.

* An asterisk denotes that a property is required.

Example

collections/ExampleCollection.ts

import { CollectionConfig } from 'payload/types';
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
fields: [ // required
{
name: 'numberField', // accessible via tabTwo.numberField
type: 'number',
required: true,
},
],
}
]
}
]
}
Next

Text Field