Skip to content

Commit a1d6733

Browse files
authored
docs: add documentation for conditional tabs (#15809)
This adds documentation for the conditional tabs feature introduced in #8720, including the admin.condition and admin.description properties for individual tabs. Closes #1840 Co-authored-by: German Jablonski <GermanJablo@users.noreply.github.com>
1 parent f6f73dd commit a1d6733

1 file changed

Lines changed: 39 additions & 0 deletions

File tree

docs/fields/tabs.mdx

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,9 +51,48 @@ Each tab must have either a `name` or `label` and the required `fields` array. Y
5151
| **`description`** | Optionally render a description within this tab to describe the contents of the tab itself. |
5252
| **`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) |
5353
| **`virtual`** | Provide `true` to disable field in the database, or provide a string path to [link the field with a relationship](/docs/fields/relationship#linking-virtual-fields-with-relationships). See [Virtual Fields](https://payloadcms.com/blog/learn-how-virtual-fields-can-help-solve-common-cms-challenges) |
54+
| **`admin`** | Admin-specific configuration. [More details](./overview#admin-options). Currently supports `condition` and `description`. |
55+
| **`id`** | An optional identifier for the tab. If `admin.condition` is used on an unnamed tab, an `id` is required (and will be auto-generated if not provided). |
5456

5557
_\* An asterisk denotes that a property is required._
5658

59+
## Conditional Tabs
60+
61+
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.
62+
63+
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.
64+
65+
### Example
66+
67+
```ts
68+
{
69+
type: 'tabs',
70+
tabs: [
71+
{
72+
label: 'Always Visible',
73+
fields: [
74+
{
75+
name: 'showExtraTab',
76+
type: 'checkbox',
77+
},
78+
],
79+
},
80+
{
81+
label: 'Conditional Tab',
82+
admin: {
83+
condition: (data) => !!data.showExtraTab,
84+
},
85+
fields: [
86+
{
87+
name: 'extraField',
88+
type: 'text',
89+
},
90+
],
91+
},
92+
],
93+
}
94+
```
95+
5796
## Example
5897

5998
```ts

0 commit comments

Comments
 (0)