> ## Documentation Index
> Fetch the complete documentation index at: https://docs.frogbot.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Tabs Field

> Organize fields into named or presentational admin tabs.

The Tabs field organizes fields into a tabbed editing interface. Unnamed tabs affect only the layout. Named tabs also nest their values under an object.

```ts theme={"theme":"tokyo-night"}
import type { TabsField } from 'frogbot'

export const pageTabs: TabsField = {
  type: 'tabs',
  tabs: [
    {
      label: 'Content',
      fields: [
        {
          name: 'title',
          type: 'text',
          required: true,
        },
      ],
    },
    {
      name: 'seo',
      label: 'SEO',
      interfaceName: 'SEO',
      fields: [
        {
          name: 'description',
          type: 'textarea',
          hooks: {
            beforeChange: [({ req, value }) => {
              req.frogbot.logger.debug('Updating SEO description')

              return value
            }],
          },
        },
      ],
    },
  ],
}
```

Here, `title` remains at the current level while `description` is stored as `seo.description`.

## Config options

| Option | Type | Default | Description |
| - | - | - | - |
| `type` | `'tabs'` | Required | Selects the Tabs field. |
| `tabs` | `Tab[]` | Required | Tabs rendered by this field. See the tab options below. |
| `admin` | `object` | — | Standard [field admin options](https://docs.frogbot.ai/fields/overview.md#admin-options) except `description`. |
| `hidden` | `boolean` | `false` | Hides the whole Tabs field and its fields in the admin panel. Their values are still stored and returned by the API. |
| `custom` | `Record<string, any>` | — | Server-only metadata for your own code and plugins. Use `admin.custom` for data the browser also needs. |

Each tab accepts the options below. Options marked "Named tabs only" are rejected on a tab without `name`, because only a named tab stores a value of its own.

| Option | Type | Default | Description |
| - | - | - | - |
| `fields` | `Field[]` | Required | Fields displayed within the tab. |
| `name` | `string` | — | Property name for a named tab, which nests its fields under an object. Omit it for a presentational tab. |
| `label` | `string \| Record<string, string> \| (({ i18n, t }) => string)` | Generated from `name` | Tab label. Required when `name` is omitted. |
| `description` | `string \| Record<string, string> \| (({ i18n, t }) => string)` | — | Deprecated. Use `admin.description`. |
| `interfaceName` | `string` | — | Named tabs only. Name of a reusable top-level generated TypeScript interface. |
| `id` | `string` | Generated for conditional tabs | Stable tab identifier. FrogBot generates one from the schema path when `admin.condition` is set. |
| `localized` | `boolean` | `false` | Named tabs only. Stores the tab's value once per configured locale. |
| `defaultValue` | `object` or `({ locale, req, user }) => value` | — | Named tabs only. Value used when the tab's value is missing. See [default values](https://docs.frogbot.ai/fields/overview.md#default-values). |
| `hooks` | `{ beforeValidate, beforeChange, afterChange, afterRead, beforeDuplicate }` | — | Named tabs only. Field hooks for the tab's value. See [field hooks](https://docs.frogbot.ai/hooks/fields.md). |
| `access` | `{ create, read, update }` | Allowed | Named tabs only. Field access for the tab's value. See [field access control](https://docs.frogbot.ai/access-control/fields.md). |
| `hidden` | `boolean` | `false` | Named tabs only. Removes the tab's value from API responses while keeping stored data. |
| `saveToJWT` | `boolean \| string` | `false` | Named tabs only. In an auth-enabled collection, copies the tab's value into the user's token. A string sets the token key. |
| `virtual` | `boolean \| string` | `false` | Named tabs only. `true` skips database storage; a string reads a value through a relationship path. |
| `disableDuplicate` | `boolean` | `false` | Named tabs only. Leaves the tab's value out when a document is duplicated. |
| `admin` | `object` | — | Standard [field admin options](https://docs.frogbot.ai/fields/overview.md#admin-options), including `condition` and `description`. |
| `custom` | `Record<string, any>` | — | Server-only metadata for your own code and plugins. Use `admin.custom` for data the browser also needs. |
| `jsonSchema` | `Array<({ jsonSchema }) => JSONSchema4>` | — | Named tabs only. Functions that modify the tab's JSON Schema used by [type generation](https://docs.frogbot.ai/typescript/generating-types.md). |

## Conditional tabs

Use `admin.condition` to show a tab from the current document data:

When the condition returns `false`, FrogBot hides the tab and all of its fields. If the active tab becomes hidden, the admin panel switches to the next visible tab.

```ts theme={"theme":"tokyo-night"}
import type { TabsField } from 'frogbot'

export const advancedTabs: TabsField = {
  type: 'tabs',
  tabs: [
    {
      label: 'Settings',
      fields: [
        {
          name: 'showAdvanced',
          type: 'checkbox',
        },
      ],
    },
    {
      label: 'Advanced',
      admin: {
        condition: (data) => Boolean(data.showAdvanced),
      },
      fields: [
        {
          name: 'internalName',
          type: 'text',
        },
      ],
    },
  ],
}
```

## Custom components

```tsx theme={"theme":"tokyo-night"}
import { TabsField } from '@frogbotai/ui/admin'
import type { TabsFieldServerProps } from 'frogbot'

export const CustomTabsField = ({
  clientField,
  path,
  permissions,
  schemaPath,
}: TabsFieldServerProps) => {
  return (
    <TabsField
      field={clientField}
      path={path}
      permissions={permissions}
      schemaPath={schemaPath}
    />
  )
}
```

Use `TabsFieldClientProps` for a client wrapper. Tab labels and descriptions are configured on each tab rather than through field label component slots.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.