0ca37364ea
Continuation of #10741. Field-level admin options, including the conditional logic and custom field components, are currently documented within the "admin > customizing views" page. This makes them hard to find because users, myself included, intuitively navigate to the fields overview doc first to locate this information. Now, they are rendered within "fields > overview" as expected. This should help keep the user from jumping around from doc to doc and getting lost.
101 lines
4.8 KiB
Plaintext
101 lines
4.8 KiB
Plaintext
---
|
|
title: Tabs Field
|
|
label: Tabs
|
|
order: 170
|
|
desc: The Tabs field is a great way to organize complex editing experiences into specific tab-based areas.
|
|
keywords: tabs, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
|
|
---
|
|
|
|
The Tabs Field is presentational-only and only affects the [Admin Panel](../admin/overview) (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.
|
|
|
|
<LightDarkImage
|
|
srcLight="https://payloadcms.com/images/docs/fields/tabs.png"
|
|
srcDark="https://payloadcms.com/images/docs/fields/tabs-dark.png"
|
|
alt="Shows a tabs field used to separate Hero and Page layout in the Payload Admin Panel"
|
|
caption="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](./overview):
|
|
|
|
```ts
|
|
import type { Field } from 'payload'
|
|
|
|
export const MyTabsField: Field = {
|
|
// ...
|
|
// highlight-start
|
|
type: 'tabs',
|
|
tabs: [
|
|
// ...
|
|
]
|
|
// highlight-end
|
|
}
|
|
```
|
|
|
|
## Config Options
|
|
|
|
| Option | Description |
|
|
| ------------- | ------------------------------------------------------------------------------------------------------------------------ |
|
|
| **`tabs`** * | Array of tabs to render within this Tabs field. |
|
|
| **`admin`** | Admin-specific configuration. [More details](./overview#admin-options). |
|
|
| **`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](/docs/fields/overview#field-names) |
|
|
| **`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](/docs/typescript/generating-types#custom-field-interfaces) & [GraphQL type](/docs/graphql/graphql-schema#custom-field-schemas). (`name` must be present) |
|
|
| **`virtual`** | Provide `true` to disable field in the database (`name` must be present). See [Virtual Fields](https://payloadcms.com/blog/learn-how-virtual-fields-can-help-solve-common-cms-challenges) |
|
|
|
|
_* An asterisk denotes that a property is required._
|
|
|
|
## Example
|
|
|
|
`collections/ExampleCollection.ts`
|
|
|
|
```ts
|
|
import type { CollectionConfig } from 'payload'
|
|
|
|
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,
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
],
|
|
}
|
|
```
|