fix(ui): hide entire tabs field when admin.condition is false

Tabs field with `admin.condition` only hid child fields — tab buttons
and description remained visible. Tabs branch in `addFieldStatePromise`
never wrote `state[path]` for the container, so `WatchCondition` saw
`passesCondition === undefined` and rendered the tabs UI regardless.

Mirror row/collapsible pattern: write `state[path]` with `disableFormData`
and `passesCondition: false` when the condition fails.

Fixes #12761

Author: jacobsfletch

packages/ui/src/forms/fieldSchemasToFormState/addFieldStatePromise.ts

@@ -947,6 +947,16 @@ export const addFieldStatePromise = async (args: AddFieldStatePromiseArgs): Prom
       state,
     })
   } else if (field.type === 'tabs') {
+    if (!filter || filter(args)) {
+      state[path] = {
+        disableFormData: true,
+      }
+
+      if (passesCondition === false) {
+        state[path].passesCondition = false
+      }
+    }
+
     return iterateFields({
       id,
       addErrorPathToParent: addErrorPathToParentArg,

test/fields/collections/ConditionalLogic/e2e.spec.ts

@@ -1,15 +1,15 @@
 import type { BrowserContext, Page } from '@playwright/test'
 
 import { expect, test } from '@playwright/test'
-import { addArrayRow } from '../../../__helpers/e2e/fields/array/index.js'
-import { addBlock } from '../../../__helpers/e2e/fields/blocks/index.js'
 import path from 'path'
 import { fileURLToPath } from 'url'
 
 import type { PayloadTestSDK } from '../../../__helpers/shared/sdk/index.js'
 import type { Config } from '../../payload-types.js'
 
 import { assertNetworkRequests } from '../../../__helpers/e2e/assertNetworkRequests.js'
+import { addArrayRow } from '../../../__helpers/e2e/fields/array/index.js'
+import { addBlock } from '../../../__helpers/e2e/fields/blocks/index.js'
 import {
   ensureCompilationIsDone,
   initPageConsoleErrorCatch,
@@ -289,6 +289,25 @@ describe('Conditional Logic', () => {
     await expect(fieldWithOperationCondition).toBeHidden()
   })
 
+  test('should hide entire tabs field UI when admin.condition is false', async () => {
+    await page.goto(url.create)
+
+    const tabsField = page.locator('.tabs-field').filter({
+      has: page.locator('button:has-text("Tab With Condition 1")'),
+    })
+
+    await expect(tabsField).toBeHidden()
+
+    const enableTabsToggle = page.locator('label[for=field-enableTabs]')
+    await enableTabsToggle.click()
+
+    await expect(tabsField).toBeVisible()
+    await expect(tabsField.locator('button:has-text("Tab With Condition 1")')).toBeVisible()
+
+    await enableTabsToggle.click()
+    await expect(tabsField).toBeHidden()
+  })
+
   test('should toggle conditional field when radio changes inside a block', async () => {
     await page.goto(url.create)
 

test/fields/collections/ConditionalLogic/index.ts

@@ -231,6 +231,38 @@ const ConditionalLogic: CollectionConfig = {
         },
       ],
     },
+    {
+      name: 'enableTabs',
+      type: 'checkbox',
+    },
+    {
+      type: 'tabs',
+      admin: {
+        condition: ({ enableTabs }) => Boolean(enableTabs),
+      },
+      tabs: [
+        {
+          label: 'Tab With Condition 1',
+          description: 'Description for conditional tab 1',
+          fields: [
+            {
+              name: 'conditionalTabsField1',
+              type: 'text',
+            },
+          ],
+        },
+        {
+          label: 'Tab With Condition 2',
+          description: 'Description for conditional tab 2',
+          fields: [
+            {
+              name: 'conditionalTabsField2',
+              type: 'text',
+            },
+          ],
+        },
+      ],
+    },
     {
       name: 'arrayOne',
       type: 'array',

test/fields/payload-types.ts

@@ -1004,6 +1004,9 @@ export interface ConditionalLogic {
         blockType: 'blockWithRadioCondition';
       }[]
     | null;
+  enableTabs?: boolean | null;
+  conditionalTabsField1?: string | null;
+  conditionalTabsField2?: string | null;
   arrayOne?:
     | {
         title?: string | null;
@@ -2865,6 +2868,9 @@ export interface ConditionalLogicSelect<T extends boolean = true> {
               blockName?: T;
             };
       };
+  enableTabs?: T;
+  conditionalTabsField1?: T;
+  conditionalTabsField2?: T;
   arrayOne?:
     | T
     | {