103 lines
3.4 KiB
Markdown
103 lines
3.4 KiB
Markdown
---
|
|
title: "Textarea Field"
|
|
aliases: [textarea-field, payload-textarea]
|
|
tags: [payloadcms, fields, textarea, string, admin]
|
|
sources: [raw/fields__textarea.md]
|
|
created: 2026-05-15
|
|
updated: 2026-05-15
|
|
---
|
|
|
|
Identical to [[wiki/payloadcms/fields-text|Text Field]] but renders a larger multiline input in the Admin Panel. Stores a plain string in the database.
|
|
|
|
## Config
|
|
|
|
```ts
|
|
{
|
|
name: 'metaDescription',
|
|
type: 'textarea',
|
|
required: true,
|
|
}
|
|
```
|
|
|
|
## Config Options
|
|
|
|
| Option | Description |
|
|
|--------|-------------|
|
|
| `name` * | DB property name |
|
|
| `label` | Admin Panel label (string or i18n object) |
|
|
| `unique` | DB-level unique index |
|
|
| `minLength` / `maxLength` | Character length validation |
|
|
| `validate` | Custom validation function (runs on client + backend) |
|
|
| `index` | Build DB index for faster queries |
|
|
| `saveToJWT` | Include in user JWT (top-level auth collections only) |
|
|
| `hooks` | Field lifecycle hooks |
|
|
| `access` | Field-level access control |
|
|
| `hidden` | Hide from all APIs and Admin; still saved to DB |
|
|
| `defaultValue` | Default value |
|
|
| `localized` | Enable per-locale content |
|
|
| `required` | Non-empty validation |
|
|
| `virtual` | `true` = no DB column; or path string for linked relationship |
|
|
| `typescriptSchema` | Override TS type generation with JSON schema |
|
|
| `custom` | Plugin extension point |
|
|
|
|
## Admin Options
|
|
|
|
| Option | Description |
|
|
|--------|-------------|
|
|
| `placeholder` | Placeholder string |
|
|
| `autoComplete` | Browser autocomplete string |
|
|
| `rows` | Visible text rows (default: `2`) |
|
|
| `rtl` | Force right-to-left text direction |
|
|
|
|
Inherits all base [[wiki/payloadcms/fields-overview|Field Admin Config]] options (condition, width, description, components, etc.).
|
|
|
|
## Custom Components
|
|
|
|
### Field Server Component
|
|
```tsx
|
|
import { TextareaField } from '@payloadcms/ui'
|
|
import type { TextareaFieldServerComponent } from 'payload'
|
|
|
|
export const CustomTextareaFieldServer: TextareaFieldServerComponent = ({
|
|
clientField, path, schemaPath, permissions,
|
|
}) => (
|
|
<TextareaField field={clientField} path={path} schemaPath={schemaPath} permissions={permissions} />
|
|
)
|
|
```
|
|
|
|
### Field Client Component
|
|
```tsx
|
|
'use client'
|
|
import { TextareaField } from '@payloadcms/ui'
|
|
import type { TextareaFieldClientComponent } from 'payload'
|
|
|
|
export const CustomTextareaFieldClient: TextareaFieldClientComponent = (props) => (
|
|
<TextareaField {...props} />
|
|
)
|
|
```
|
|
|
|
### Label (Server / Client)
|
|
Use `FieldLabel` from `@payloadcms/ui` with `label`, `path`, and `required` props — same pattern as other fields.
|
|
|
|
## Key Takeaways
|
|
|
|
- **Identical to Text field** — same DB storage (string), same options; only visual difference is the multiline textarea input
|
|
- **`rows` defaults to 2** — set higher for long content like `metaDescription`, bio, notes
|
|
- **`minLength`/`maxLength`** run on both client and server via the default validator
|
|
- **`virtual: true`** disables DB column; `virtual: '<path>'` links to a Relationship field
|
|
- **`saveToJWT`** embeds the value in the auth token — avoid for large text; use for short identifiers only
|
|
- **RTL support** — `admin.rtl: true` forces right-to-left for Arabic/Hebrew content fields
|
|
|
|
## Key Differences vs Text Field
|
|
|
|
| | Text | Textarea |
|
|
|-|------|---------|
|
|
| Input UI | Single-line | Multiline (`rows`) |
|
|
| `hasMany` mode | Yes | No |
|
|
| Built-in Slug helper | Yes (`slugField()`) | No |
|
|
| Otherwise | Identical | Identical |
|
|
|
|
## Sources
|
|
|
|
- `raw/fields__textarea.md` — compiled 2026-05-15
|
|
- https://payloadcms.com/docs/fields/textarea
|