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. |
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.
| Option | Description |
|---|---|
name | An optional property name to be used when stored and retrieved from the database. More |
label * | The label to render on the tab itself. |
fields * | The fields to render within this tab. |
description | Optionally 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