--- 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, }) => ( ) ``` ### Field Client Component ```tsx 'use client' import { TextareaField } from '@payloadcms/ui' import type { TextareaFieldClientComponent } from 'payload' export const CustomTextareaFieldClient: TextareaFieldClientComponent = (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: ''` 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