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
import { CollectionConfig } from 'payload/types'
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,
},
],
},
],
},
],
}
Next