107 lines
3.9 KiB
Markdown
107 lines
3.9 KiB
Markdown
---
|
|
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
|