---
title: "Code Field"
aliases: [payload-code-field, code-field-payloadcms]
tags: [payloadcms, fields, admin, monaco]
sources: [raw/fields__code.md]
created: 2026-05-15
updated: 2026-05-15
---

## Overview

The Code Field stores a plain string in the database but renders a **Monaco editor** (VS Code's editor) in the Admin Panel — with syntax highlighting, line numbers, and language support.

```ts
import type { Field } from 'payload'

export const MyCodeField: Field = {
  name: 'trackingCode',
  type: 'code',
  required: true,
  admin: {
    language: 'javascript',
  },
}
```

## Config Options

| Option | Description |
|--------|-------------|
| `name` * | Property name in DB |
| `label` | Field label in Admin Panel |
| `unique` | DB-level unique index |
| `index` | Build DB index for faster queries |
| `minLength` / `maxLength` | String length validation |
| `validate` | Custom validation function (client + server) |
| `saveToJWT` | Include in user JWT if top-level auth field |
| `hooks` | Field-level hooks |
| `access` | Field-level access control |
| `hidden` | Hide from API and Admin; still saved to DB |
| `defaultValue` | Default string value |
| `localized` | Enable localization (requires base config) |
| `required` | Field must have a value |
| `virtual` | Disable DB column or link to relationship |
| `typescriptSchema` | Override generated TS type with JSON schema |
| `custom` | Extension point for plugins |

## Admin Options

Extends the base [[wiki/payloadcms/fields-basic|Field Admin Config]] with:

| Option | Description |
|--------|-------------|
| `language` | Monaco language ID (e.g. `'javascript'`, `'css'`, `'html'`) — full list at [microsoft/monaco-editor basic-languages](https://github.com/microsoft/monaco-editor/tree/main/src/basic-languages) |
| `editorOptions` | Monaco `IDiffEditorConstructionOptions` — theme, fontSize, minimap, etc. |

## Custom Components

### Field Component

```tsx
// Server
import { CodeField } from '@payloadcms/ui'
import type { CodeFieldServerComponent } from 'payload'

export const CustomCodeFieldServer: CodeFieldServerComponent = ({
  clientField, path, schemaPath, permissions,
}) => <CodeField field={clientField} path={path} schemaPath={schemaPath} permissions={permissions} />

// Client
'use client'
import type { CodeFieldClientComponent } from 'payload'
export const CustomCodeFieldClient: CodeFieldClientComponent = (props) => <CodeField {...props} />
```

### Label Component

```tsx
// Server
import { FieldLabel } from '@payloadcms/ui'
import type { CodeFieldLabelServerComponent } from 'payload'

export const CustomCodeFieldLabelServer: CodeFieldLabelServerComponent = ({ clientField, path }) => (
  <FieldLabel label={clientField?.label || clientField?.name} path={path} required={clientField?.required} />
)
```

## Key Takeaways

- **Stored as string** — no special DB type; `varchar`/`text` column depending on adapter
- **Monaco editor** in Admin Panel — same engine as VS Code, supports 50+ languages
- Set `admin.language` to get syntax highlighting — default is plain text
- `editorOptions` gives full Monaco control (themes, keybindings, minimap, etc.)
- Supports `minLength`/`maxLength` validation like any text field
- `hidden: true` keeps data in DB but removes it from all API responses — useful for sensitive scripts
- `saveToJWT: true` embeds the code string into the user token — use sparingly (JWT size)

## Related

- [[wiki/payloadcms/fields-basic|Fields: Basic]] — shared field options (index, hooks, access, virtual)
- [[wiki/payloadcms/fields-complex|Fields: Complex]] — blocks/array for structured content
- [[wiki/payloadcms/custom-components-authoring|Custom Components — Authoring Guide]] — how to swap field components
- [[wiki/payloadcms/database-indexes|Database Indexes]] — when to set `index: true` or `unique`

## Sources

- `raw/fields__code.md` — compiled from https://payloadcms.com/docs/fields/code