Next
Tabs Field
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.
Tabs field type used to separate Hero fields from Page Layout
To add a Tabs Field, set the type to tabs in your Field Config:
1
import type { Field } from 'payload'
2
3
export const MyTabsField: Field = {
4
// ...
5
type: 'tabs',
6
tabs: [
7
// ...
8
],
9
}
Config Options
Option | Description |
|---|---|
| Array of tabs to render within this Tabs field. |
| Admin-specific configuration. More details. |
| 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 |
|---|---|
| Groups field data into an object when stored and retrieved from the database. More details. |
| The label to render on the tab itself. Required when name is undefined, defaults to name converted to words. |
| The fields to render within this tab. |
| Optionally render a description within this tab to describe the contents of the tab itself. |
| Create a top level, reusable Typescript interface & GraphQL type. ( |
| Provide |
| Admin-specific configuration. More details. Currently supports |
| An optional identifier for the tab. If |
* 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
1
{
2
type: 'tabs',
3
tabs: [
4
{
5
label: 'Always Visible',
6
fields: [
7
{
8
name: 'showExtraTab',
9
type: 'checkbox',
10
},
11
],
12
},
13
{
14
label: 'Conditional Tab',
15
admin: {
16
condition: (data) => !!data.showExtraTab,
17
},
18
fields: [
19
{
20
name: 'extraField',
21
type: 'text',
22
},
23
],
24
},
25
],
26
}
Example
1
import type { CollectionConfig } from 'payload'
2
3
export const ExampleCollection: CollectionConfig = {
4
slug: 'example-collection',
5
fields: [
6
{
7
type: 'tabs', // required
8
tabs: [
9
// required
10
{
11
label: 'Tab One Label', // required
12
description: 'This will appear within the tab above the fields.',
13
fields: [
14
// required
15
{
16
name: 'someTextField',
17
type: 'text',
18
required: true,
19
},
20
],
21
},
22
{
23
name: 'tabTwo',
24
label: 'Tab Two Label', // required
25
interfaceName: 'TabTwo', // optional (`name` must be present)
26
fields: [
27
// required
28
{
29
name: 'numberField', // accessible via tabTwo.numberField
30
type: 'number',
31
required: true,
32
},
33
],
34
},
35
],
36
},
37
],
38
}